Mise en page 3 colonnes + menu decalé

Bonjour,

Je débute en css et j’aimerais avoir des conseils de votre part.

Voilà ce que j’aimerais faire :

Un bloc conteneur de 750 x 500 px.

Le séparer en trois colonnes.

La première tout a gauche : les menus en verticale ( 296 x 60 ) avec un effet rollover, j’ai doublé l’image le menu en mode normal + l’effet de survol, donc une seule image.

La colonne du milieu, elle pourra inclure un petit texte de 4 ou 5 lignes ou rester libre.

Une troisieme colonne avec du texte, photo, image …

J’avance pas a pas mais là je suis un peu perdu.

Pouvez vous m’aider SVP ?

Le problème étant que je n’arrive pas a mettre mes colonnes l’une a coté de l’autre. ( Je l’avais fait mais en mettant tout les menus a la verticale, ça me décale tout ) et de plus, je n'arrive pas à mettre mon menu sur une colonne, il se divise en deux à chaque fois.

Merci par avance de votre aide.

Voici le code :

body{
height: 100%;
}

body {
margin: 0;
padding: 0; 
background-color : #000; 
text-align :left; 
font-family : arial; 
font-size : 10px ; 
color : #fff;


 scrollbar-base-color:#80A23A;

  scrollbar-arrow-color:#FFF;
  scrollbar-darkshadow-color:#000000;
  scrollbar-face-color:#80A23A;
  scrollbar-highlight-color:#ccc;
 
  scrollbar-track-color:#80A23A;
} 

/* BLOC CONTENEUR */ 

#cont { 
 position:absolute;
left: 50%; 
top: 50%; 
width: 750px;
height: 500px; 
margin-top: -255px;
margin-left: -375px; 
background :#000 url(images/bg_all_003.jpg) ; 
text-align : left; 
border : 10px solid #fff ; }


#menu {
padding : 0; 
margin : 0 ; 
list-style : none ; 
float : left;
margin-right : 0px;
height : 0px;}

#menu li a span{
position: absolute;
left: -5000px;
}

li {
float : left;
display : block;
 
} 

li a {
padding : 0; 
margin : 0 0 0 1px ;
width : 250px ;
height : 30px ;
display : block;
background : #ccc ; 
-moz-opacity:0.8;
opacity: 0.8;
filter:alpha(opacity=80); 
} 

li a:hover {
background : #666 ;  
} 

 a.photos{
background: url(images/boot_photo_photos.jpg); 
background-position : 30px 0;

}
 a.photos:hover {
background: url(images/boot_photo_photos.jpg); 
background-position : 0 0 ;}

 a.home{
background: url(images/boot_photo_accueil.jpg); 
background-position : 30px 0}
a.home:hover {
background: url(images/boot_photo_accueil.jpg); 
background-position : 0 0 ;}

 a.news{
background: url(images/boot_photo_news.jpg); 
background-position : 30px  0}
a.news:hover {
background: url(images/boot_photo_news.jpg); 
background-position : 0 0 ;}

a.musique{
background: url(images/boot_photo_musique.jpg); 
background-position : 30px 0 ;
}
a.musique:hover {
background: url(images/boot_photo_musique.jpg); 
background-position : 0 0;}

a.liens{
background: url(images/boot_photo_liens.jpg); 
background-position : 30px 0}

a.liens:hover {
background: url(images/boot_photo_liens.jpg); 
background-position :  0 0 ;}

a.contact{
background: url(images/boot_photo_contact.jpg); 
background-position : 30px 0}
a.contact:hover {
background: url(images/boot_photo_contact.jpg); 
background-position :  0 0 ;}

a.sponsors{
background: url(images/boot_photo_sponsors.jpg); 
background-position : 30px 0}
a.sponsors:hover {
background: url(images/boot_photo_sponsors.jpg); 
background-position : 0 0 ;}


/* BLOC GAUCHE*/ 

#texte {
background : transparent ; 
width : 250px ;
height : 500px;
text-align : left;
float : left;
overflow : auto; }

#texte p{
margin : 0 0 0 10px ; padding : 0}

.englobe_texte {
margin-top : 10px; 
background : #fff ;
 color : #000 ;
 -moz-opacity:0.8;
opacity: 0.8;
filter:alpha(opacity=80); } 

