Bonjour,
je suis debutant en CSS et j'ai un probleme pour cadrer une barre de menu dans une page HTML, j'aimerai que la barre occupe tout l'espage,
donc j'ai mit le paramettre WIDTH:100%
mais aussi j'aimerais que les boutons de cette bare commencent a 200px du bord de la page dans la meme bare, alors
j'ai mit le paramettre PADDING:0px 0px 0px 200px;
Le probleme c'est que le texte commence dans la bare à 200px du bord MAIS LA BARRE SE PROLONGE DE 200 Pixels du bord sur le droite,
j'aimerais donc avoir une barre de menu ou le texe commence à 200 px sans que la barre se prolonge en taille
Voici le Code HTML
***********************************************************************
<ul id="topnav">
<li><a href="#">Home</a></li>
<li>
<a href="#">About</a>
<span>
<a href="#">The Company</a> |
<a href="#">The Team</a> |
<a href="#">Careers</a>
</span>
</li>
<li>
<a href="#">Services</a>
<span>
<a href="#">What We Do</a> |
<a href="#">Our Process</a> |
<a href="#">Testimonials</a>
</span>
</li>
<li>
<a href="#">Portfolio</a>
<span>
<a href="#">Web Design</a> |
<a href="#">Development</a> |
<a href="#">Identity</a> |
<a href="#">SEO & Internet Marketing</a> |
<a href="#">Print Design</a>
</span>
</li>
<li><a href="#">Contact</a></li>
</ul>
********************************************************************
et voici le code CSS
*************************************************************************
<style type="text/css">
body {
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.container {width: auto; margin: 0 auto;}
ul#topnav {
margin: auto;
padding:0px 0px 0px 200px;
float: left;
width:100%;
position: relative;
font-size: 1.2em;
background: url('images/topnav_stretch.gif') repeat-x;; list-style-type:none
}
ul#topnav li {
float: left;
margin: auto;
padding: 0;
border-right: 1px solid #555;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url('images/topnav_active.gif') repeat-x; }
ul#topnav li span {
float: center;
padding: 15px 200px;
position: absolute;
left: 0; top:35px;
display: none;
width:100%;
background: #1376c9;
color: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}
</style>
<script type="text/javascript"
src="scripts/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});
});
</script>
*************************************************************************
si quelq'un a un avis, merci de me le faire savoir