Probleme HTML/CSS avec bordure

Fermé
clem25 - 13 janv. 2013 à 20:20
 ReDLoG - 13 janv. 2013 à 22:09
Bonjour,

voila j ai une bande bleu sur ma liste. J aimerais a la place des bordures de couleur bleu au dessus et en dessous. J ai tout essaye mais je n y arrive pas.

Je suis novice alors merci de votre comprehension.

voila le code:

#bar {
background-color: #0174DF;
float:left;
width:100%;
border: 10px;
border-color: black;}

#menu { border:10px
border-color: black;

}

#menu ul li{
display: inline;
float:left;
font: bold 1.1em 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;

list-style: none;
}
#menu ul li a {
position: relative;
float: left;

color: #2E2E2E;
padding: 5px 5px;
margin: 5px 5px;
text-decoration: none;

}




a{
color:white;
}

#form {
margin-left: 200px;
float:left;
position: relative;
bottom: -4px;
}

#mainpage {
margin: 40px 40px 40px 40px;
padding-top: 50px;
border: 10px;

</style>
</head>

<body>




<div id="bar">


<div id="menu">
<ul>
<li id="current"><a href="index.html">Home</a></li>
<li><a href="index.html">What we do</a></li>
<li><a href="index.html">Join Us</a></li>
<li><a href="index.html">Contact</a></li>

</ul>
</div>
</div>
<div id="mainpage">
<p> iqjfbiqwbjefpqiwjfbeqpwibfjqipwoebfj
</div>

A voir également:

2 réponses

Bonsoir,
Je ne vois que des bordures de 10 pixels noires dans le style :
#bar {
	float: left;
	width: 100%;
	border: 10px;
	border-color: black;
	background-color: #0174DF;
}
#menu {
	border: 10px
	border-color: black;
}
0
j ai essaye meme juste ac la liste et des bordures et ca ne marche pas.

comment peut-on mettre une bordure atour d'une liste inline
0
Testé avec IE 9.0 et Google Chrome 24.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<title>&bull; TEST - clem25 &bull;</title>
	<style type="text/css" media="screen">
	#bar {
		float: left; 
		width: 100%; 
		border: none;
	}
	#menu {
		border: none;
		background-color: #0174DF;
	}
	#menu ul {margin: 0; padding: 0; border: none;}
	#menu ul li {
		display: inline;
		float: left;
		list-style: none;
		font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
		font-weight: bold;
		font-size: 1.1em;
		border: none;
		border-top: 4px solid #0174df;
		border-bottom: 4px solid #0174df;
	}
	#menu ul li a {
		position: relative;
		float: left;
		margin: 5px 5px;
		padding: 5px 5px;
		color: #000;
		text-decoration: none;
	}
	#menu ul li a:hover {text-decoration: underline;}

	a {color: #fff;}
	#form {
		position: relative;
		float:left;
		bottom: -4px;
		margin-left: 200px;
	}
	#mainpage {
		margin: 40px 40px 40px 40px;
		padding-top: 50px;
		border: none;
	}
	</style>
</head>

<body>
<div id="bar">
	<div id="menu">
		<ul>
			<li><a href="index.html">Home</a></li>
			<li><a href="index.html">What we do</a></li>
			<li><a href="index.html">Join Us</a></li>
			<li><a href="index.html">Contact</a></li>
		</ul>
	</div>
</div>
<div id="mainpage">
	<p>&nbsp;</p>
</div>
</body>
</html>
0