28220 sujets

CSS et mise en forme, CSS3

[Résolu] Utiliser des images bordures d'un cadre

J'ai essayé de trouver une solution à mon problème sur différents sites (alsacreations, openweb, etc...), mais je ne trouve rien à ce sujet.

Dans une mise en page que je suis en train de faire pour un forum, je cherche à faire un cadre avec des images en bordures verticales.

Si je simplifie mon code, pour ne vous mettre que ce qui concerne mon problème, ça marche bien sous Firefox 1.0.7 :

http://img518.imageshack.us/img518/4301/sanstitre101ba.png

Par contre, ça n'est pas le cas sous IE 6 :

http://img518.imageshack.us/img518/5511/sanstitre110sp.png

Ma page simplifié ressemble à ça :

<style type="text/css">
<!--
body { background-image: url(images/ext-traits.png); margin: 0px; }

.fond-cadre { position: absolute; top:25px; left: 10%; width: 80%; }
.fond-cadre-bottom { height: 25px; }

.fond-cadre-corps { position: relative; top:0; left: 0; width: 100%; background-image: url(images/bord_int_2.png); }
.fond-cadre-corps-gauche, .fond-cadre-corps-droite { background-repeat: repeat-y; }
.fond-cadre-corps-gauche { background-image: url(images/bord_ext_6.png);  }
.fond-cadre-corps-droite { background-position:right; background-image: url(images/bord_ext_7.png); }
.fond-cadre-corps-contenu { padding: 0 7px 0 6px; }
-->
</style>
</head>

<body>
  <div class="fond-cadre">
    <div class="fond-cadre-corps">
      <div class="fond-cadre-corps-gauche">
		<div class="fond-cadre-corps-droite">
		  <div class="fond-cadre-corps-contenu">
	  		Du texte pour le test<br />
	  		Du texte pour le test<br />
	  		Du texte pour le test<br />
	  		Du texte pour le test<br />
	  		Du texte pour le test<br />
	  		Du texte pour le test<br />
		  </div>
		</div>
	  </div>
    </div>
    <div class="fond-cadre-bottom"></div>
  </div>
</body>


Avec les images :
http://img518.imageshack.us/img518/5630/exttraits5wd.png 1*4px -> body { background-image: url(images/ext-traits.png); }
http://img518.imageshack.us/img518/5452/bordint25hq.png 1*4px -> .fond-cadre-corps { background-image: url(images/bord_int_2.png); }
http://img518.imageshack.us/img518/9833/bordext60hq.png 6*4px -> .fond-cadre-corps-gauche { background-image: url(images/bord_ext_6.png); }
http://img518.imageshack.us/img518/5484/bordext78vp.png 7*4px -> .fond-cadre-corps-droite { background-image: url(images/bord_ext_7.png); }
Oui, je sais , elles ne sont pas grandes. Smiley rolleyes

En cherchant à isoler le cadre qui me pose soucis, j me suis rendu compte que IE refuse d'afficher des background-image ou background-color pour .fond-cadre-corps-droite et .fond-cadre-corps-contenu. J'ai même essayer de mettre une valeur de padding, margin et border pour ces 2 class. Mais ça ne change rien à l'affichage.

J'ai essayé d'imaginer une autre solution pour mon cadre. Mis je ne vois pas comment faire en gardant des images pas trop lourdes et en permettant la répétitions verticale de mes images-bordures.

Auriez-vous des pistes de solution pour ce problème ?

Smiley smile
Modifié par 7am (06 Dec 2005 - 01:19)
Bonsoir.
J'ai remarqué que plusieurs navigateurs avaient "du mal" avec l'indication "background-image:", On peut résoudre ce problème en indiquant simplement "background:".
Bonjour,

Différentes combinaisons de propriétés CSS peuvent déclencher dans IE un bug menant à la disparition des background. Pour t'en dire plus, il faudrait l'url de ta page.

La propriété background-image, en revanche, n'est pas a priori problématique : Aureance, pourrais-tu préciser de quels navigateurs il s'agissait ?
Voilà, j'ai mis ma page simplifié sur mon ftp ici

Sinon, ce bug ne concerne pas seulement "background-image", car j'ai aussi fait le test avec "background-color" et ça m'a donné les mêmes résultats. Smiley ohwell

Sinon, s'il y a un bug d'IE concernant différentes combinaisons de propriétés CSS, comment faire autrement pour avoir des images qui se répètent pour faire des barres de cadres verticales ?
Modifié par 7am (29 Nov 2005 - 12:48)
Bonjour,

