[Résolu] Le background ne suit pas

Salut tout le monde,
j'ai à peu près fini ma mise en page mais il me reste pas mal de problèmes.

Mon background principal, celui contenu dans le bloc "conteneur" ne descend pas du tout

Autre problème, j'ai fais un border-top pour faire un trait de séparation noir de 2 pixel entre le bas du menu et le reste de la page, mais le hic c'est qu'il ne va pas jusqu'à droite, c'est à dire que sur la droite il s'aligne avec le côté droit du header et non pas la grosse bordure noir du bloc conteneur (quand il descend).
Dernier problème : je n'arrive pas à centrer mon footer

Vous pouvez voir grandeur nature ce que ça donne ici et la css se trouve par là.

Merci d'avance
Modifié par koskoz (05 Mar 2007 - 17:27)

Bonjour,

Les flottants, par défaut, sortent du flux de leur conteneur. L'image de fond de ton conteneur principal prend bien toute la hauteur de ce conteneur. C'est juste que ce conteneur a une hauteur ridicule, car tous ses enfants sont flottants.

Sinon, j'ai croisé quinze float: left|right dans ta feuille de style. Quelque chose me dit que c'est un peu trop.

Ah oui, et les blocs de hauteur fixe pour le contenu (genre petit encadré de 108px de haut) vont donner un résultat catastrophique.

Et enfin : la technique de remplacement d'images qui place des contenus textuels via des images de fond en CSS est à bannir. D'autant plus que celle que tu as choisie (utilisation de display: none sur des span contenenant le texte HTML à cacher) est la moins accessible de toutes.

Utiliser des images de contenu :

<img src="monimage.jpg" alt="Alternative textuelle pertinente" />

Je pense en particulier :
- à l'image d'en-tête (logo) ;
- aux sept images du menu de navigation ;
- aux sept images des différentes rubriques de la page.
Par ailleurs, je signale en passant que le texte aussi petit (dans les images du menu et des titres de rubrique) c'est très peu lisible.


Pour finir, au sujet de l'abus caractérisé de flottants et de hauteurs fixes : utiliser des tableaux. Un tableau à quatre cellules pour les blocs de rubrique, et un tableau à trois cellules pour le pied de page.
Et non, les tableaux c'est pas le mal.
Par contre, une liste ul avec des liens contenant des images (avec alternatives textuelles pertinentes, toujours) fera très bien l'affaire pour le menu.

Salut,
le truc c'est que si je ne met pas de float: left; pour mes blocs aligné à l'horizontal ils ne le seront justement plus.

Pour la hauteur fixe, je la laisse comme ça car c'est comme cela que ces blocs doivent être et ça ne me pause pas de problème pour gérer.

Pour ce qui est de l'utilisation d'images de contenu ça m'embete au plus haut point sachant que ma technique de remplacement d'image remplace justement des images qui appartiennent au design et non pas au contenu.

Si on désactive la CSS on voit bien le titre de la section et de plus on voit que c'est un titre.

Pour ce qui est du menu, là encore si quelqu'un veut faire une seconde css il n'aura qu'à toucher à la css puisque dans ce menu il n'y aura pas d'images mais que du texte.

Sinon, je trouve aussi qu'il y a beaucoup trop de float, mais je ne vois pas comment faire autrement en fait

Merci

koskoz a écrit :
Sinon, je trouve aussi qu'il y a beaucoup trop de float, mais je ne vois pas comment faire autrement en fait

Tableau au milieu, tableau pour le pied de page.
li en display: inline pour le menu horizontal.

Nombre de flottants nécessaires pour réaliser cette mise en page : zéro.

koskoz a écrit :
Pour ce qui est de l'utilisation d'images de contenu ça m'embete au plus haut point sachant que ma technique de remplacement d'image remplace justement des images qui appartiennent au design et non pas au contenu.

Une image qui porte une information textuelle, ça n'est pas de la décoration, même si effectivement l'information textuelle en question peut être mise en forme de façon décorative/design/etc. Si l'information textuelle est importante, il est préférable que les utilisateurs y aient accès. Et la méthode la plus fiable pour cela est d'utiliser une image (balise <img>) avec alternative textuelle.

Bon, merci de ton aide, mais j'ai rusé et j'ai utilisé un spacer tout en bas de ma page.

Par contre, mon menu si je le passe en inline, ça casse tout dans mes souvenirs.