J'ai quelques soucis pour faire une mise en page.
Pour bien expliquer mon problème, je joins un schéma pour illustrer ce que je veux.
C'est dans la création de mon entête que j'ai des soucis.
Il y a trois zones dans celle-ci :
Le Logo (en taille fixe 160*160 pixel),
La barre de navigation (entouré en rouge) qui contient "item 1", "item 2", "item 3", "item 4" doit faire 80px en hauteur et doit occuper tout le reste de l'espace en largeur.
La barre de titre qui doit elle aussi tenir toute la largeur et fait 80px de hauteur également.
j'ai commencé une partie de code mais je suis un peu perdu !
Voici mon code XHTML :
CODE
<div id="entete">
<div id="bandeaunav">
<ul>
<li id="item1"><a href="#">Item 1</a></li>
<li id="item2"><a href="#">Item 2</a></li>
<li id="item3"><a href="#">Item 3</a></li>
<li id="item4"><a href="#">Item 4</a></li>
</ul>
</div>
<div id="logo"></div>
<div id="bandeauesp">
<h1>Titre de ma page</h1>
</div>
</div>
<div id="bandeaunav">
<ul>
<li id="item1"><a href="#">Item 1</a></li>
<li id="item2"><a href="#">Item 2</a></li>
<li id="item3"><a href="#">Item 3</a></li>
<li id="item4"><a href="#">Item 4</a></li>
</ul>
</div>
<div id="logo"></div>
<div id="bandeauesp">
<h1>Titre de ma page</h1>
</div>
</div>
Voici mon code CSS :
CODE
#entete{
height:160px;
}
#logo{
position: absolute;
width:160px;
height:160px;
top:0;
left:0;
background-color:#A3A3A3;
}
#bandeaunav li{
position: absolute;
top:0;
height:80px;
list-style: none;
width:20%;
}
#item1, #item2, #item3, #item4{
top:0;
height:80px;
list-style: none;
width:20%;
border-bottom:2px solid #D9D9D9;
}
#item1{
left:0;
margin-left:155px;
background-color: #D9D9D9;
}
#item2{
left:20%;
margin-left:155px;
background-color: #C3C3C3;
}
#item3{
left:40%;
margin-left:155px;
background-color: #999897;
}
#item4{
left:60%;
margin-left:155px;
background-color: #757574;
}
#bandeauesp{
position:absolute;
height:80px;
top:80px;
left:160px;
background-color:#EFEFEF;
}
height:160px;
}
#logo{
position: absolute;
width:160px;
height:160px;
top:0;
left:0;
background-color:#A3A3A3;
}
#bandeaunav li{
position: absolute;
top:0;
height:80px;
list-style: none;
width:20%;
}
#item1, #item2, #item3, #item4{
top:0;
height:80px;
list-style: none;
width:20%;
border-bottom:2px solid #D9D9D9;
}
#item1{
left:0;
margin-left:155px;
background-color: #D9D9D9;
}
#item2{
left:20%;
margin-left:155px;
background-color: #C3C3C3;
}
#item3{
left:40%;
margin-left:155px;
background-color: #999897;
}
#item4{
left:60%;
margin-left:155px;
background-color: #757574;
}
#bandeauesp{
position:absolute;
height:80px;
top:80px;
left:160px;
background-color:#EFEFEF;
}
Je n'arrive pas à mettre le menu et la zone de titre sur tout le reste de la page.
Egalement le soucis c'est que j'aimerai bien que mes "Items" de menus soit de la même taille...
Merci d'avance
TD
