28111 sujets

CSS et mise en forme, CSS3

Bonsoir à tous,

Je suis actuellement en train d'effectuer la conception du site
http://www.24heurespourlafrance.com/nouvelleversion/new/

J'ai créé un menu horizontal grâce aux balises <ul> et <li>, que j'ai formatés ensuite grâce au CSS.

Tout fonctionne dans tous les navigateurs, sauf dans Opéra : Les boutons du menu se chevauchent les uns sur les autres.

Est-ce que quelqu'un aurait une idée ?

Merci beaucoup,

Vince_122

Le code CSS :

ul.menu2 {
	list-style-type: none;
	padding:0;
	/*position:absolute;
	top: 12.5em; /* positionnement du menu, que vous pouvez changer à loisir */
	width: 360px; /* précision pour Opera */
	margin-top:20px;
}

li.menu2 {
	/*margin-left:auto;
	margin-right:auto;*/
	float: left;
	margin-left:7px;
}

#menu2 {
	margin-bottom:30px;
	margin-left:auto;
	margin-right:auto;
	width:360px;
}

.menu2 a {       /* définition de chaque bouton du menu */
	min-width: 98px;	   /* largeur du bouton, que vous pouvez changer à loisir */
	height: 25px;
	display: block;
	text-align: center;
	border: 1px solid #CCCCCC; 
	text-decoration: none;
	color: #000; 
	background: #fff;
	border-spacing: 1px;
	padding-left:5px;
	padding-right:5px;
	font-size:14pt;
	font-weight:bold;
}

.menu2 a:hover {
	color: #411;
	background: #AAA;
	border: 1px solid gray; 
	border-bottom: 0px;
	color: black;
}


Et le code HTML du menu :


	<tr class="row1">
		<td class="fdesc">Nunc eu arcu non nisi mollis condimentum. Nunc dapibus varius ipsum. Mauris volutpat. Donec mattis augue sit amet augue ultricies venenatis. Praesent at pede. Morbi eu velit. Donec eu nibh. Suspendisse arcu dolor, ultricies ac, porta sit amet, tincidunt eget, massa. Fusce enim eros, tristique non, dapibus id, vehicula pharetra, est. Fusce felis. Vestibulum turpis arcu, semper sit amet, placerat vel, consequat id, tellus.<br />
		<div id="menu2">
<ul class="menu2">
<li class="menu2"><a href="">Prier</a></li>
<li class="menu2"><a href="">Penser</a></li>
<li class="menu2"><a href="">Agir</a></li>
</ul>
</div>
		</td>

				
	</tr>