Rapidement : c'est un problème de haslayout, à régler avec l'ajout d'une CSS en commentaires conditionnels (voir FAQ du forum) pour IE5.5 et 6.0 contenant :
.fond-cadre-corps-droite {
zoom: 1;
}


Si le rendu dans IE5.0 est également important, remplacer par un height: 1% mais vérifier d'éventuels effets de bords dans IE en fonction de la CSS complète.

Pour le pourquoi du comment, chercher à partir de http://test.blog-and-blues.org/haslayout
Smiley biggrin Super ! Ca marche !

Merci beaucoup pour ton aide. Je vais essayer d'approfondir ces histoires de haslayout, histoire de comprendre. En tout cas, tu m'aura vraiment bien dépanné. Un peu plus et je revenais à une mise en page avec des tableaux ! Smiley langue

Vu que je suis tout newbie sur ce forum, n'hésitez pas à me dire si je dois faire un truc pour clore le sujet en dehors de rajouter une balise [Résolu]

Smiley cligne
Smiley decu J'enlève ma balise [résolu] car ça m'a fait me rendre compte d'autres problèmes :

Ma page : http://7am.free.fr/test/test28.html
(je ne poste pas le code, parce que ça risque d'être un peu long, mais je le ferais s'il y a besoin)

Sous Firefox : nickel
http://img203.imageshack.us/img203/5036/decalff3fl.png

Sous IE : 2 décalages
http://img203.imageshack.us/img203/58/decalie6em.png

1° décalage : le cadre en haut à droite qui se décale d'1 pixel de façon aléatoire quand on la redimensionne. Il donne l'impression d'être présent ou non à 1 pixel près de largeur de fenêtre.
.fond-cadre-tete-droite {
    position: absolute; 
    height: 222px; 
    width: 9px; 
    right:0px; 
    background-image: url(images/fond-cadre-3.png); 
    background-repeat: 
    no-repeat; 
    z-index: 1; 
    zoom: 1;  
}


2° décalage : la barre horizontale (grise) qui est dans un conteneur avec un margin afin qu'elle ne dépasse pas sous les autres éléments (coin arondi et barre jaune) en float left et right et dont les ectrémitées sont transparentes (c'est nécessaire). Sous IE il y a un décalage de 3px entre son affichage (elle est sencé dépasser sous les float) et ces autres boites.
.maintitle { 
    height: 23px; 
    margin: 0 15px 0 57px; 
}
.maintitle-milieu { 
    height: 23px; 
    background-image: url(images/barre_haut_4.gif); 
    background-repeat: 
    repeat-x; 
}

En faisant une recherche, j'ai entendu parler du bug "IE Three Pixel Text-Jog" mais je ne sais pas comment appliquer la soultion à mon cas. Smiley ohwell

Sauriez vous me dire comment éviter ces bugs ?
Modifié par 7am (02 Dec 2005 - 03:06)
Bonjour,

Le bug du Three pixels jogs ne peut pas être évité. C'est à dire qu'on ne peut pas empêcher l'apparition de l'espace de 3 pixels. On peut cependant souvent le gérer pour les cacher.

Pour cela, utiliser une position relative décalant le bloc en flux de 3 pixels vers la gauche... et continuer pour autant que blocs que nécessaire, car les 3 pixels ne font que se déplacer dans la mise en page, jusqu'à ce qu'ils soient repoussés là où on ne les remarque plus Smiley cligne

Pour le premier bug, pas de solution a priori. C'est un problème de reflow, où ce qui apparaît à l'écran est un "oubli" d'IE qui aurait dû le repeindre avec l'arrière-plan. Ce bug ne se produisant qu'au redimensionnement et n'étant pas obstructif, la conclusion est : rester Zen et lâcher prise.

Cela dit, une page de type, uniquement orientée vers un rendu CSS très "graphique vectoriel", appuyée sur un échaffaudage très précis de position et de flottants... sera toujours fragile. Il suffit que les conditions de rendu côté utilisateur diffèrent un peu de ce qui est prévu pour que les défauts apparaissent. Exemple : mauvaise gestion du pseudo-titre de gestion si l'utilisateur agrandit la taille des caractères (les jambages inférieures du texte débordent, puis ça continue à s'agraver).

Ce design est en fait une page SVG, pas XHTML-CSS.

