Aligner menu et contenu

[ZacK Ossian]

Bonjour,

Je viens de découper un design et de l'assembler. Cependant il subsiste un problème que je n'arrive guère a régler :

En effet mon design est découper de la façon suivante :

--------------

[ En - Tête ]

--------------

|M| |C| |M|

|E| |O| |E|

|N| |R| |N|

|U| |P| |U|

|1| |S| |2|

--------------

[ Bottom ]

--------------

Cependant mon [MENU2] ne s'aligne pas comme je le souhaite :

--------------

[ En - Tête ]

--------------

|M| |C|

|E| |O|

|N| |R|

|U| |P|

|1| |S|

----------[M]

----------[E]

----------[N]

----------

----------[2]

--------------

[ Bottom ]

--------------

Illustration ici

Voici le code de mon style.css

/* BEGIN CORPS */
#corps
{
   width: 925px;
   height: 932px;
}
	/* BEGIN LEFT */
	#left
	{
  border: 1px solid black;
  width:255px;
  height:932px;
  position: absolute;
  background-color: #FFFFFF;
	}
  /* BEGIN MENU 1 */
  #menu1
  {
  	background-image: url("images/corps_left1.png");
  	height:380px;
  	width:254px;
  }
  .menu1 .text
  {
  	margin-left:20px;
  }
  .menu1
  {
  	margin-left:109px;
  }
  /* END MENU 1 */
  /*BEGIN MENU 2 */
  #menu2
  {
  	background-image: url("images/corps_left2.PNG");
  	height:552px;
  	width:254px;
  }
  /* END MENU 2 */
	/* END LEFT */
	/* BEGIN MIDDLE */
	#middle
	{
  margin-left:255px;
  width:390px;
  height:863px;
  margin-right:;
  background-color: #FFFFFF;
  border: 1px solid black;
	}
  /* BEGIN LAST */
  #last
  {
  	background-image: url("images/corps_middle1.png");
  	width:390px;
  	height:120px;
  }
  /* END LAST */
  /* BEGIN NEWS */
  #news
  {
  	width: 358px;
  	margin-left: 20px;
  	margin-top: 50px;
  	font-family:Tahoma;
  }
  .news .prenews 
  {
  	background-image: url("images/news/head_news.PNG");
  	width:358px;
  	height:130px;
  }
  .news .middle
  {
      background-image: url("images/news/corps_news.PNG");
  	background-repeat: repeat;
  	padding:5px;
  	color:grey;
  	text-transform:none;
  	font-size:12px;
  }
  .news .bottom
  {
  	background-image: url("images/news/bottom_news.PNG");
  	background-repeat: repeat;
  	padding:5px;
  	text-transform:none;
  }
  /* END NEWS */
	/* END MIDDLE */
	/* BEGIN RIGHT */
	#right
	{
  position:absolute;
  background-image: url("images/corps_right1.png");
  margin-left:650px;
  border: 1px solid black;
  width:270px;
  height:863px;
  background-color: #FFFFFF;
	}
  /*END RIGHT */
/* END CORPS */

Merci d'avance de votre aide.

Toutes mes salutations distinguées.

<modérateur: deplacé dans xHTML et CSS. merci d'utiliser les codebox pour les longs extraits de code et de donner un titre exhaustif aux posts>

Modifié 30 Décembre 2005 par Loupilo

[KaRaK]

Bonjour,

Tu peux utiliser ce gabarit. Il semble convenir pour ce que tu veux faire.

[Sarc]

Bonjour,

Je n'ai pas la solution mais une possible cause : ton code html...

Les div ne doivent servir que pour les grandes zones, on a généralement sur une page 3-4 divs maximum, on peut peut-être aller jusqu'à 6 pour un diz compliqué, mais en avoir autant que toi c'est un exploit dans le genre !

Une liste de liens, c'est pas plein de zones, c'est une liste (<ul><li></li>...</ul>), pourquoi mettre tout en div ?

Pareil, quand tu veux placer du texte dans une div, tu mets <p>, et non pas une autre div...

Donc voilà, à force d'en accumuler, et de vouloir en plus les dimensionner en CSS, ton CSS devient illisible, ton code html également, et l'erreur arrive...

Sache également que sur certaines navigateurs dont je tairais le nom, la somme des largeurs n'est pas égale à la largeur totale, à cause des paddings qui foirent, donc faut faire varier certaines largeurs pour que ça marche parfois !

Sers toi de la web developer pour faire ça sous firefox !