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

Adreqi · Message par **Adreqi** » 30 mars 2007, 15:03

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.)

Ayale · Message par **Ayale** » 30 mars 2007, 15:21

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)?

Adreqi · Message par **Adreqi** » 30 mars 2007, 15:55

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...

Ayale · Message par **Ayale** » 30 mars 2007, 16:50

ça à l'air de fonctionner sous IE 7.0.5730.11 (enfin, si tu l'as déjà installé

)
Comme quoi, je suis vraiment débutante

Adreqi · Message par **Adreqi** » 30 mars 2007, 16:58

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

cuak · Message par **cuak** » 30 mars 2007, 17:10

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.

Message par **Flamme** » 30 mars 2007, 17:28

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...

cuak · Message par **cuak** » 30 mars 2007, 17:35

perso je pense que c'est un probleme de taille un oublie de specification de hauteur. Mais j'attend le fichier.

Adreqi · Message par **Adreqi** » 31 mars 2007, 12:31

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

piouPiouM · Message par **piouPiouM** » 17 mai 2007, 18:57

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

Adreqi · Message par **Adreqi** » 18 mai 2007, 13:07

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 ^^