Bonjour, je rencontre des problèmes de positionnement, voici la maquette de mon site:
http://www.chaylaimmobilier.com/images/Maquette_site.jpg
J'ai donc 4 div, j'ai réussi à positionner le rouge (entete) et le bleu (menu).
J'ai un soucis avec le vert (contenu), l'image de fond doit se répéter sur l'axe y, mais j'ai une ligne blanche entre chaque image
, j'ai également un problème pour centrer le menu (<ul class="element_menu">).
Le div "contenu" comprends lui même 2 div, un pour le bandeau à gauche (bandeau_gauche) et un pour le corps (corps_droite), mais ça je ne m'en suis pas encore occupé.
Voici le code xhtml:
Les css:
Merci par avance pour votre aide.
Modifié par Beno (07 Apr 2006 - 11:55)
http://www.chaylaimmobilier.com/images/Maquette_site.jpg
J'ai donc 4 div, j'ai réussi à positionner le rouge (entete) et le bleu (menu).
J'ai un soucis avec le vert (contenu), l'image de fond doit se répéter sur l'axe y, mais j'ai une ligne blanche entre chaque image
, j'ai également un problème pour centrer le menu (<ul class="element_menu">).Le div "contenu" comprends lui même 2 div, un pour le bandeau à gauche (bandeau_gauche) et un pour le corps (corps_droite), mais ça je ne m'en suis pas encore occupé.
Voici le code xhtml:
<!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>R. CHAYLA Immobilier - l'Immobilier de Prestige</title>
<meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="styles.css" />
</head>
<body>
<div id="container">
<div id="en_tete">
</div>
<div id="menu">
<ul class="element_menu">
<li><a href="page 1.html">Lien 1</a></li>
<li><a href="page 2.html">Lien plus long essai</a></li>
<li><a href="page 3.html">Lien 3</a></li>
<li><a href="page 4.html">Lien 4</a></li>
<li><a href="page 5.html">Lien 5</a></li>
<li><a href="page 6.html">Lien 6</a></li>
<li><a href="page 7.html">Lien 7</a></li>
</ul>
</div>
</div>
<div id="contenu">
<div id="bandeau_gauche">
<h1>Bandeau à gauche</h1>
<p>Lorem ipsum dolor sit amet,<br />
consectetuer adipiscing elit.</p>
</div>
<div id="corps_droite">
<h1>Corps du site</h1>
<p>Lorem ipsum dolor sit amet<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut posuere suscipit neque. Etiam condimentum tortor in libero. Quisque malesuada turpis ut ipsum. Praesent ipsum. Morbi volutpat mauris in erat.</p>
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut posuere suscipit neque. Etiam condimentum tortor in libero.<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut posuere suscipit neque. Etiam condimentum tortor in libero.</p>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut posuere suscipit neque.<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut posuere suscipit neque.<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut posuere suscipit neque.</p>
</div>
<div id="pied_de_page">
</div>
</body>
</html>Les css:
body {
margin: 0;
padding: 0;
text-align: center;
background: #F1EFE2;
}
acronym {
border: none;
}
a {
text-decoration: none;
}
a:link {
color: rgb(248,185,28);
}
a:visited {
color: rgb(255,138,0);
}
a:hover {
text-decoration: underline;
}
/*DEBUT DU CODE DU MENU */
.element_menu {
position: relative;
width: 806px;
height: 20px;
margin: 0 auto 20px;
font-size: 100%;
text-align: left;
list-style-type:none;
text-align:center;
word-spacing:normal;
}
.element_menu li {
letter-spacing:normal;
text-align:center;
vertical-align:middle;/
word-spacing:normal;
}
.element_menu a {
margin:1px;
width:80px;
height:20px;
float:left;
display:block;
text-align:center;
border:none;
text-decoration:none;
color:#034B1A;
background:#F8B91C;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
}
.element_menu a:hover {
background:#D7AD18;
border:none;
}
.element_menu a:active {
background:#D7AD18;
border:none;
}
/*FIN DU CODE DU MENU*/
#container h3 {
margin: 0;
padding: 0;
}
#container {
width: 806px;
margin: 10px auto;
padding: 0;
}
#en_tete {
background: url("images/entete.gif") 0 0 no-repeat;
height: 206px;
width: 806px;
}
#menu {
background: url("images/menu.gif") 0 0 no-repeat;
width: 806px;
height: 41px;
margin: 0;
padding: 0;
}
#contenu h1 {
margin: 0;
padding: 0;
}
#contenu h2 {
margin: 0;
padding: 0;
}
#contenu {
background-image: url("images/fondpage.gif");
background-repeat: repeat-y;
width: 806px;
margin: 0;
padding: 0;
}Merci par avance pour votre aide.
Modifié par Beno (07 Apr 2006 - 11:55)
++, non serieux c'est plus propre est par la suite la maintenance peut se faire plus aisement, pas besoin de partir a la chasse aux hacks divers et variés dans le css ou alors il faut penser a les regroupés ... 