Conclusion : accepter un rendu parfois médiocre, ou revoir le design pour le rendre indépendant du résultat au pixel près. Un design XHTML CSS "professionnel" (terme idiot) est un design où 3 pixels de différence d'un navigateur à l'autre ne font pas de différence Smiley cligne
Modifié par Laurent Denis (02 Dec 2005 - 13:27)
matgorb a écrit :
« bagnère » c'est pour bannière ? Ça m'a fait froid dans le dos !

Smiley biggrin C'est clair je suis très dysorthographique. Ca n'est pourtant pas faute de faire des efforts. Smiley cligne

Laurent Denis a écrit :
Bonjour,

Le bug du Three pixels jogs ne peut pas être évité. C'est à dire qu'on ne peut pas empêcher l'apparition de l'espace de 3 pixels. On peut cependant souvent le gérer pour les cacher.

Pour cela, utiliser une position relative décalant le bloc en flux de 3 pixels vers la gauche... et continuer pour autant que blocs que nécessaire, car les 3 pixels ne font que se déplacer dans la mise en page, jusqu'à ce qu'ils soient repoussés là où on ne les remarque plus Smiley cligne

Pour le premier bug, pas de solution a priori. C'est un problème de reflow, où ce qui apparaît à l'écran est un "oubli" d'IE qui aurait dû le repeindre avec l'arrière-plan. Ce bug ne se produisant qu'au redimensionnement et n'étant pas obstructif, la conclusion est : rester Zen et lâcher prise.

Cela dit, une page de type, uniquement orientée vers un rendu CSS très "graphique vectoriel", appuyée sur un échaffaudage très précis de position et de flottants... sera toujours fragile. Il suffit que les conditions de rendu côté utilisateur diffèrent un peu de ce qui est prévu pour que les défauts apparaissent. Exemple : mauvaise gestion du pseudo-titre de gestion si l'utilisateur agrandit la taille des caractères (les jambages inférieures du texte débordent, puis ça continue à s'agraver).

Ce design est en fait une page SVG, pas XHTML-CSS.

Conclusion : accepter un rendu parfois médiocre, ou revoir le design pour le rendre indépendant du résultat au pixel près. Un design XHTML CSS "professionnel" (terme idiot) est un design où 3 pixels de différence d'un navigateur à l'autre ne font pas de différence Smiley cligne

Pour le 1° bug, je l'ai résolu en mettant ce div en float left à la place de position: absolute. Je pensais avoir déjà essayer, mais il semblerait que non parce que ça marche très bien.

Pour le 2° bug (Three pixels jogs), j'ai essayé de suivre tes indications, mais je pense que je n'ai pas du bien comprendre car j'arrive des résultats encore pire.

De plus je viens de découvrir un autre bug dans ma mise en page (lorsque je mets l'image qui va servir de banière, elle déborde du cadre et je ne parviens pas à faire en sorte qu'il se dimensionne à cette taille minimale) et je suis sur de ne pas avoir fini d'en découvrir pleins d'autres. Smiley decu

Je pense que je vais laisser tomber. Je ne suis pas webdesigner. J'avais été formé au webdesign à l'époque où les mises en pages se fesaient encore avec des tableaux. Je suis arrivé ici en cherchant une solution à un bug d'IE où certaines lignes étaient trop hautes. J'ai trouvé la solution à mon problème mais j'ai aussi découvert cette nouvelle façon de faire ses mises en page sans tableaux. Je me suis laissé convaincre. J'y ait passé beaucoup de temps. Mais maintenant, ce temps dure trop. Je n'arrive pas à avancer. Il y a trop de bug d'IE sur lesquels je passe trop de temps à essayer de les contourner. J'en arrive à la conclusion que cette technique de mise en page sans tableau n'est pas encore suffisement au point (ou du moins que IE l'accepte trop mal) et que ça demande trop de connaissnces sur le sujet pour que la technique se contente d'être au service de la créativité. Ne pas avoir de solutions pour des encadrements un peu travaillés et devoir faire attention à ce qu'une mise en page ne sois pas à "3 pixels près", ça n'est pas ma conception de l'infographie. Ca m'a intéressé et j'approfondirai, mais sur le coup, ça n'est plus gèrable. Smiley decu

Merci à ceux qui auront essayé de m'aider. Je remets la balise [résolu] vu qu'il y a une réponse à mes 2 premières questions.

Smiley cligne
Modifié par 7am (06 Dec 2005 - 01:25)
Mince, j'ai voulu éditer pour corriger une faute d'orthographe et je me suis trompé ça a créer un nouveau post que je ne peux supprimer. Smiley biggrin
Modifié par 7am (06 Dec 2005 - 01:23)
Sujet clos
Aller à