18073 sujets

Questions générales et questions de débutants

Menu horizontal en CSS sur 2 lignes [ Résolu !!!]

bonjour
je cherche a mettre "le menu horizontal en CSS" simple
sur 2 lignes
Mais
Il y a un espace entre les deux menu
que j'arrive pas à reduire

je dois avouer ne pas etre tres au point

le la defini ou cette marge ...
j'y arrive pas Smiley confus
Modifié par camyo (19 Feb 2007 - 15:45)
Salut,

Sans exemple en ligne, ou au moins le code HTML et CSS concerné, il sera impossible de te dire pourquoi...
c'est vrai ....
j'ai pas encore cette page en ligne
mais le code est tres approchant du model
(pour l'instant ...)

mais je le joint tout de même:
<!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" xml:lang="fr" lang="fr">
<head>
<title>menu horizontal en CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
/* CSS issu des tutoriels  www.alsacreations.com/articles  */
body {margin: 10px; padding: 0; font: 10px Verdana;}

ul {
list-style-type: none;
width: 100%; /* précision pour Opera */
}

.menu li {
float: left;
}

.menu a {
	margin: 1px;
	width: 70px;
	height: 24px;
	display: block;
	text-align: center;
	border: 1px solid gray;
	text-decoration: none;
	color: #000;
	background: #F0F0F0;
	
}

.menu a:hover {
background: #ccc;
border: 1px solid gray; 
}

.menu a:active {
	background: gray;
	border: 1px solid gray;
	color: #fff;
	
}

a.test {text-decoration: none;
color: #222;
}
a.test:hover{text-decoration: underline;
}
-->
</style>

</head>

<body>

	<ul class="menu">
	  <li><a href="">Bulles HP</a></li>
	  <li><a href="">Bulles Origine </a></li>
	  <li><a href="">Bulles A&eacute;romax</a></li>
	  <li><a href="">Bulles Racing </a></li>
	  <li><a href="">Saute vent</a></li>
	  <li><a href="">Pare-Brise</a></li>
	  <li><a href="">Sabots moteur </a></li>
      <li><a href="">Capots de selle </a></li>
	</ul>
<ul class="menu">
	  <li><a href="">Bulles HP</a></li>
	  <li><a href="">Bulles Origine </a></li>
	  <li><a href="">Bulles A&eacute;romax</a></li>
	  <li><a href="">Bulles Racing </a></li>
	  <li><a href="">Saute vent</a></li>
	  <li><a href="">Pare-Brise</a></li>
	  <li><a href="">Sabots moteur </a></li>
      <li><a href="">Capots de selle </a></li>
	</ul>

</body>
</html>


a coler simplement dans un html
bon j'ai trouvé

ul {
list-style-type: none;
width: 100%;
margin:1px;
/* précision pour Opera */
}
camyo a écrit :


width: 100%; /* précision pour Opera */


Tiens, un fossile qui passe, enkysté dans un code à copier coller...
Sujet clos
Aller à