[Résolu] Besoin de conseil (Problème de bordure et de bloc)

Bonjour,

Je travaille présentement sur le site web "Les restos du coeur" pour la région du Haut-Rhin. Le design à été créer par un designer bénévole, et j'ai été chargé de créer le CSS (là encore, en bénévolat). J'ai réussi à me débrouiller assez bien, mais je bute sur deux problèmes dont je n'arrive pas trouver la solution:

1) Sous firefox et Opéra, mon bloc H2 (titre d'une section + background en repeat-y) s'étire en arrière de mes blocs "Actualité" et "En bref". Ce bug disparait dès que mes blocs se placent l'un en dessous de l'autre (taille trop grande ou suppression du float). Tout s'affiche correctement dans Explorer - mais ce n'est pas vraiment une référence...

2) Le positionnement des images! Le site web devrait normalement ressembler à ceci: http://daemonia.free.fr/Sites/restoducoeur/template.jpg (l'image est en basse qualité). Hors je n'arrive pas du tout à placer les images correctements dans le texte! Elles n'ont pas besoin de suivre le texte (comme c'est le cas dans l'image), mais je dois pouvoir placer le div (ou la balise img) au début ou à la fin du texte, puisque les pages seront ensuite modifier par des CMS. J'ai déjà fait pas mal de recherche au niveau des images et du positionnement, mais là, je sèche...

Voici le résultat auquel je suis parvenue jusqu'à présent:
http://daemonia.free.fr/Sites/restoducoeur/resto.htm
et celui que j'essais d'atteindre:
http://daemonia.free.fr/Sites/restoducoeur/template.jpg

Merci d'avance pour vos conseils!
Daemonia
Modifié par Daemonia (14 Feb 2007 - 22:11)

Bonsoir,

À la place du code suivant :

.court {
	width: 46%;
	height: 320px;
	background: #FFFFFF;
	float: left;
}
.large {
	width: 100%;
	display: block;
}

je propose ceci :

.court {
	width: 46%;
	height: 320px;
	background: #FFFFFF;
	float: left;
	margin-bottom: 10px;
}
.large {
	clear: left;
}

Explications :
1. Le problème de rendu principal était causé par les flottants, qui adoptaient un comportement normal dans Firefox et Opera, mais non standard dans Internet Explorer. Un élément flottant, comme son nom l'indique, « flotte » par dessus les blocs, et n'en repousse que le contenu. Ici, le texte du h2 du bloc du bas est repoussé vers le bas, mais le bloc du bas lui même (et le h2, qui est un élément de type bloc) commencent tout en haut, comme si les flottants n'étaient pas là.
Solution : on demande au bloc du bas de passer à la ligne après les flottants, avec la propriété clear (on clear à gauche parce que les flottants flottent à gauche... si besoin, on utilisera un clear: both, mais à priori ça ne sera pas nécessaire).

2. J'ai viré la largeur de 100%, qui agrandit artificiellement les blocs : en effet, la largeur totale prend en compte non seulement la largeur demandée (100% de la largeur de la place disponible dans le conteneur), mais aussi les padding et les bordures du bloc. Quand on supprime le width: 100%, les blocs prennent toute la largeur disponible (c'est le comportement par défaut d'un élément de type bloc), et les bordures et padding sont retranchées et non plus additionnées.


Au passage : on sent quelque part que le graphiste qui a fait cette maquette n'a pas trop l'habitude des contraintes du Web : alignement horizontal parfait (ça, faut le faire sur le Web... ), maquette en 800px de large.

Si je puis tout de même me permettre un conseil pour l'intégration de tout ça ?

En fait je vais m'en permettre deux :
1. Les deux flottants avec leur hauteur fixe de 320px, ça va pas le faire. Si j'agrandis la taille du texte (ou si j'ai une taille de texte par défaut légèrement supérieure à la « normale », ou encore si on a finalement plus de contenu dans un de ces cadres que prévu lors de la mise en place de la feuille de style... bref dans plein de situations différentes), ça déborde, le texte chevauche avec le bloc suivant, c'est la cata. Trois solutions : soit on utilise un tableau à deux cellules (solution à moindre prise de tête, et parfaitement accessible si on fait ça correctement ), soit on garde le système actuel, avec pourquoi pas une hauteur en EM plutôt qu'en pixels, mais en prévoyant un moyen d'avoir accès au contenu si le texte dépasse (petit conseil : overflow: auto), soit enfin on simule des blocs de même hauteur avec la technique dite des colonnes factices. Les première et deuxième solutions sont les plus accessibles.

2. Toutes les images de contenu devraient être... dans le contenu. Franchement, si on n'a pas d'effet de survol à faire, l'utilisation d'images de fond en CSS (et pour faire bonne mesure d'un peu de texte en display: none) n'est même pas utile. De bonnes images HTML bien comme il faut (avec attribut alt dument renseigné), ça ne peut pas faire de mal, si ?
En passant, la technique du display: none utilisée est une catastrophe pour l'accessibilité. Cf. Remplacement d'images : halte au display none !
Et les techniques de masquage de texte alternatives au display:none posent toutes des problèmes d'accessibilité dans certains contextes, même si c'est moins radical. Leur emploi ne se justifie que dans le cas où l'usage d'une image HTML n'est pas compatible avec les besoins exprimés (cas typique : effet de survol à gérer en CSS... mais bon, même ça on peut le faire en Javascript, hein, c'est pas une excuse ).

Merci beaucoup pour tes conseils! Je vais essayer. J'avais penser à la technique des colonnes factices, mais bon... si d'autre solution fonctionnent, tant mieux! Je n'avais pas penser à donner la taille en em... Et j'ai fais remarquer au graphiste qu'il devrait réduire la dimension de sa maquette Il s'agit effectivement de sa première maquette web.

Pour les images de contenu, je pensais les mettre directement dans le document, mais je n'étais pas encore tout à fait décidée. Je vais le faire de ce pas! Et pour les images qui ne servent pas du tout au contenu (genre le photographe, les journaux et tout), vous me conseiller quoi?

Je vous en redonne des nouvelles!
Daemonia

Rebonjour!

La solution suggérer à très bien fonctionnée, et mon problème de fond est maintenant résolu. Par contre, un nouveau problème est apparut: la bordure du dernier bloc ne s'affiche plus entièrement dans explorer! Est-ce que quelqu'un connaitrait la cause de ce bug?... (Et merci encore pour votre aide de la dernière fois!)

Daemonia
Modifié par Daemonia (08 Feb 2007 - 16:40)

Alors... du joli bug d'IE6, bug qui concerne à le fois le bloc qui suit les flottants et celui qui les précède (si on défile vers le bas, puis qu'on remonte, le navigateur ne dessine plus correctement la bordure).

Test à effectuer : est-ce que attribuer un zoom: 1 ou un height: 100% aux deux blocs concernés change quelque chose ?


Sinon, en passant :

.court {
	margin:10px 0px;
}

Ça serait mieux, non ?

Merci! Les deux astuces fonctionnent parfaitement, mais il semblerait que le zoom:1 ne soit pas valide. J'ai aussi changer la syntaxe pour mon style .court, et ça fonctionne... Merci pour cette petite correction et vos réponses rapides!