Titre: position du footer en CSS
Posté par: Balrog le le 23-09-2004 a 11:17:21
Salut, :)
Je tente de reconstruire mon site en evitant les tableaux lors de la mise en page. Je me suis inspiré des modèles donnés sur alsacréation et tente un tout CSS.
L'architecture est donc la suivante (à l'exception de l'acceuil):
- un header
- une colonne à gauche avec mon sommaire
- une colonne de droite avec le contenue
- un footer.
D'après le modèle d'alsacréation, le footer est poussé vers le bas par la colonne "contenu". Cependant sur certaines pages, le contenu est plus court que le sommaire! Le footer se positionne alors bien en-dessous du contenu, MAIS chevauche une partie du sommaire. ???
Y a-t-il moyen de positionner le footer au plus bas de l'une des deux colonnes (en se positionnant toujours par rapport à la plus basse)?
merci de vos réponses
A+
|
Titre: Re:position du footer en CSS
Posté par: bigornot le le 26-09-2004 a 14:13:01
j'ai déjà eu ça ....
quel navigateur utilise tu ?
peux tu montrer le code ?
|
Titre: Re:position du footer en CSS
Posté par: MarvinLeRouge le le 27-09-2004 a 11:12:25
Salut,
Une solution simple (mais pas forcément optimale) :
tu mets le menu et le contenu dans un div contenant et tu fais que le footer soit poussé non plus par contenu, mais par contenant. |
Titre: Re:position du footer en CSS
Posté par: SIBELIUS le le 27-09-2004 a 11:51:29
Tant que IE ne comprendra pas la propriété display table-cell, il n'y aura jamais de bonne solution (à part des tableaux).
http://blog-and-blues.org/weblog/2004/09/24/304-des-colonnes-de-meme-hauteurs-en-css |
Titre: Re:position du footer en CSS
Posté par: Balrog le le 27-09-2004 a 22:17:11
Salut à vous,
Merci de vos réponses.
Marvin: L'idée du conteneur contenant l'ensemble (les 2 colonnes centrales) me parais le plus facile à mettre en oeuvre. j'essaye demain!
Sibelius: j'ai lu l'article et je vais voir ce que cela donne (demain aussi!)
Bigornot: malgré les réponses, j'ai mis quelques fichiers en ligne si le code t'intéresse toujours (malgré les réponses précédentes)
- http://balrog.9online.fr/fbckform.html
- http://balrog.9online.fr/tarifs.html
- http://balrog.9online.fr/format.html
Il manque les photos. les lignes noires autour de la zone "contenu" et du footer sont volontaires, histoire d'y voir plus clair!
Bonne soirée à tous! |
Titre: Re:position du footer en CSS
Posté par: Balrog le le 08-10-2004 a 10:10:20
Salut,
Au final, j'ai trouvé une solution simple. Il existe une commande CSS qui permet de donner une longueur minimum à un conteneur: min-height:xxx;
Malheureusement, IE ne la prend pas en compte. il suffit alors de la remplacer par la commande "height" qui à l'air de se comporter de façon similaire. Dans mon exemple la taille donnée (dc minimum) sera = à la longueur du sommaire de gauche. Trop simple en fait ;)!
J'ai bataillu mais j'ai vaincu ;D
en espérant que cela puisse servir
A+ |
Titre: Re:position du footer en CSS
Posté par: SIBELIUS le le 08-10-2004 a 10:15:11
Si tu utilises height, ça ne marchera que sur IE qui la comprend comme un min-height.
Voilà comment faire pour explorer : http://www.alsacreations.com/blog/index.php?2004/08/17/54-min-height-sur-internet-explorer |
Titre: Re:position du footer en CSS
Posté par: Balrog le le 08-10-2004 a 10:28:37
Merci,
Mais que se passe-t-il si l'on mets les deux dans le code du CSS (height et min-height)? |
Titre: Re:position du footer en CSS
Posté par: SIBELIUS le le 08-10-2004 a 10:35:23
Merci,
Mais que se passe-t-il si l'on mets les deux dans le code du CSS (height et min-height)?
|
|
Ben si tu n'utilise pas !important ou html>body (comme dans le lien que je t'ai donné) alors height limitera le bloc en hauteur chez tout le monde sauf IE.
Pour les autres navigateurs, height ne doit pas être précisé (ou alors il doit être à "auto") pour que min-height fonctionne. |
Titre: Re:position du footer en CSS
Posté par: Balrog le le 08-10-2004 a 10:46:27
yo,
je viens de lire les info du lien que tu m'as donné, je dois avouer que je ne comprend pas très bien le code
html>body #bloc {
height: auto;
min-height: 5em;
}
d'abord le #: d'hab j'anonce avec un point (.) dans les css.
A la place de bloc, j'imagine que je doit mettre le nom de mon conteneur (centre2).
enfin la syntaxe: html>body. c'est la première fois que je la vois!
voila mon code CSS:
.centre2{
border:solid 1px #000;
padding-top:5px;
padding-right:3px;
margin-left:224px;
margin-top:3px;
height:700px;
}
merci |
Titre: Re:position du footer en CSS
Posté par: SIBELIUS le le 08-10-2004 a 10:58:43
| d'abord le #: d'hab j'anonce avec un point (.) dans les css. |
|
Le point est fait pour désigner une classe. Mais il n'y a pas que les classes, il y'a aussi les id : http://www.alsacreations.com/articles/id_class/
| A la place de bloc, j'imagine que je doit mettre le nom de mon conteneur (centre2). |
|
Tu y mets l'élément qui doit avoir un min-height ;)
| enfin la syntaxe: html>body. c'est la première fois que je la vois! |
|
C'est une syntaxe de sélecteur d'enfant. Elle est tout à fait conforme aux standards et tout le monde la comprend... sauf IE !
En clair, IE ne va carrément pas lire cette ligne. C'est comme si tu mettais un cache sur les yeux d'IE.
Mais je te conseille plutôt d'utiliser la méthode de Talou, plus simple et plus courte :
#bloc {
height: auto !important;
height: 5em;
min-height: 5em;
} |
Titre: Re:position du footer en CSS
Posté par: Balrog le le 08-10-2004 a 11:20:31
Mais je te conseille plutôt d'utiliser la méthode de Talou, plus simple et plus courte :
#bloc {
height: auto !important;
height: 5em;
min-height: 5em;
} |
|
J'imagine donc qu'avec cette solution, il n'est plus necessaire d'ajouter:
html>body #bloc {
height: auto;
min-height: 5em;
}
| C'est une syntaxe de sélecteur d'enfant. Elle est tout à fait conforme aux standards et tout le monde la comprend... sauf IE ! |
|
Dis tout de suite que je suis un débutant! ;). bon t'as un peu raison. je n'avais pas vue de truc lié par > avant c'est tout!
enfin à quoi sert le !important; dans
merci, t'es une vrai mine d'or toi! ;D :-*
|
Titre: Re:position du footer en CSS
Posté par: SIBELIUS le le 08-10-2004 a 11:43:26
| enfin à quoi sert le !important; dans |
|
Il signifie que cette valeur passera avant tout, même si d'autres valeurs sont données ensuite.
http://www.yoyodesign.org/doc/w3c/css2/cascade.html#important-rules |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|