Problème d'héritage dans une feuille de style

[Leonick]

Bonjour,
J'ai un problème sur cette page.
http://www.df-informatique.com/photos-irlande/irlande
Malgré le fait qu'elle soit valide xhtml strict (comme en html normal ça ne fonctionnait pas je l'ai passée en xhtml) et valide css, je n'arrive pas à obtenir ce que je veux.
Je sais, les couleurs ne sont pas top mais ça me permet de vérifier plus facilement l'héritage.
Je voudrais obtenir :
des cadres fushia surmontés d'un h1 jaune et contenus dans un cadre rouge, lui-même contenu dans un body (blanc), lui même contenu dans le html (bleu).
Or je n'obtiens ça ni avec FF, ni IE ni Opera.

 

[leffroyable]

J'ai déjà essayé de mettre des attribus de fond dans la balise html, mais ça n'a pas marché.
Il vaut mieux utiliser la balise body en bleu, et faire une balise "#page" par exemple pour le blanc.

Je ne sais pas s'il existe un moyen pour utiliser la balise html correctement

 

[Leonick]

Je sais que selon les navigateurs, certains reconnaissent html, d'autres body et d'autres les 2, d'où quelques confusions avec les fonds.
Mais là, le gros problème vient surtout du div center (rouge) qui contient les
tablo_cadre et donc autour de ces cadres, cela devrait être rouge. :cry:

 

[leffroyable]

je crois que le problème est lié au fait que les tablo_cadre sont en float: left
tu as certes rajouté les caption avec clear: both mais en les mettant dans des span, je pense que ça ne peut pas marcher, il faudrait utiliser des div plutôt que span

 

[Leonick]

je crois que le problème est lié au fait que les tablo_cadre sont en float: left

Visiblement oui, je viens de faire des tests en local et en enlevant float: left, le fond rouge se met bien derrière toutes les photos, par contre 1 seul cadre se trouve par ligne
Si je mets un display:inline, ça ne change rien

tu as certes rajouté les caption avec clear: both mais en les mettant dans des span, je pense que ça ne peut pas marcher, il faudrait utiliser des div plutôt que span

Non, je viens de tester, ça ne change rien.

 

[leffroyable]

juste avant de fermer la balise div center, il faut ajouter ce bloc :
<div class="spacer">&nbsp;</div>
en le définissant comme ça dans le css :
.spacer{
clear: both;
height: 0;
}

ça devrait marcher

 

[Leonick]

Nickel, ça marche.
Merci
Bon, j'aurais voulu le faire sans hack (surtout pour FF), mais bon :wink:
Initialement, j'avais un <p /> à la fin du div, mais ça ne le faisait pas.