créer un site


Mise en page + menu separée en 2

Poster un nouveau sujet sur css   Répondre au sujet à css:Mise en page + menu separée en 2    Accueil Forum -> css
Voir le sujet précédent :: Voir le sujet suivant  
Auteur Message
Cen
frontpage mioche
frontpage mioche
MessageMise en page + menu separée en 2 , Posté le: 31-08-2006 13:57

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>
albedo0
supermioche
supermioche
MessageMise en page + menu separée en 2 , Posté le: 31-08-2006 14:21

il est bizarre ton <div id="global"></div> au début...

sinon je te propose de repartir sur la base suivante et de rajouter dans la première colonne ton menu :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
  <style type="text/css">
<!--
div#conteneur {
height: 500px;
width:700px;
}
div#zone1{
   width:200px;
   height: 500px;
   background-color:#F3C;
   float:left;
}
div#zone2{
   width:300px;
   height: 500px;
   background-color:#9F0;
   float:left;
   text-align: center;
}
div#zone3{
   width:200px;
   height: 500px;
   background-color:#CF9;
   float:left;
   text-align: right;
}
-->
  </style>
</head>

<body>
<div id="conteneur">
   <div id="zone1">zone1</div>
   <div id="zone2">zone2</div>
   <div id="zone3">zone3</div>
</div>
</body>
</html>
Cen
frontpage mioche
frontpage mioche
MessageMise en page + menu separée en 2 , Posté le: 31-08-2006 14:32

Ok, merci, oui je pense que je vais tout reprendre à zero.
Si tu trouves tout de meme mes erreurs, ça m'interresse de savoir ou je me suis trompé, il doit avoir des doublons et autres.

Merci de ton aide !
albedo0
supermioche
supermioche
MessageMise en page + menu separée en 2 , Posté le: 31-08-2006 14:53

j'y jeterai peut être un oeil, mais c'est vrai que ça fait long quand même... Wink
Cen
frontpage mioche
frontpage mioche
MessageMise en page + menu separée en 2 , Posté le: 31-08-2006 14:55

Ok, merci.
Et ça va etre long de le rfaire, surtout si je fais des erreurs dans ce genre.
albedo0
supermioche
supermioche
MessageMise en page + menu separée en 2 , Posté le: 31-08-2006 14:57

fait les choses doucement et testes ta page très régulierement comme ça tu peux facilement cibler le code qui pose problème... y'a que ça à dire ! bon courage
Cen
frontpage mioche
frontpage mioche
MessageMise en page + menu separée en 2 , Posté le: 31-08-2006 17:29

Oui, je vais faire ça, merci du conseil
Montrer les messages depuis:   
Poster un nouveau sujet sur css   Répondre au sujet à css:Mise en page + menu separée en 2    Accueil Forum -> css Toutes les heures sont au format GMT + 1 Heure
Page 1 sur 1

 
Sauter vers:  
S'enregistrerS'enregistrer
ProfilProfil
Se connecter pour vérifier ses messages privésSe connecter pour vérifier ses messages privés
RechercherRechercher
Liste des MembresMembres
FAQFAQ
ConnexionConnexion 


© Mentions Légales