28217 sujets

CSS et mise en forme, CSS3

bonjour,
une fois de plus, je n'arrive pas à obtenir le bon résultat. sauf que pour une fois, c'est internet explorer qui a le bon résultat. upload/3132-IE.jpg
sous firefox, un espace blanc apparait entre mon menu et mon sous-menu upload/3132-firefox.jpg
mes deux bouts de code concernés :

li {display: inline;}

.smenu{
	position: absolute;
	width: 552px;
	height: 21px;
	top:70px;
	left: -30px;
	background: url(onglets/sous_menu.gif);
	} 
a.smenu_lien{
	font-size: 14px;
	color: black;
	padding: 0;
	margin: 0;
	width: 100px;
	height: 20px;
  }
a.smenu_lien:hover{color:#C0C0C0;}

<dl>	
<span class="onglet_1 onglet-actif">Onglet 1</span> 		
<dd class="smenu">
<ul>
<li><a class="smenu_lien" href="#">Sous-menu 1.1</a></li>
<li><a class="smenu_lien" href="#">Sous-menu 1.2</a></li>
<li><a class="smenu_lien" href="#">Sous-menu 1.3</a></li>
</ul>
</dd>
</dl> 

et voila ma page en ligne au cas où il manquerait des infos.
en espérant que vous pourrez m'aider.
Modifié par p_tite_jo (19 Jan 2006 - 19:31)
Modérateur
bonjour,
en remplaçant ton span par un dd, ça passe(c'est preque plus logique ?).
et pour positionner l'ensemble, en mettant ton #menu en position relative, cela te permet, ensuite ,d'y placer a l'interieur en "absolute" des elements exactement la ou tu veut, quelque soit les marges exterieurs (a "#menu"), qui peuvent le deplacer, le point de reference sera le coin haut gauche de #menu pour ses "enfants", et plus celui de body ou de ta fenetre ...
a plus
Merci pour vos réponses !
J'ai encore deux soucis.
1°) j'ai mon dernier onglet qui passe à la ligne... et je ne vois pas d'où vient le problème. Smiley ohwell
2°) je n'arrive pas à aligner mon menu et mon sous-menu. Le résultat diffère entre IE et FF. Sur IE, j'ai du mettre un left de -40px pour y aligner(???) alors forcément sur Firefox, il manque ces memes 40px...)
li {display: inline;}


.smenu{
	position: absolute;
	width: 552px;
	height: 21px;
	top:28px;
  left: -40px;
	background: url(onglets/sous_menu.gif);
	background-repeat: no-repeat;
	} 
a.smenu_lien{
	font-size: 14px;
	color: black;
	padding: 0;
	margin: 0;
	width: 100px;
	height: 20px;
  }
a.smenu_lien:hover{color:#C0C0C0;}

<div class="menu"> <!-- début de la boite contenant les onglets -->
<dl>
<dd class="onglet_1 onglet-actif">Onglet 1</span> 			
<ul class="smenu">
<li><a class="smenu_lien" href="#">Sous-menu 1.1</a></li>
<li><a class="smenu_lien" href="#">Sous-menu 1.2</a></li>
<li><a class="smenu_lien" href="#">Sous-menu 1.3</a></li>
</ul>
					
</dd>
</dl> 
<a class="onglet_2" href="onglet_2.php">Onglet 2</a> 		
<a class="onglet_3" href="onglet_3.php">Onglet 3</a> 		
<a class="onglet_4" href="onglet_4.php">Onglet 4</a>
<a class="onglet_5" href="onglet_5.php">Onglet 5</a> 		
<a class="onglet_6" href="onglet_6.php">Onglet 6</a> 		
<div class="spacer"></div> 
</div>

Modifié par p_tite_jo (18 Jan 2006 - 22:37)
j'ai de bonnes raisons de penser que mon dernier onglet passe à la ligne à cause du dd.. en effet, si je remets mon span d'avant (qui n'a pourtant rien à faire dans <dl>) mon problème disparait... comment je fais pour garder le dd et obtenir le résultat du span ?
Modifié par p_tite_jo (18 Jan 2006 - 22:21)
il me semblait oui mais en verifiant j'ai vu que non Smiley confused . par contre maintenant que les onglets sont en place, un autre problème apparait mais sur IE seulement Smiley fache
upload/3132-ie2.jpg
Modifié par p_tite_jo (18 Jan 2006 - 22:40)
j'ai "résolu" mon problème par un
smenu {_left: -40px}
maintenant si quelqu'un a une solution plus accadémique à me proposer, volontiers Smiley cligne

edit: je retire.. ça marche pour le premier onglet mais à partir du deuxième c'est plus gérable..
Modifié par p_tite_jo (18 Jan 2006 - 22:59)
oui en effet, il y avait un </span> qui n'avait plus rien à faire la..et il manquait la balise fermante de <dd>.. je crois qu'il va falloir que je bâche pour ce soir, j vois plus rien Smiley confus .
par contre, ça résoud toujours pas mon problème.. j'ai toujours 40px de décalage entre IE et FF
Modifié par p_tite_jo (18 Jan 2006 - 23:38)
Modérateur
salut, SOPO t'as parlais des marges, as tu essayer un simple
* {margin:0;padding:0;}
histoire de tester si les marges n'etait pas differentes d'un navigateur a l'autre , comme dans les listes classique en ul ...
a plus
je viens de tester, le problème ne vient pas de là.. une autre idée ? Smiley cligne
edit: problème résolu.. il fallait préciser left: 0; pr que IE l'affiche correctement Smiley ohwell
Modifié par p_tite_jo (19 Jan 2006 - 19:31)