Mise en page et menu decalés

Cen · 31 Août 2006

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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
 lang="fr">
<head>
  <title>nouveau site test 2006 : musique</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
  <link rel="stylesheet" type="text/css"
 href="pictures.css" />
</head>
<body>
<div id="global"></div>
<ul id="menu">
  <li><a href="acceuil.html" class="acceuil"><span>acceuil</span></a></li>
  <li><a href="actualit%E9es.html" class="actualitées"><span>actualité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">
<h1>Test site 2006</h1>
<p style="width: 251px;">Nouveau site test pour 2006/2007.</p>
<p> </p>
</div>
<div id="centre_blanc">
<h3>titre</h3>
<img src="mini/shakira_005.jpg" alt="" />
<p>Et dolore, nisl nonummy molestie. Commodo vel duis eum dolor
magna wisi. Exerci lorem ea iusto et, ex ea. Euismod illum luptatum,
feugiat. Aliquip hendrerit vulputate feugiat et dolore amet feugait,
blandit, odio duis autem illum ex dolore vero ipsum nostrud molestie
vero.
<a href="#">Voir le site</a></p>
<h3>titre</h3>
<img src="mini/anastacia_005.jpg" alt="" />
<p>Et dolore, nisl nonummy molestie. Commodo vel duis eum dolor
magna wisi. Exerci lorem ea iusto et, ex ea. Euismod illum luptatum,
feugiat. Aliquip hendrerit vulputate feugiat et dolore amet feugait,
blandit, odio duis autem illum ex dolore vero ipsum nostrud molestie
vero.
<a href="#">Voir le site</a></p>
<h3>titre</h3>
<img src="mini/021.jpg" alt="" />
<p>Et dolore, nisl nonummy molestie. Commodo vel duis eum dolor
magna wisi. Exerci lorem ea iusto et, ex ea. Euismod illum luptatum,
feugiat. Aliquip hendrerit vulputate feugiat et dolore amet feugait,
blandit, odio duis autem illum ex dolore vero ipsum nostrud molestie
vero.
<a href="#">Voir le site</a></p>
<h3>titre</h3>
<img src="mini/024.jpg" alt="" />
<p>Et dolore, nisl nonummy molestie. Commodo vel duis eum dolor
magna wisi. Exerci lorem ea iusto et, ex ea. Euismod illum luptatum,
feugiat. Aliquip hendrerit vulputate feugiat et dolore amet feugait,
blandit, odio duis autem illum ex dolore vero ipsum nostrud molestie
vero.
<a href="#">Voir le site</a></p>
<h3>titre</h3>
<img src="mini/027.jpg" alt="" />
<p>Et dolore, nisl nonummy molestie. Commodo vel duis eum dolor
magna wisi. Exerci lorem ea iusto et, ex ea. Euismod illum luptatum,
feugiat. Aliquip hendrerit vulputate feugiat et dolore amet feugait,
blandit, odio duis autem illum ex dolore vero ipsum nostrud molestie
vero.
<a href="#">Voir le site</a></p>
</div>
</body>
</html>

[Edit captain_torche : ] Pour les codes longs, préfère la balise CODEBOX plutôt que CODE, elle évite de déformer la page

Jeromnimo · 31 Août 2006

Je te conseille d'aller voir du côté d'openweb (http://openweb.eu.org)

Il y a plusieurs tutoriaux pour la mise en page en colonne, je pense que tu y trouveras ton bonheur ;-)

Cen · 31 Août 2006

Oui, j'en ai lu pas mal.

Mais je comprends pas d'ou vient ce probleme et j'arrive pas du tout a voir mon erreur.

Merci de ta réponse

PhY · 31 Août 2006

salut !

ou ici http://www.intensivstation.ch/templates/

bon courage !

Cen · 31 Août 2006

Ok, merci je vais lire ça.

Connexion

Mise en page et menu decalés

Sujets conseillés

Cen

Jeromnimo

Cen

PhY

Cen

Veuillez vous connecter pour commenter

Parcourir

Activité