Cadre arrondi étirable : trait blanc entre les div

Bonsoir,

Voilà, cela fait quelques semaines que je regarde les tutoriels, les sites d'information concernant les CSS et je me suis dit qu'il fallait me lancer. J'ai donc créé l'interface générale de mon site et je m'attaque maintenant à la partie XHTML / CSS.
Mon interface est constituée d'un cadre étirable arrondi (aussi bien en haut, qu'en bas). Pour réaliser le haut, j'ai procédé de la façon suivante (mon image a été créée avec une largeur de 2520px ... pour ceux qui auraient un écran 30" ) ; j'ai créé un "conteneur" dans lequel j'ai placé de 2 div avec une largeur de 50% chacun :
- pour ma partie CSS :

#header-gauche {
	float: left;
	background-image: url(haut_gauche_1.png);
	background-repeat: no-repeat;
	height: 66px;
        width:50%;
	margin: 0px;
	padding: 0px;
}

#header-droit {
	float: right;
	background-image: url(haut_droit_1.png);
	background-repeat: no-repeat;
	height: 66px;
        width:50%;
	background-position: right;
	margin: 0px;
	padding: 0px;
}

#header {
	width: 96%;
	height: 66px;
}

et pour ma partie HTML :

    <div id="header">
      <div id="header-gauche"></div>
      <div id="header-droit"></div>
    </div>

