Salut, je viens de regarder. Pour que ton contenu s'aligne vers le haut (à côté du menu) tu as 2 solutions.
Soit mettre le menu en position fixe (absolue) et positionner le bloc contenu à côté. Soit mettre ton menu en flottant ce qui est plus simple (technique que j'ai adopté).
En fait j'ai considéré que le menu était un seul bloc (d'ou l'utilisation de id et non de class) et je l'ai mis en float: left. Dés lors je me suis servi du margin-bottom des listes pour faire l'espace et simuler 2 petit blocs séparés ce qui est le cas (sponsors et liens).
D'ou les modif suivante :
- Pour le CSS :
div#gauche
{
position: relative;
float: left; <---------------------------- nouveau
left:5px;
width: 150px;
color: #fff
}
div#gauche ul{<---------------------------- nouveau (toute le def de la liste)
margin: 0px;
padding: 0px;
margin-bottom: 30px;
background-image: url(fond_menu.gif);
border: 1px solid #000 ;
}
div#gauche li{<---------------------------- nouveau
text-align: center;
}
div#gauche p {<---------------------------- inchangé
margin: 0 ;
background-image: url(titre_menu.gif);
padding-left: 15px ;
color: #fff ;
font-weight: bold;
line-height: 23px ;
}
- le XHTML allégé :
<div id="gauche">
<ul>
<p>menu</p><---------------------------- dans la liste
<li>liste 1</li>
<li>liste 2</li>
<li>liste 3</li>
</ul><---------------------------- on se sert d'une nouvelle liste pour remplacer les 2 blocs.
<ul>
<p>sponsors</p><---------------------------- idem
<li>sponsors 1</li>
<li>sponsors 2</li>
<li>sponsors 3</li>
</ul>
</div>
Voila chez moi et sous FF ca donne un truc assez ressemblant et plus simple.
Bien a toi, dis moi si ca ne va pas.
.