28221 sujets

CSS et mise en forme, CSS3

Epaisseur des bordures [résolu]

je teste un menu à base de liste, et je ne comprend pas pourquoi la bordure dns la classe .menu qui est à 1px est plus épaisse que celle de la classe .menu a

le code :

<!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 vertical en CSS</title>
		<style type="text/css"> <!--

body {
	font: 12px Verdana, Arial, sans-serif;
	}

.menu{
	width: 140px;
	top: 5px;
	left: 5px;
	border-bottom: 1px solid #6495ED;
	background: #FFFFFF;
	color: black;
	}

ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	} 

li {
	margin: 0px;
	}

.menu p { 	  /* configuration des titres */
	clear:both;
	width: 139px;
	height: 20px;
	margin: 0px;
	border: 1px solid #6495ED;
	background: #6495ed;
	color: #FFFFFF;
	text-align: center;
	}

.menu a {
     margin: 0;
     width: 139px; 
     height: 20px;
     display: block;
     text-align: center;
     text-decoration: none;
     color: #000000;
     font-size: 10px;
     border-left: 1px solid #6495ED;
     border-right: 1px solid #6495ED;
	}
	 
.menu a:hover {
     background: #add8e6;       
	}

--></style>
	</head>
	<body>
		<div class="menu">
			<p>TITRE-1</p>
			<ul class="menu">
				<li>
					<a href="">Menu 1</a></li>
				<li>
					<a href="">Menu 2</a></li>
				<li>
					<a href="">Menu 3</a></li>
				<li>
					<a href="">Menu 4</a></li>
			</ul>
		</div>
		<br />
		<div class="menu">
			<p>TITRE-2</p>
			<ul class="menu">
				<li>
					<a href="">Menu 5</a></li>
				<li>
					<a href="">Menu 6</a></li>
				<li>
					<a href="">Menu 7</a></li>
				<li>
					<a href="">Menu 8</a></li>
			</ul>
		</div>
	</body>
</html>

Modifié le 31 Jan 2005 - 13:13
Elle n'est pas plus épaisse, mais comme elle est appliquée à deux éléments (<div class="menu"> et <ul class="menu">), il y a deux bordures juxtaposées.

Supprime le class="menu" des éléments <ul>, qui ne sert à rien sauf à produire cet effet non voulu.
Modifié le 31 Jan 2005 - 11:57
Merci de ton aide, on pompe des idée de menu à droite et à gauche on essaye d'adapter à ses besoin et on ne comprend pas toujours le code produit Smiley ravi
du coup j'ai modifié les CSS pour avoir la bordure dans la classe .menu Smiley cligne 

body {
	font: 12px Verdana, Arial, sans-serif;
	}

.menu{
	width: 140px;
	top: 5px;
	left: 5px;
	border: 1px solid #6495ED;
	background: #FFFFFF;
	color: black;
	}

ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	} 

li {
	margin: 0px;
	}

.menu p { 	  /* configuration des titres */
	clear:both;
	width: 139px;
	height: 20px;
	margin: 0px;
	border: 1px solid #6495ED;
	background: #6495ed;
	color: #FFFFFF;
	text-align: center;
	}

.menu a {
     margin: 0;
     width: 139px; 
     height: 20px;
     display: block;
     text-align: center;
     text-decoration: none;
     color: #000000;
     font-size: 10px;
	}
	 
.menu a:hover {
     background: #add8e6;       
	}
Sujet clos
Aller à