Mise en page + menu separée en 2

Inscrit le: 31 Aoû 2006 Messages: 1

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 :

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 :

Code:

<!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>

Mise en page + menu separée en 2

Mise en page + menu separée en 2

Mise en page + menu separée en 2

Rappel du sujet de la page : Mise en page + menu separée en 2