Sujet Précédent Sujet Suivant

Problème de CSS

Fermé
alpage Messages postés 2 Date d'inscription jeudi 4 septembre 2008 Statut Membre Dernière intervention 30 janvier 2009 - 30 janv. 2009 à 17:30
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 31 janv. 2009 à 18:59
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

Réponse 1 / 2
Posotaz Messages postés 489 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 19 juin 2011 225
31 janv. 2009 à 18:55
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
Réponse 2 / 2
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
31 janv. 2009 à 18:59
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

Discussions similaires

[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Mettre un objet au premier plan
Achillion -
tiran58 -

2 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse