Mise en page sur toute la largeur...

[TylerD]

Bonjour,

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 :

<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>

Voici mon code CSS :

#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;
}

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

Modifié 25 Mars 2005 par TylerD

[MarvinLeRouge]

Salut,

Un élément en display : block occupe par défaut toute la largeur disponible (hors marges).

Pour ce qui est des li, il te faudra fixer leur largeur à la main, en faisant ton petit calcul.

[TylerD]

C'est assez général ! tu peux être plus précis stp !

merci d'avance

[Raphael]

Effectivement : un élément bloc occupe par défaut toute la largeur du document.

Mais si tu positionnes ton élément en absolu, il n'occupera que la place minimale nécessaire. Il faudra alors lui indiquer clairement la taille (100% par exemple).

Est-il nécessaire de positionner cet élément en absolu ?

[TylerD]

Ben franchement j'en sais rien...

Tu peux me donner un exemple stp ?