/* images du bloc texte */ 
#texte img{
margin : 10px 0 10px 10px ; }


 /* BLOC CENTRE */ 
#centre {
background : transparent ; 
float : absolute;
margin-left : 0px ; 
border-left :10px solid #fff; 
height : 500px;
width : 250px;
overflow : auto;}



#centre_blanc {
background : #fff ; 
float : right;
border-right :8px solid #fff;
height : 500px; 
width : 250px;
overflow : auto;
color : #000}

#centre_blanc img{
 
margin-left : 7px ; margin-top : 5px;
 float : right
}


/* Titres*/ 
h1{margin: 10px 0 0 10px; 
padding: 0; font-size : 12px; }

h2 span {font-size : 10px ; font-style : italic}
h2 {
margin : 10px 5px 0 0 ; 
padding : 0 ; 
font-size : 12px ; 
border-bottom : 1px dotted #B9C899 ; 
padding-bottom : 5px;
color : #B9C899 ;}


h3 {
margin : 10px 10px 10px 0 ; 
padding : 0 ; 
font-size : 10px ; 
border-bottom : 1px dotted #B9C899 ; 
padding-bottom : 5px;
color : #B9C899 ;
text-align : right;
 text-transform : uppercase}
 
 h4{
margin : 10px 10px 0 0 ; 
padding : 0 ; 
font-size : 12px ; 
border-bottom : 1px dotted #B9C899 ; 
padding-bottom : 5px;
color : #B9C899 ;}

/* paragraphes */ 
p { 
padding : 0 ;
 margin-top : 5px ; 
 margin-bottom : 0 ; 
 margin-right : 10px}

.para_top2 {margin : 5px 0 0 0}
.notop{margin : 0}


/* iLiens */ 
a {color : #B9C899 }  
a:hover {color : #B9C899 } 

a.class1 {text-decoration : none ; text-transform : uppercase ; font-weight : bold}
a:hover.class1 {text-decoration : none ; text-transform : uppercase; }

/* FORMULAIRE */ 

input {
width : 275px ; 
margin : 0 0 5px 0
}
textarea { 
margin : 0 0 10px 0 ;
 width : 275px ; 
}

a.blanc {text-decoration : none ; font-weight : bold ; color : #ffffff}

Le html coresspondant :

<div id="cont">
<ul id="menu">
  <li><a href="acceuil.html" class="acceuil"><span>acceuil</span></a></li>
  <li><a href="actualit%E9es.html" class="actualit&eacute;es"><span>actualit&eacute;es</span></a></li>
  <li><a href="presentation.html" class="presentation"><span>presentation</span></a></li>
  <li><a href="groupes.html" class="groupes"><span>groupes</span></a></li>
  <li><a href="musique.html" class="musique"><span>musique</span></a></li>
  <li><a href="dates.html" class="dates"><span>dates</span></a></li>
  <li><a href="photos.html" class="photos"><span>photos</span></a></li>
  <li><a href="ddp.html" class="ddp"><span>ddp</span></a></li>
  <li><a href="forum.html" class="forum"><span>forum</span></a></li>
  <li><a href="streeteam.html" class="streeteam"><span>streeteam</span></a></li>
  <li><a href="sponsors.html" class="sponsors"><span>sponsors</span></a></li>
  <li><a href="liens.html" class="liens"><span>liens</span></a></li>
  <li><a href="contact.html" class="contact"><span>contact</span></a></li>
</ul>
<div id="texte"> 

Modifié par Cen (31 Aug 2006 - 14:03)

Hello et bienvenue,

Tout d'abord attention à ton titre "Aide Svp" qui ne donne aucune information sur ton problème et qui ne va pas attirer les foules

Pour rappel :

a écrit :
Veuillez donner un titre de sujet évocateur lorsque vous en rédigez un nouveau, et non pas simplement 'Question', 'HELP', 'Problème!' ou 'URGENT!!!!'. Retenez ceci : à question bien posée, réponse vite trouvée.

En tant que modérateur, je me dois également de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

il faudrait voir comment tu fais ton html
et pour le "aide svp" ^^ pense à l'utilisation du moteur de recherche, un bon titre serait "3 colonnes" ou mieux ^^

Salut,

Désolé, je l'avais editer avant de partir et c'est pas passer.
Voilà qui est rectifier.

Merci