28173 sujets

CSS et mise en forme, CSS3

[résolu] Menu : une mise en forme étrange...

Bonjour,

Je souhaite faire un petit menu tout simple

<div id="menu">
		<ul>
		<li><a href="...">Onglet 1</a></li><li><a href="...">Onglet 2</a></li><li><a href="...">Onglet 3</a></li>
		</ul>
		</div>



#menu {
	width: 750px;
	margin: 0;
	background-color: #000;
}
#menu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
#menu li {
	padding: 5px 5px;
	display: inline;
}
#menu a:link, #menu  a:visited  {
	text-transform: uppercase;
	text-decoration: none;
	font-size: 0.9em;
	font-weight: bold;
	color: #FFF;
}
#menu a:hover {
	color: #000;
	background-color: #FFF;
}


Ceci m'affiche un menu comme celui-ci :

upload/1525-onglets.jpg

Il y a deux problèmes :

- il y a un bord d'1 pixel en haut et en bas lorsqu'on survole le lien (zone blanche sur l'image) Smiley ohwell .
- le padding se fait bien sur la largeur mais pas sur la hauteur Smiley ohwell

Je ne comprends pas pourquoi ces problèmes surviennent. Pourriez-vous m'aider s'il vous plait ?
Modifié par Yazerty (17 Oct 2007 - 22:13)
Bonjour,

Le code ci-dessous devrait résoudre tes 2 problèmes :

<ul id="menu">
   <li><a href="...">Onglet 1</a></li>
   <li><a href="...">Onglet 2</a></li>
   <li><a href="...">Onglet 3</a></li>
</ul>

#menu {
   float:left;
   width:750px;
   margin:0;
   padding:0;
   list-style:none;
   background:#000
}
#menu li {
   display:inline
}
#menu li a:link, #menu li a:visited {
   display:block;
   float:left;
   text-transform:uppercase;
   text-decoration:none;
   font-size:0.9em;
   font-weight:bold;
   color:#fff;
   padding:5px
}
#menu li a:hover {
   color:#000;
   background-color:#fff
}

Modifié par mecho (05 Oct 2007 - 09:55)
Yazerty a écrit :
- il y a un bord d'1 pixel en haut et en bas lorsqu'on survole le lien (zone blanche sur l'image) Smiley ohwell .

Ça peut se corriger avec un peu de padding (2-3px en haut et en bas) sur les liens, par exemple. Cela ne décalera pas les liens en hauteur (cf. point suivant).
Yazerty a écrit :
- le padding se fait bien sur la largeur mais pas sur la hauteur Smiley ohwell

Le padding est bien pris en compte en hauteur (donner une couleur de fond pour s'en apercevoir). Par contre, la boite qui en résulte n'augmentera pas pour autant la hauteur de la boite de ligne (la ligne de texte, quoi).

Voir et décortiquer l'exemple suivant (qui reprend ton menu):

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
	<link rel="stylesheet" type="text/css" media="screen" href="" />
	<style type="text/css">
	#menu {
		width: 750px;
		margin: 0;
		background-color: #000;
	}
	#menu ul {
		margin: 0px;
		padding: 0px;
		list-style: none;
	}
	#menu li {
		padding: 5px;
		display: inline;
		background: green;
	}
	#menu a:link, #menu  a:visited  {
		text-transform: uppercase;
		text-decoration: none;
		font-size: 0.9em;
		font-weight: bold;
		color: #FFF;
		padding: 7px; /* 5px pour rattraper le padding des li, et 2px de sécurité... */
	}
	#menu a:hover {
		color: #000;
		background-color: #FFF;
	}
	p {margin: 100px;}
	span {padding: 100px; background: red; color: white;}
	</style>
</head>
<body>
<div id="menu">
	<ul>
		<li><a href="...">Onglet 1</a></li><li><a href="...">Onglet 2</a></li><li><a href="...">Onglet 3</a></li>
	</ul>
</div>

<p>Un paragraphe normal. Les paragraphes ont un <code>margin: 100px;</code></p>
<p><span>Texte dans un <code>span</code> en <code>padding: 100px;</code></span> et un peu de texte normal.</p>
</body>
</html>
Sujet clos
Aller à