Pourtant je regarde bien ou je mets les pieds...
Modérateur : Ze Techos
Pourtant je regarde bien ou je mets les pieds...
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.)
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.)
Adreqi
Site Gimp-Attitude : Découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !
Site Gimp-Attitude : Découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !
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...
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...
Adreqi
Site Gimp-Attitude : Découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !
Site Gimp-Attitude : Découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !
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

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

Adreqi
Site Gimp-Attitude : Découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !
Site Gimp-Attitude : Découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !
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.
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.
[url=http://gatuto.free.fr][img]http://cuak.free.fr/logo/01.png[/img][/url]
- Flamme
- Super mécano
- Messages : 6624
- Inscription : 20 avr. 2004, 23:33
- Localisation : Vincennes, France
- Contact :
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...
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]
Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !
[b]Webmistress[/b] de :
[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]
Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !
[b]Webmistress[/b] de :
[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]
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

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
Adreqi
Site Gimp-Attitude : Découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !
Site Gimp-Attitude : Découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !
- piouPiouM
- Pro de la Gimp-Attitude
- Messages : 562
- Inscription : 01 août 2005, 12:48
- Localisation : Lyon
- Contact :
Pour commencer ajoute un conteneur global, par exemple #page :
Ensuite applique les propriétées CSS suivantes :
Il te suffira ensuite de gérer les largeurs des blocs ainsi que les histoires de marges internes et externes 
Code : Tout sélectionner
<body>
<div id="page">
<div id="en_tete" />
<div id="contenu" />
<div id="piedpage">
</div>
</body>
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%;
}

[url=http://www.amazon.fr/dp/2744021733/]Découvrez le livre, Gimp : Apprenez, pratiquez, créez ! [color=darkgreen](2ème édition)[/color][/url]
[url=http://gimp4you.eu.org/]Gimp4you[/url], [url=http://gimp4you.eu.org/]tutoriels[/url] pour [url=http://gimp.org/]Gimp[/url] \(^o^)/
[url=http://gimp4you.eu.org/]Gimp4you[/url], [url=http://gimp4you.eu.org/]tutoriels[/url] pour [url=http://gimp.org/]Gimp[/url] \(^o^)/