Bonjour,
Je cherche à faire une mise en page d'un menu avec display:table (comme expliqué dans CSS avancées Vers HTML5 et CSS3).
Alors voici ce mon html (extrait):
Voici ma partie CSS :
Je vais expliquer en tentant d'être aussi clair que possible.
Mon problème se situe dans le css au niveau de #menu > li, la propriété width. Je veux mettre cette propriété en % (afin d'être un minimum web Responsive).
Je utilisé une mise en page avec display:table.
Mais le width ne fonctionne pas comme je le désire. Surtout, je ne comprends pas sur quoi se base son fonctionnement.
Lorsque j'augmente le pourcentage de la valeur width de #menu > li, la largeur de mes li diminue ! et vise versa. A en devenir fou
!
Je peux bien trouver une solution "bricolée" en recherchant un pourcentage qui s'affiche correctement ou en tentant une autre mise en page (float, display:inline-block...) mais je veux comprendre pourquoi ma mise en page réagi de la sorte.
Merci,
Bien à vous qui m'avez lu,
Barthou
Je cherche à faire une mise en page d'un menu avec display:table (comme expliqué dans CSS avancées Vers HTML5 et CSS3).
Alors voici ce mon html (extrait):
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<div id="title">
<h1>Titre</h1>
<h2>Sous Titre</h2>
</div>
<img src="images/image.gif" alt="Image" />
</div>
<div id="main">
<div id="content">
<ul id="menu">
<li>Lien 1</li>
<li>Lien 2</li>
<li>Lien 3</li>
<li>Lien 4</li>
<li>Lien 5</li>
</ul>
<p>(...)</p>
</div>
</div>
</body>
</html>
Voici ma partie CSS :
body {
background-color: #00DDEE;
text-align: center;
width:100%;
height:auto;
text-align:center;
}
#header {
background-color: #00FF00;
display:table;
margin-left:auto;
margin-right:auto;
border-collapse:separate;
border-spacing:4px;
width:80%;
}
#title {
background-color: #EE00FF;
display:table-cell;
width:75%;
vertical-align:middle;
text-align:left;
padding-left:8%;
color: #FFFFFF;
}
#title > h1 {
background-color: #AA00DD;
margin-bottom:0;
}
#title > h2 {
background-color: #FFAADD;
margin-top:0;
}
#header > img {
margin-left:auto;
margin-right:auto;
display:table-cell;
padding:1em;
background-color: #AA00DD;
}
#main {
margin-left:auto;
margin-right:auto;
padding-top:0.5em;
padding-right:3%;
padding-left:3%;
width: 74%;
background-color: #EE00AA;
}
#menu {
border-collapse: separate;
/*border-spacing:1px;*/
padding:0;
border:0;
background-color: #EE0000;
}
#menu > li {
padding:0;
border:0;
margin:0;
width: 10%;
display:table-cell;
background-color: #AA00AA;
}
Je vais expliquer en tentant d'être aussi clair que possible.
Mon problème se situe dans le css au niveau de #menu > li, la propriété width. Je veux mettre cette propriété en % (afin d'être un minimum web Responsive).
Je utilisé une mise en page avec display:table.
Mais le width ne fonctionne pas comme je le désire. Surtout, je ne comprends pas sur quoi se base son fonctionnement.
Lorsque j'augmente le pourcentage de la valeur width de #menu > li, la largeur de mes li diminue ! et vise versa. A en devenir fou
!Je peux bien trouver une solution "bricolée" en recherchant un pourcentage qui s'affiche correctement ou en tentant une autre mise en page (float, display:inline-block...) mais je veux comprendre pourquoi ma mise en page réagi de la sorte.
Merci,
Bien à vous qui m'avez lu,
Barthou