28173 sujets

CSS et mise en forme, CSS3

Bonjour,
Voila voilou j'ai fait mon menu, et j'ai rajouté un autre petit menu à sa droite je l'ai donc mis en float: right =D.
Mais sur firefox il est maintenant impossible de cliquer sur les liens du float;left =/

Une idée ?


Html 

div id="navbar"> 
<ul>
		<li>	<a href="index_en.php?page1=niouzes&amp;page2=<? echo $page2 ?>" title="niouzes" accesskey="2"> Nouvelles </a></li>
		<li>	<a href="index_en.php?page1=<? echo $page1 ?>&amp;page2=emission" title="emission"> Emissions</a> </li>
		<li>	<a href="index_en.php?page1=infos&amp;page2=<? echo $page2 ?>" title="infos" accesskey="8" > Informations </a></li>
		<li>	<a href="#" title="forum"> Forums </a> </li>
		<li>	<a href="index_en.php?page1=links&amp;page2=<? echo $page2 ?>" title="links" > Liens</a></li>
</ul> 
	</div>
	
	
	<div id="navbar_more">
<ul>
		<li><a href="#" onclick="setActiveStyleSheet('noimg');return false;">L&eacute;g&egrave;r </a> </li> 
		<li><a href="#" onclick="setActiveStyleSheet('original');return false;"> Original</a> </li> 
		<li> Design</li>
</ul>
	</div>




CSS

/* Menu */

#navbar {
margin-bottom:-20px;
color: #FF0099;
font-weight:700;
font-size: 110%;
letter-spacing:1px;
float:left;
}

#navbar ul{
list-style-type: none ;
margin:0 0 0 -1em;

padding:0;

float:left;

}


#navbar li {
margin:0 0 0 1em;
background-color: transparent;
float:left;
}

#navbar li:first-letter {
color: #FF0099;

font-weight: bold;

}

#navbar_more {
color: #ffacff;
font-size: 1em;
float:right;
}

#navbar_more ul{
list-style-type: none ;
margin:0 0 0 0em;

padding:0;
float:right;
}


#navbar_more li {
list-style-type: none ;
margin:0 0 0 0em;
padding : 0 1em 0 0;
background-color: transparent;
float:right;
}



Merci d'avance pour l'aide car la je ne comprend pas =/
Modifié par Bleeps (02 Apr 2006 - 12:59)
Bonjour Bleeps,

C'est parce que ton menu navbar_more "passe par dessus" ton menu principal. Pour éviter cet effet, il suffit d'appliquer une largeur fixe à navbar_more (par exemple 250px, ce qui est suffisant dans ton cas). En effet, les éléments en bloc comme les ul ont une largeur de 100% par défaut.

Pour voir si les deux menus se chevauchent, tu peux utiliser la webdevelopper toolbar de FF et encadrer les ul. Si tu n'as pas la toolbar, applique une bordure de 1px aux ul et tu sauras tout de suite Smiley cligne .
J'avais oublié de préciser, j'ai mis width au 2 nav / en % car le design est extensible, j'ai jonglé mais rien ne passe !
Par contre j'ai webdevelopper je v'ai voir ce soir car j'ai paq regardé sil se chevauche =P

Mais en tous cas j'ai jonglé pendant 15M avec les width et 1er fois que je sèche Smiley ohwell

Enfin si met un width à navbar_more ça marche mais comme avant le même bug les bloques en dessous se décale !
Je v'ai travailler j'en dis plus ce soir Smiley lol


Edit : J'ai réussis, avec wedevelooper en regardant bien, j'en parle ce soir ++
Modifié par Bleeps (27 Jan 2006 - 15:32)
Mon problème est réglé, j'appliquais des valeurs incorrect dans width, avec webdevelopper j'ai regardé pour pas qu'elle se chevauche et tout marche niquel !

J' avais pas pensé à regardé avec wd =/

Merci du rappel !