28173 sujets

CSS et mise en forme, CSS3

Hello à toutes (?) et à tous

Une image valant mieux qu'un long discours, en voici deux :
Sous FF et Opera la liste est bien calée :
http://i14.tinypic.com/30li9ox.png
Sous IE (6 et 7), elle est décalée :
http://i14.tinypic.com/2ce12s6.png

Le code HTML est le suivant :

<div class="part_cssbox">  <div class="part_cssbox_head">
  <h2 class="cartouche">LISTE DES COURSES </h2>
</div> 
<div class="part_cssbox_body"> 
  <ul id="part_cart">
    <li>1 botte de radis </li>
	<li>1 concombre </li>
	<li>2 harengs </li>
	<li>1 camenbert </li>
  </ul>
  </div>
</div>


et sa CSS :
.ent_cssbox, .ent_cssbox_body, .ent_cssbox_head, .ent_cssbox_head h2 { background: transparent url(images/ent_orange_box.png) no-repeat right bottom; }

.ent_cssbox {
	width: 280px !important; /* intended total box width - padding-right(next) */
	width: 265px; /* IE Win = width - padding */
	padding-right: 15px; /* the gap on the right edge of the image (not content padding) */
	margin: 20px 40px 20px auto; /* use to position the box */
	float: right;
	clear: right;
} /* set the top-right image */

.ent_cssbox_head { background-position: top right; margin-right: -15px; /* pull the right image over on top of border */ padding-right: 40px; /* right-image-gap + right-inside padding */ } /* set the top-left image */

.ent_cssbox_head h2 { background-position: top left; margin: 0; /* reset main site styles*/ border: 0; /* ditto */ padding: 25px 0 15px 40px; /* padding-left = image gap + interior padding ... no padding-right */ height: auto !important; height: 1%; /* IE Holly Hack */ } /* set the lower-left corner image */

.ent_cssbox_body { background-position: bottom left; margin-right: 25px; /* interior-padding right */ padding: 15px 0 15px 0px; /* mirror .cssbox_head right/left */ } 

#ent_cart li{
	list-style:square outside;
	margin:0 0 4px 0;
	padding:0;
	color: #2973D4;
	font-weight: bold;
	font-size: 12px;
}


Le tout est visible sur cette page.

C'est pas dramatique mais tant qu'à faire propre j'aimerais bien régler le problème et apprendre pourquoi le comportement à cet endroit diffère entre IE et ses collègues.

Bonne journée Smiley smile
Modifié par Sventovit (13 Jan 2007 - 11:12)
Bonjour,
Sventovit a écrit :
Hello à toutes (?) et à tous
Cachez ce point d'interrogation que je ne saurais voir. Smiley langue

Je pense que tu trouveras la solution à ton problème dans la faq.

Par ailleurs, sais-tu qu'il est déconseillé d'utiliser les hack CSS et de leur préférer les commentaires conditionnels ? En plus, j'ai l'impression que certains de tes hacks te servent à gérer le modèle de boîtes microsoft. Ce ne serait pas nécessaire si tu spécifiais correctement ton doctype. Smiley smile

Pour ce qui est du problème des coins arrondis, clb56 s'est penché sur la question.
Bonjour Julien et merci pour ta réponse

- le lien vers des boîtes aux angles arrondis ^^

- concernant le problème de la la liste j'ai eu beau changer les valeurs de margin et padding, rien n'y a fait. C'est peut être lié au hack ou à la ...

- déclaration de doctype : là je ne comprends pas dans mon cas ce qui ne colle pas. Smiley sweatdrop
Sventovit a écrit :
- déclaration de doctype : là je ne comprends pas dans mon cas ce qui ne colle pas. Smiley sweatdrop
Ben disons que c'est ce code :
width: 280px !important; /* intended total box width - padding-right(next) */
width: 265px; /* IE Win = width - padding */
qui me met la puce à l'oreille... Quel est le doctype que tu utilises ? S'il est correctement défini, ce code est inutile, et c'est sans doute même lui qui te cause tes problèmes.

