Page 1 sur 1

Pourtant je regarde bien ou je mets les pieds...

Publié : ven. mars 30, 2007 3:03 pm
par Adreqi
voici mon petit problème :

sur le design orange que je vous ai présenté dans ma galerie, j'ai un magnifique Pied de Page. jusqu'ici tout va bien.
Problème : Quand il n'y a pas beaucoup de contenu, le pied est assez haut pour faire un effet des plus désagréables (il cache en partie la déco de la partie centrale)
Pour y remédier j'ai pensé à imposer une hauteur minimale (ici de 450px) de façon à ce que le pied ne soit jamais trop haut.

le problème encore est que j'ai ajouté pour ce faire une propriété css "height" a la partie centrale me disant que peut-être ce serait une hauteur minimale et extensible. or ce n'est pas le cas et j'ai découvert avec stupeur que mon Pied se balladait allègrement au milieu de mes tutos et autres trucs...

y'a-t-il une âme charitable pour me proposer une solution ?
(dans le cas contraire je supprimerai purement et simplement cette propriété "height. voila, na d'abord.)

Publié : ven. mars 30, 2007 3:21 pm
par Ayale
Je suis encore débutante en CSS, mais as-tu essayé d'inclure une propriété de positionnement pour ton pied de page (type: position, bottom ou z-index)?

Publié : ven. mars 30, 2007 3:55 pm
par Adreqi
z-index est un indicateur de positionnement par rapport au fond de la page (comme des calques dans Gimp)

quand à position, je viens d'essayer, mais c'est par rapport au bas de la page non par rapport au contenu, du coup, ça se met dessus XD

mais je viens de trouver une solution qui fonctionne :
au lieu de mettre height au div qui est au-dessus j'ai mis "min-height"

par contre dans la doc ou je l'ai trouvé il n'est nulle part précisé que c'était compatible avec IE...

Publié : ven. mars 30, 2007 4:50 pm
par Ayale
ça à l'air de fonctionner sous IE 7.0.5730.11 (enfin, si tu l'as déjà installé :l0l: )
Comme quoi, je suis vraiment débutante ;)

Publié : ven. mars 30, 2007 4:58 pm
par Adreqi
merci de la réponse :) non je l'ai pas installé vu que je suis a la fac sous fedora, et j'ai que firefox pour tester tout ça...

dès que je peux j'essaye sous IE6 parce que il est encore trop répandu pour être ignoré et c'est LUI qui pose problème :P

Publié : ven. mars 30, 2007 5:10 pm
par cuak
exactement

si tu veut envoie moi les fichier source enfin uploade les ici : http://cuak.free.fr et file moi le lien. Je corrigerai ton probleme.

PS: inclut un fichier texte expliquant bien stp.

Publié : ven. mars 30, 2007 5:28 pm
par Flamme
J'ai dû avoir le même problème sur la vesrion précédente de GA, que j'ai résolu en introduisant dans une div supplémentaire tout ce qui ne devait pas interférer avec le pieds de page...

Publié : ven. mars 30, 2007 5:35 pm
par cuak
perso je pense que c'est un probleme de taille un oublie de specification de hauteur. Mais j'attend le fichier.

Publié : sam. mars 31, 2007 12:31 pm
par Adreqi
Ce ne sera pas nécessaire ça marche :) (sous firefox en tout cas)

je suis en train d'installer IEs4Linux pour avoir IE6 sur linux (et le 5 aussi) je verrai de cette façon si ça marche aussi sous IE6

les versions antérieures ne gérant de toutes façon pas correctement le css je ne m'attarderai pas dessus (je sais c'est mal XD)

Edit : les tests sont concluants, IE6 supporte min-height d'une manière très simple : il l'ignore superbement ! l'affichage qui en résulte n'est pas celui attendu avec firefox mais il en reste quand même correct.

quant à IE5, le css n'est pas vraiment sa tasse de thé mais le site reste malgré tout lisible, j'en suis heureux :)

merci pour vos aides-commentaires etc :)

flamme : j'envisageais l'ajout de div comme une solution ultime, car mon site étant multi-styles, il me fallait éviter la modification des pages html au maximum sous peine de devoir réécrire tous les css XD

Publié : jeu. mai 17, 2007 6:57 pm
par piouPiouM
Pour commencer ajoute un conteneur global, par exemple #page :

Code : Tout sélectionner

<body>
    <div id="page">
        <div id="en_tete" />
        <div id="contenu" />
        <div id="piedpage">
    </div>
</body>
Ensuite applique les propriétées CSS suivantes :

Code : Tout sélectionner

html, body {
  height: 100%;
}

#page {
  position: relative;
  min-height: 100%;
}

#contenu {
  overflow: auto;
}

#piedpage {
  position: absolute;
  bottom: 0;
  left: 0;
}

/* Pour IE 6 et moins, qui gèrent mal min-height */
* html #page {
  height: 100%;
}
Il te suffira ensuite de gérer les largeurs des blocs ainsi que les histoires de marges internes et externes :)

Publié : ven. mai 18, 2007 1:07 pm
par Adreqi
oula je suis pas trop sur mon site en ce moment mais je tenterai ça dès que j'aurai le temps et le courage de m'y atteler :) merci beaucoup ^^