Tout s'affiche bien, le redimensionnement fonctionne correctement ; par contre, quand je réduis ou agrandis la fenêtre de mon navigateur, j'ai parfois un trait blanc qui apparaît au milieu (je précise que ce trait n'apparaît pas tout le temps).



Avez-vous une idée ? Merci pour votre aide.

Philippe.

Je ne sais pas d'où vient le trait blanc. Peut-être d'un problème avec le recalcul de la largeur de chacun de tes deux éléments (tous deux à 50% de la largeur du conteneur). Est-ce qu'il persite, ou bien est-ce que c'est temporaire ?

S'il ne persiste pas, ce n'est pas bien grave.
Songe aussi au fait qu'à part les développeurs, pas grand monde ne passe son temps à redimmensionner la fenêtre du navigateur

Par contre tu peux éviter ce problème ET améliorer ton code :
Si ton image de fond est bien régulière mis à part les arrondis sur les côtés, tu peux utiliser une image de quelques pixels de large et de 66px de haut, répétée dans la sens de la largeur (repeat-x), et appliquée au conteneur (#header).

Ensuite, pour chacun des deux blocs enfants de #header, tu te contente d'une petite image correspondant au dessin de l'arrondi. Bien entendu, pas de couleur de fond (ou bien transparent).
Au final, tu gagnes en poids d'image, et tu évites ton problème de "trou blanc".

EDIT: cf un exemple de bloc étirable qui utilise ce principe :
– en vertical : http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html
– dans tous les sens : http://web.covertprestige.info/test/06-page-fluide-avec-bordures-en-html-et-css.html
Modifié par mpop (26 Apr 2006 - 23:38)

Merci mpop pour ta réponse. En fait le problème de trait blanc est très aléatoire : sous Safari, il apparaît souvent (même lors du premier affichage) alors que sous Camino, ça n'apparaît que très rarement.

J'ai bien regardé les sites que tu m'avais mis en attachement et j'ai étudié le conseil que tu me proposes. C'est vrai que mettre une image dans le bloc #header serait impeccable ; le problème est que mes bords arrondis ont les coins supérieurs transparents ... cela signifie qu'on verrait au travers l'image contenue dans #header non ?

Sinon, est-ce qu'il serait possible de faire 3 blocs dans #header : un situé à gauche et un à droite avec une largeur fixe de 60px sur 66px de hauteur et un bloc central qui varierait pour combler tout le vide qu'il y a entre ?

Merci.

Philippe

skimpy a écrit :
le problème est que mes bords arrondis ont les coins supérieurs transparents ... cela signifie qu'on verrait au travers l'image contenue dans #header non ?

À priori oui. Tu ne peux pas mettre ces images sur fond opaque ? Tu as un motif particulier comme fond de page ?

skimpy a écrit :
Sinon, est-ce qu'il serait possible de faire 3 blocs dans #header : un situé à gauche et un à droite avec une largeur fixe de 60px sur 66px de hauteur et un bloc central qui varierait pour combler tout le vide qu'il y a entre ?

Oui, c'est tout à fait jouable.
Premier bloc de largeur 60px et de hauteur 66px, en float: left;
Deuxième bloc, même dimmensions, en float: right;
Troisième bloc, sans largeur fixe mais en height:100% si besoin, et avec margin: 0 60px.

Mais on risque de retrouver ce problème de ligne blanche, cette fois à deux endroits différents… quoique, avec des dimmensions en pixels il se pourait que le calcul soit plus facile pour les navigateurs qu'avec des pourcentages.
Modifié par mpop (27 Apr 2006 - 11:06)

Oui mpop, il y a en effet un fond d'écran à motif et c'est la raison pour laquelle je ne peux pas mettre une couleur unie.
Cependant, j'ai essayé avec 3 calques et en mettant les paramètres que tu m'avais donnés (j'ai juste modifié margin comme il le fallait) : sous Safari, Camino, Firefox, c'est impeccable ! Pas de trait blanc ! Par contre IE m'affiche un espace entre les blocs ... c'est un bogue connu d'IE ?

Merci.

skimpy a écrit :
Par contre IE m'affiche un espace entre les blocs ... c'est un bogue connu d'IE ?

Là comme ça je ne sais pas. Peut-être une histoire de 3 pixel jog (si l'espace entre les blocs fait 3px de large…). Tu aurais une page en ligne pour qu'on voie ce que ça donne ?

Oui c'est exactement ça : 3px entre chaque DIV. Je n'ai malheureusement pas de page en ligne mais voici une capture d'écran :



Merci.

skimpy a écrit :
Oui c'est exactement ça : 3px entre chaque DIV.

Alors ça semble bien être du Three Pixel Jog :
http://www.test.blog-and-blues.org/haslayout/tests/float6.html

Ah oui d'accord, vu que le bloc du milieu (qui est logiquement placé en troisième dans le code) dispose d'une hauteur fixe (66px), il est doté du layout dans IE Win, ce qui rend le Three Pixel Jog encore plus visible en décalant carrément le bloc.

Il y aurait un moyen de faire sans cette hauteur fixe ? (note : une hauteur fixe à 100% posera le même problème, donc ce n'est pas une solution).

En fait, j'ai fixé la hauteur du bloc central à 100% mais le problème est bien présent. Quand je supprime le paramètre height, les blocs sont collés ... par contre niveau hauteur, il ne m'affiche qu'une partie de l'image en haut.



Sans hauteur fixe, je ne vois pas. J'essaie de faire la même chose que l'entête du forum de discussion d'Apple : http://discussions.apple.com/index.jspa . J'ai regardé le code mais ils utilisent des div dans des tables et il y a seulement 2 images.
Modifié par skimpy (27 Apr 2006 - 17:16)

skimpy a écrit :
En fait, j'ai fixé la hauteur du bloc central à 100% mais le problème est bien présent. Quand je supprime le paramètre height, les blocs sont collés ... par contre niveau hauteur, il ne m'affiche qu'une partie de l'image en haut.

Qu'est-ce que tu as comme contenu à l'intérieur du bloc central ? Si tu n'as qu'un ou deux éléments, tu peux jouer sur leur hauteur pour obtenir une hauteur totale de 66px. Sans avoir besoin de la préciser pour le bloc central lui-même.

Tous les blocs sont vides ... et je pense qu'ils ne contiendront jamais un élément. Il faudrait donc que je définisse à l'intérieur quelque chose qui fait 66px de haut c'est ça ? (par exemple une image de 1px sur 66 transparente que j'insèrerai dans le bloc central)

J'ai ajouté une image de 1px par 66px et ça fonctionne ... IE l'interprète bien ! Est-ce que vous pensez qu'il y a d'autres solutions plus "propres" ?

Merci encore pour votre aide.

skimpy a écrit :
J'ai ajouté une image de 1px par 66px et ça fonctionne ... IE l'interprète bien ! Est-ce que vous pensez qu'il y a d'autres solutions plus "propres" ?

À tout prendre, un div de cette hauteur fera aussi bien l'affaire sans te rendre tributaire du bon chargement de l'image.
Sinon j'aurais bien conseillé un hr, mais la gestion des hr est assez buguée avec les divers navigateurs.

Si je puis me permettre : si les trois blocs sont vides, pourquoi donc sont-ils là ?
Et pourquoi ne pas avoir utilisé juste deux blocs imbriqués, comme sur les exemples donnés ?

Enfin si c'est pour une zone de titre, autant mettre comme contenu (dans le deuxième bloc, celui qui sera à l'intérieur du premier) le titre du site, quitte à le cacher d'une manière ou d'une autre.
Cf à ce sujet :
http://forum.alsacreations.com/topic-6-13599-1-Accessibilit-dun-menu-en-image-petits-trucs.html
Modifié par mpop (27 Apr 2006 - 23:44)

Bonjour mpop,

J'ai préféré faire 3 cadres en prévision d'un besoin futur (dans le cas où un jour je souhaiterais ajouter quelque chose dedans ... comme ça, tout serait prêt).

Par contre, je ne comprends pas le div dans le div ; ce que tu me proposes, par exemple, c'est d'utiliser une image nommée gauche (qui représente le coin arrondi gauche avec le prolongement du haut du cadre) qui ferait 2500px * 66px de hauteur que je mets en background dans mon 1er bloc (en float left) et dans un 2ème bloc (en float right), mettre en background le coin supérieur droit ? Le problème est que mes coins sont transparents. Si je fais ça, l'image droite se superpose mais par transparence, on voit l'image de gauche. Dans les exemples que j'ai vus, tous les coins supérieurs ont une couleur d'arrière-plan donc le problème ne se pose pas.

Débutant en CSS, je ne sais pas si j'interprète bien ce que tu me dis.

Merci.

skimpy a écrit :
Le problème est que mes coins sont transparents. Si je fais ça, l'image droite se superpose mais par transparence, on voit l'image de gauche. Dans les exemples que j'ai vus, tous les coins supérieurs ont une couleur d'arrière-plan donc le problème ne se pose pas.

Oui, effectivement, du coup ça ne colle pas.
Bon ben tant pis, du coup tu restes avec la solution des trois blocs + un élément dans le bloc du milieur pour la hauteur.
Sinon, si tu veux te passer de l'élément dans le bloc du milieu, tu peux aussi positionner tes deux blocs des côtés en absolu (l'un aligné à gauche, l'autre à droite), tout en mettant le conteneur en relatif. Du coup, plus de Three Pixel Jog. Il suffit alors de bien mettre les deux marges sur le bloc central.

Merci beaucoup pour ton aide mpop, j'ai fait avec tes derniers conseils et ça marche sans problème !