L'idéal est à mon avis de reprendre à zéro grâce aux liens que je t'ai donnés, tu obtiendras un code bien plus propre et fiable. Smiley smile
Modifié par Julien Royer (13 Jan 2007 - 12:20)
c'est ce doctype Julien :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Cela semble correct et j'ai beau relire les pages que tu m'as indiqué je ne vois pas ce qu'il peut avoir de non conforme (par contre que le hack soit iutile voire, problèmatique, je veux bien le croire)
Sventovit a écrit :
- concernant le problème de la la liste j'ai eu beau changer les valeurs de margin et padding, rien n'y a fait.

Tu as bien changé les valeurs de margin et padding sur la liste (ul) et non pas sur les li ?

Sventovit a écrit :
- déclaration de doctype : là je ne comprends pas dans mon cas ce qui ne colle pas. Smiley sweatdrop

À vue de nez, elle me semble correcte également.
Bonjour Florent
Florent V. a écrit :

Tu as bien changé les valeurs de margin et padding sur la liste (ul) et non pas sur les li ?
oui :
#ent_cart ul {margin-left: 0; padding-left: 12px;}


C'est certain qu'avec les hacks des boîtes ça ne rend pas les choses faciles.
Smiley decu
#ent_cart ul {margin-left: 0; padding-left: 12px;}


Ben voilà l'origine du problème. Une bête erreur de sélecteur CSS. Ton code HTML est le suivant :
<ul id="ent_cart">...</ul>

Le sélecteur CSS que tu utilises ne correspond pas à ça.
Smiley eek no comprendo !

<div class="part_cssbox">  <div class="part_cssbox_head">
  <h2 class="cartouche">LISTE DES COURSES </h2>
</div> 
<div class="part_cssbox_body"> 
  <ul id="part_cart">
    <li>1 botte de radis </li>
	<li>1 concombre </li>
	<li>2 harengs </li>
	<li>1 camenbert </li>
  </ul>
  </div>

#part_cart ul {margin-left: 0; padding-left: 12px;}

#part_cart li{
	list-style:square outside;
	color: #2973D4;
	font-weight: bold;
	font-size: 12px;
}

où y a t-il une erreur ? Smiley bawling
Modifié par Sventovit (13 Jan 2007 - 17:47)
Smiley confused
toutes mes excuses : effectivement dans le 1er post je donnais le code de la CSS d'une boîte et l'html d'une autre.
Désolé de la confusion.
Il demeure que la liste sous IE est toujours décalée et que je n'en trouve pas la raison.
Sventovit a écrit :
où y a t-il une erreur ? Smiley bawling

Le sélecteur est faux. Dans un sélecteur CSS, l'espace est un connecteur logique qui indique que le ou les éléments visés dans la partie de droite sont des enfants ou des descendants du ou des éléments visés dans la partie de gauche.

div ul {} /* sélectionnera tous les ul ayant au moins une div pour parent ou ancêtre */

div#part_cart ul {} /* sélectionnera tous les ul ayant pour parent ou ancêtre une div dont l'identifiant est "part_cart" */

#part_cart ul {} /* sélectionnera tous les ul ayant pour parent ou ancêtre un élément quelconque dont l'identifiant est "part_cart" */


En espérant que ça te semble plus clair. Sinon : révision de la syntaxe des sélecteurs CSS ! Smiley rolleyes
Florent V. a écrit :

(...) Sinon : révision de la syntaxe des sélecteurs CSS ! Smiley rolleyes


Smiley biggrin tu as bougrement raison !
Merci pour tes explications (et ta patience) : je file réviser, un litre de café et 2 tubes d'aspirine à portée de main.
Sventovit a écrit :
Smiley biggrin tu as bougrement raison !
Merci pour tes explications (et ta patience) : je file réviser, un litre de café et 2 tubes d'aspirine à portée de main.
Sois fort. Smiley smile

Est-ce que ce sujet peut être considéré comme résolu ?
Hello Julien Smiley smile

je ne me suis pas penché sur le sujet : je m'y remets aujourd'hui.
Et comme je suis optimiste... Smiley cligne
Modifié par Sventovit (15 Jan 2007 - 08:51)