Problème de CSS
alpage
Messages postés
3
Statut
Membre
-
Dalida Messages postés 7114 Statut Contributeur -
Dalida Messages postés 7114 Statut Contributeur -
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>
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>
A voir également:
- Problème de CSS
- Css download - Télécharger - HTML
- Enlever soulignement lien css ✓ - Forum CSS
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Enlever le soulignage des lien. - Forum CSS
- Css ligne horizontale ✓ - Forum CSS
2 réponses
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é.
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é.
