28172 sujets

CSS et mise en forme, CSS3

Un footer en CSS3 qui me pose quelques problèmes...

Bonjour à tous,

J'ai un peu de mal à placer un footer qui couvrirait toute la largeur du wrapper, soit 920px donc.

Le souci c'est que lorsque je modifie les propriétés de ma div "footer" dans le style.css, je modifie non pas le footer que je souhaitais mettre en fin de page, mais TOUS les footers de la page, ceux des articles inclus donc.
Voilà le lien : http://mamamio.fr/florian/index.php

Comment faire pour parer à cela? Merci à vous tous Smiley smile

Florian
As-tu essayé footer:last-of-type ?
(sinon, je ne sais pas si c'est normal que <!--[if lt IE 9]>..<![endif]--> soit entre </head> et <body> ?)
Alors effectivement, le <!--- [if ... c'est pas normal, ça vient d'être rectifié en local.
Par contre le footer:last-of-type je viens d'essayer et rien n'y fait, ça me fait tout planter : je viens de l'uploader regarde Smiley cligne

[merci pour ton aide en tous cas Smiley smile ]
Je n'ai pas du comprendre quelque chose parce qu'il me semblait bien que :last-of-type ne prenez en compte que le dernier élément du "type" (type étant <footer> ici).

Sinon je dirai body>footer (à priori le dernier <footer> semble être le seul enfant de <body> ?)
Modifié par kenor (12 Nov 2011 - 19:38)
Ah, j'ai tapé last-of-type comme tu avais indiqué, et non pas last-of-child. Je te dis dans un instant si ça marche Smiley cligne
Euh je me mélange, c'est bien last-of-type (et non child)
Modifié par kenor (12 Nov 2011 - 19:37)
D'accord, bon alors alors footer:last-of-type, ça ne fonctionne pas, j'ai de longues barres blanches comme tu peux voir sur le site en ce moment même.

Avec body>footer je n'ai plus les bandes blanches, mais plus aucune, donc le footer ("page générée en..." n'apparait pas au bon endroit ni avec la mise en forme conférée normalement par body>footer ...
En dernier recours, tu y appliques un id ...

<footer id="leBas">

#leBas { ton code css }

Tu auras peut-etre de meilleurs réponses Smiley langue
Oui, j'ai ce que je veux avec cela. Toutefois j'espérais pouvoir faire tout en HTML5 car c'est pour un travail scolaire et ça porte sur le html5 Smiley langue
Mais bon, merci en tous cas, je vais encore chercher mais si je ne trouve rien je ferais appel à une div Smiley langue

Merci encore, et bonsoir à toi Smiley cligne

Florian
C'est à dire ? Le fait d'y ajouter un attribut ne change rien au fait qu'il s'agit de HTML 5
Certes, mais on nous a dit de respecter cette arborescence, et d'utiliser <footer></footer> au lieu d'une div.

Mais je pense pas que le correcteur n'en tiendra rigueur Smiley cligne
Tu peux cibler ton footer avec le sélecteur d'enfants ( > ) par exemple, qui te permettra d'appliquer un style aux enfants directes de l'élément identifié, #wrapper dans ton cas.


#wrapper > footer {
}

Modifié par mob (12 Nov 2011 - 20:53)
Administrateur
kenor a écrit :
Je n'ai pas du comprendre quelque chose parce qu'il me semblait bien que :last-of-type ne prenez en compte que le dernier élément du &quot;type&quot; (type étant &lt;footer&gt; ici).

Si les &gt; vs > plantent, désolé mais c'est pas moi c'est Murphy ou dew

footer:last-of-type ne cible pas le dernier footer du code HTML mais chacun des footer qui sont le dernier footer de leur parent. S'il n'y a jamais 2 footer frères dans le même parent, ça cible en fait tous les footer de la page.
Avec footer:last-child (pas de -of-), ce sont tous les footer qui sont le dernier enfant de leur parent. Autant un div>footer que body>footer ou #wrapper>footer pour peu qu'aucun élément ne les suive dans le même parent (par exemple pas un div.clear).

kenor a écrit :
Sinon je dirai body&gt;footer (à priori le dernier &lt;footer&gt; semble être le seul enfant de &lt;body&gt; ?)

C'est effectivement le bon sélecteur, sauf si un conteneur #wrapper/#page/#content/.inside s'intercale entre body et le footer de la page
Ok merci Felipe pour les précisions, c'est vrai que je lis les docs en anglais, et j'ai un niveau relativement moyen, d'où la difficulté de comprendre les subtilités de certains points sans les avoir testés en profondeur.
Sujet clos
Aller à