28220 sujets

CSS et mise en forme, CSS3

[Résolu] Coins arrondis, positionnement et IE

Salut tout le monde,
J'ai mis un certain temps avant de me décider à poster, mais je ne trouve pas de réponse dans les livres, j'ai fouillé un nombre appréciable de sujets déjà postés ici, visité bien des sites sur la question, je n'ai pas réussi à identifier le bobo.

Je me suis lancé dans une refonte majeure de ma page personnelle en suivant les principes de séparation contenu/mise en page que certains connaissent ici Smiley lol et de façon à rendre ma page accessible sinon à tous au moins au maximum humainement possible sans pour autant construire une usine à gaz.

Jusqu'à présent, j'ai réussi à obtenir une maquette qui répond parfaitement au but recherché avec Firefox, quasiment parfaitement avec Opera (7.23) mais, quelle surprise diront quelques facétieux, quelques difficultés surgissent avec IE6.

Je vous expose ici un seul problème (il y en a 2, mais je vais déjà en régler un, on verra après pour l'autre) à savoir un cadre avec des coins ronds autour du contenu principal de ma page. Le problème vient du positionnement. Je n'ai pas réussi à avoir la même chose sur les trois navigateurs mentionnés ayant toujours une différence sur l'un ou l'autre, parfois un décallage de 1px des coins droits (haut et bas), parfois les deux coins inférieus "posés sur la bordure" du bas au lieu de se fondre avec malgré le positionnement avec un bottom négatif du nombre de pixels nécessaire, bref, ça bafouille.

Là, j'en suis arrivé au bon positionnement sous Opera et Firefox. Sous IE6, le coin haut droit est décalé de sa largeur à l'extérieur du cadre et je n'ai aucune idée de l'endroit où sont planqués les coins inférieurs. J'ai essayé de trouver une erreur dans mon code sans succès. Si un(e) courageux (euse) se sent l'âme assez charitable pour jeter un coup d'oeil au résultat et à ma feuille de style

Note: je n'ai pas mis la liste des pages visitées, mais soyez sûrs que j'en ai vu beaucoup, ça fait quatre jours que je suis quasiment à plein temps là-dessus et je ne mettrai pas la liste ici, vous les connaissez mieux que moi.

Note2 : Je ne suis pas infographiste ni graphiste tout court (mon rayon, c'est plutôt le PHP), je n'ai rien contre les critiques sur mon interface.
Modifié par Cyrano (12 Jul 2005 - 15:17)
Oui bien sur que je l'ai lu quoique la page indiquée me montre un titre mais aucun lien pour la suite, mais je la connais et elle est même reprise dans le livre. J'ai visité également les liens indiqués soit dans le livre soit dans divers posts sur le sujet que j'ai trouvé ici, j'ai même vu le générateur qui, malheureusement, ne répond pas à mon problème.

En modifiant certains points, en utilisant des positionnements relatifs au lieu d'absolus (ou l'inverse), j'arrive à uniformiser.... les décallages Smiley confus Parfois, j'ai l'alignement parfait sous IE, mais un décallage dans un sens sous Firefox et... dans l'autre sens sous Opera.
C'est carrément la folie ce truc. Je déteste cordialement Microsoft et son navigateur d'ivrogne, mais je n'ai pas le choix, ça reste le plus utilisé encore. Mais je ne souhaite pas sacrifier les autres pour autant.

Bien sur, il me reste la solution simplissime de laisser tomber les coins ronds et de goûter en fin de compte les charmes des anguleux coins carrés, mais en fait c'est plus un défi technique que je voudrais relever qu'autre chose.
Il semblerait que le problème vienne d'un conflit avec d'autres propriétés du reste de la page. Je n'arrive pas à trouver quoi, mais ce qui me fait conclure ça, c'Est le fait que je viens de faire à titre de test tous les exercices de positionnement avec IE indiqués dans le livre CSS2 Pratique du WebDesign. Là, comme il n'y a rien d'autre dans la page, pas de problème, tout se place très exactement là où j'indique que ça doit être.

Est-ce que quelqu'un(e) sait comment IE gère les positionnements quand il y a plusieurs balises semblables dans une page, même avec des id différents ? Et qu'est-ce qui prend la priorité ?
Bon, ben je l'ai eu, enfin quasiment, il me reste un décallage de 1px des coins, sauf en haut à gauche, que ne corrige pas l'astuce du font-size: 1px;, mais je finirai bien par trouver.

Résultat prochainement en ligne.

Merci quand même à ceux qui ont regardé le sujet Smiley cligne
Salut.
Bon, ben... c'est bien si as résolu ce problème. J'ai lu ton post vers 15h00 et je t'avais concocté une réponse : j'ose t'y, j'ose t'y pas la soumettre ?

J'ai isolé les parties de code qui concernaient le bloc et ses images d'angle. Une fois ouvert sur IE-Mac cela décalait complètement ( voir image ). En ligne c'était presque bon.

upload/579-coinsie.jpg

Après avoir reconstitué deux pages d'essai, je met ta partie code ici et la mienne plus bas.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<head><title>Calage des coins images pour les blocs</title>
	<style type="text/css">
/*<![CDATA[*/
<!--
 html > body {
	background: #dcdcdc;
	margin: 0 100px 0;
	padding: 0;
	font-family: "lucida grande", verdana, arial, helvetica, geneva, sans-serif; 
}

/*  |||||||||||||||||||   Partie principale du contenu   ||||||||||||||||||| */

#cadre {
	position: relative;
	margin: 140px 1.5em 0 17em;
	padding: 0;
	text-align: justify;
	border: 3px solid #164264;
	background-color: #add3b8;
	z-index: 0;
}

