Problème de CSS

alpage Messages postés 2 Date d'inscription   Statut Membre Dernière intervention   -  
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour,

Je suis entrain de créer un menu horizontal et je n'arrive pas à répartir mes différents onglets sur l'ensemble de mes 900 px correspondant à la largeur de mon menu. A l'extrémité droite, après page6 ,il me reste un espace et je voudrais le combler avec l'ensemble de mes onglets.
Je joints le code de la page ci-dessous

Merci pour votre aide.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html>
<head>
<title>Horizontal Buttons Preview</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
/* CSS Tabs */
#navcontainer {
background: #f0e7d7;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: lowercase;
width: 900px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
text-align: center;
font-weight: bold;
margin-bottom: 0px;
font-size: 16px;
}

/* to stretch the container div to contain floated list */
#navcontainer:after {
content: ".";
display: block;
line-height: 1px;
font-size: 1px;
clear: both;
}

ul#navlist {
list-style: none;
padding: 0;
margin: 0 auto;
width: 900px;
font-size: 0.8em;
}

ul#navlist li {
display: block;
float: left;
width: 16%;
margin: 0;
padding: 0;
}

ul#navlist li a {
display: block;
width: 900px;
padding: 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}

#navcontainer>ul#navlist li a { width: 90%; }

ul#navlist li#active a {
background: #f0e7d7;
color: #800000;
}

ul#navlist li a:hover, ul#navlist li#active a:hover {
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}
body {
background-color: #FFFFFF;
}
-->
</style>
</style>
</head>

<body>
<div id="navcontainer">
<ul id="navlist">
<!-- CSS Tabs -->
<li id="active"><a href="page1.html" id="current"><strong>page1</strong></a></li>
<li><a href="page2.php" target="_parent">page2</a></li>
<li><a href="page3.php" target="_parent">page3</a></li>
<li><strong><a href="page4.php" target="_parent">page4</a></strong></li>
<li><a href="page5.php" target="_parent">page5</a></li>

<li><a href="page6.php" target="_parent">page6</a></li>
</ul>
</div>
</body>
</html>

2 réponses

Posotaz Messages postés 489 Date d'inscription   Statut Membre Dernière intervention   225
 
Bonjour Alpage,


Tu as 6 onglets à répartir sur 900 pixels, donc chacun d'eux doit occuper 150px, soit 17% de la largeur (900px).

Le problème c'est que les bordures ne sont pas prises en compte dans ce calcul et ça se met sur deux lignes, alors je peux te dire approximativement que la largeur idéale de tes onglets est de 16.65% au lieu des 16% que tu as attribué.
0
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
salut,

ou alors tu calcules.

6 onglet avec une bordure droite et gauche de 1 pixel ça doit faire (900 - (6*2))/6 = 148.
0