Probleme HTML/CSS avec bordure
clem25
-
ReDLoG -
ReDLoG -
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>
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:
- Probleme HTML/CSS avec bordure
- Bordure de page word - Guide
- Editeur html - Télécharger - HTML
- Bordure excel ne s'affiche pas ✓ - Forum Excel
- Ajouter bordure photo ✓ - Forum MacOS
- Espace en html ✓ - Forum HTML
2 réponses
Bonsoir,
Je ne vois que des bordures de 10 pixels noires dans le style :
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;
}
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
comment peut-on mettre une bordure atour d'une liste inline
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>• TEST - clem25 •</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> </p>
</div>
</body>
</html>