/*  |||||||||||||||||||  Coins de la partie principale ||||||||||||||||||  */

#hautgauche, #hautdroit, #basgauche, #basdroit {
	position: absolute;
	background-repeat: no-repeat;
	background-color: transparent;
	width: 25px;
	height: 25px;
}
#cadre #hautgauche {
	background-image : url(images/coin_hg.png);
	top: -3px;
	left: -3px;
}
#cadre #hautdroit {
	float: right;
	background-image : url(images/coin_hd.png);
	top: -3px;
	right: -3px;
}
#cadre #basdroit {
	float: right;
	background-image : url(images/coin_bd.png);
	bottom: -3px;
	right: -3px;
}
#cadre #basgauche {
	background-image : url(images/coin_bg.png);
	bottom: -3px;
	left: -3px;
}
-->
/*]]>*/
</style>
	</head>
	<body>
<div id="cadre">
	<div id="hautgauche"></div><div id="hautdroit"></div>
		<div id="contenu">
			<h1>Le titre de la page</h1>
			<p>Mince & flute, j'ai pas récuperé la règle pour div contenu ! Ni le charset.</p>
		</div>
	<div id="basgauche"></div><div id="basdroit"></div>
</div>
</body>


Mes modifs corrigent le décallage que j'ai sous IE-Mac et fonctionnent aussi partout. Je te laisses le soin de comparer et n'ajouterai pas de commentaires. Salut.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calage des coins images pour les blocs</title>

<style type="text/css">
/*<![CDATA[*/
<!--
 html > body {
	background: #dcdcdc;
	margin: 0 100px 0;
	padding: 0;
	font-family: "lucida grande", verdana, arial, helvetica, geneva, sans-serif; 
}

/*  |||||||||||||||||||   Partie principale du contenu   ||||||||||||||||||| */

#cadre {
	position: relative;
	margin: 140px 1.5em 0 17em;
	padding: 0;
	text-align: justify;
	border: 3px solid #164264;
	background-color: #add3b8;
	z-index: 0;
}

/*  |||||||||||||||||||  Coins de la partie principale ||||||||||||||||||  */

#hautgauche, #hautdroit, #basgauche, #basdroit {
	position: relative;
	display: block;  /* pour le contenu en ligne de <p> */ 
	margin: 0;
	height: 25px;
}
#hautgauche {
	background: url(images/coin_hg.png) top left no-repeat;
	margin: -3px -3px 0 -3px;
	text-align: right;  
}
#hautdroit {
	background: url(images/coin_hd.png) top right no-repeat;
}
#basgauche {
	background: url(images/coin_bg.png) bottom left no-repeat;
	margin: 0 -3px -3px -3px;
	text-align: right;  
}
#basdroit {
	background: url(images/coin_bd.png) bottom right no-repeat;
}

/*  |||||||||||||||||||  reste plus qu'a placer ton titre en marge superieure négative  ||||||||||||||||||  */
.tc {
	position: relative;
	text-align: center;
	margin-top: -1em;
}
-->
/*]]>*/
</style>
</head>
<body>
<div id="cadre">
<p id="hautgauche"><b id="hautdroit"></b></p>
<div id="contenu">
<h1 class="tc">Le titre de la page</h1>
<p>Mince & flute, j'ai pas récuperé la règle pour div contenu ! Ni le charset.</p>
</div>
<p id="basgauche"><b id="basdroit"></b></p>
</div>
</body>
</html>

Modifié par Aureance (12 Jul 2005 - 16:53)
Merci beaucoup Aureance, je vais regarder ça au cas où ce serait même meilleur que ma solution: il me reste encore en effet un décalage de 1px sous IE :
- coins haut droit : 1px vers la gauche;
- bas gauche : 1px vers le haut;
- bas droit : 1px vers le haut et 1px vers la gauche;
Sujet clos
Aller à