Version complète: sur le forum Webmaster Hub : Aligner menu et contenu
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
ZacK Ossian
vendredi 30 décembre 2005 à 15:22
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]
----------[U]
----------[2]
--------------
[ Bottom ]
--------------

Illustration ici

Voici le code de mon style.css

CODE
/* 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>
KaRaK
vendredi 30 décembre 2005 à 16:06
Bonjour,

Tu peux utiliser ce gabarit. Il semble convenir pour ce que tu veux faire.
sarc
vendredi 30 décembre 2005 à 16:15
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... wink.gif

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 !
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.