Salut tout le monde,
Merci Yahrou pour cette explication.
Après avoir suivi les conseils de chacun, le resultat est là !
http://pureplayaz.free.fr
J'ai changé de résolution et opté pour le 1024/768.
Comme promis, mon code est le suivant:
Code HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<!--[if lt IE 7]>
<style type="text/css">
#contenu{
height: 430px;
}
</style>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="Salon de coiffure spécialiste des cheveux frisés, Lydie Coiffure vous propose des produits professionnels" />
<meta name="keywords" content="salon, salon de coiffure, coiffure, coiffe, lydie, lydie coiffure, cheveux, cheveu, coupe, coupes, coupe de cheveux, coupes de cheveux, cheveu sec, cheveu gras, cheveu court, cheveu long, cheveu raide, cheveu lisse, cheveu frisé, cheveux secs, cheveux gras, cheveux courts, cheveux longs, cheveux raides, cheveux lisses, cheveux frisés, shampoing, aprè-shampoing, crè pour cheveux, soins, soin, soins pour cheveux, soin pour cheveu, shampoing professionnel, shampoings professionnels, spécialiste, spécialiste cheveu, spécialiste cheveux, loreal, oreal, l'oréal, l'oreal, schwarzkopf" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<title>Lydie Coiffure - Salon de coiffure Hommes & Femmes - Spécialiste cheveux frisés</title>
</head>
<body>
<div id="page">
<img src="images/gauche_femme.gif" id="femme" alt="photo femme coiffure" />
<div id="lydie_coiffure_header">
<h1>Spécialiste des cheveux frisés</h1>
<!-- Début menu -->
<div id="navigation">
<ul id="menu">
<li id="accueil"><a href="#">Accueil</a></li>
<li id="prestations"><a href="#">Nos prestations</a></li>
<li id="produits"><a href="#">Nos produits</a></li>
<li id="conseils"><a href="#">Conseils</a></li>
<li id="contact"><a href="#">Nous contacter</a></li>
</ul>
</div>
<!-- Fin menu -->
</div>
<!-- Début bloc droite -->
<div id="bloc_produits"></div>
<div id="bloc_contact"></div>
<div id="bloc_conseils"></div>
<div id="bloc_coupes"></div>
<!-- Début bloc droite -->
<!-- Contenu -->
<div id="haut_cadre"></div>
<div id="contenu_cadre">
<div id="contenu">
<p>Contenu !</p>
</div>
</div>
<!-- Fin contenu -->
</div>
<div id="bas_cadre"></div>
</body>
</html>
Code CSS:
body{
font: normal 12px Arial, Helvetica, sans-serif;
}
#page{
position: relative;
width: 1024px;
border-left: 1px solid #C7C6C6;
border-right: 1px solid #C7C6C6;
}
/* Affichage interface */
#lydie_coiffure_header{
width: 1024px;
height: 150px;
background-image: url(images/lydie_coiffure_header.gif);
}
#haut_cadre{
width: 845px;
height: 50px;
background-image:url(images/haut_cadre.gif);
}
#contenu_cadre{
width: 845px;
background-image:url(images/contenu_cadre.gif);
}
#bas_cadre{
width: 1024px;
height: 50px;
background: url(images/bas_cadre.gif) left no-repeat;
border-left: 1px solid #C7C6C6;
border-right: 1px solid #C7C6C6;
border-bottom: 1px solid #C7C6C6;
}
#femme{
position: absolute;
bottom: 0;
left: 0;
}
#bloc_produits{
position: absolute;
margin: 10px 0 0 855px;
width: 155px;
height: 142px;
background: url(images/produits.gif);
}
#bloc_contact{
position: absolute;
margin: 150px 0 0 855px;
width: 155px;
height: 142px;
background: url(images/contact.gif);
}
#bloc_conseils{
position: absolute;
margin: 290px 0 0 855px;
width: 155px;
height: 142px;
background: url(images/conseils.gif);
}
#bloc_coupes{
margin: 430px 0 0 855px;
position: absolute;
width: 155px;
height: 142px;
background: url(images/coupes.gif);
}
/* Fin Affichage interface */
h1{
position: absolute;
margin: 85px 0 0 100px;
color: #AAA;
font: bold 16px Georgia, "Times New Roman", Times, serif;
}
#contenu{
min-height: 430px;
padding: 0 10px 0 130px;
}
p{
margin: 0;
}
/* Affichage menu */
#navigation{
position: absolute;
margin: 0 0 0 50px;
}
#menu{
list-style: none;
margin: 0;
padding: 0;
}
#menu li{
margin: 130px 85px 0 0;
float: left;
}
#menu li a {
font: normal 1.2em Verdana, Arial, Helvetica, sans-serif;
color: #C5C5C5;
text-decoration: none;
}
#accueil{
border-bottom: 3px solid #448CCB;
}
#accueil a:hover{
border-bottom: 3px solid #C5C5C5;
color: #448CCB;
}
#prestations{
border-bottom: 3px solid #7FBC2D;
}
#prestations a:hover{
border-bottom: 3px solid #C5C5C5;
color: #7FBC2D;
}
#produits{
border-bottom: 3px solid #F0AF37;
}
#produits a:hover{
border-bottom: 3px solid #C5C5C5;
color: #F0AF37;
}
#conseils{
border-bottom: 3px solid #F26520;
}
#conseils a:hover{
border-bottom: 3px solid #C5C5C5;
color: #F26520;
}
#contact{
border-bottom: 3px solid #C41E14;
}
#contact a:hover{
border-bottom: 3px solid #C5C5C5;
color: #C41E14;
}
/* Fin Affichage menu */
Toutes critiques est bonne à prendre et merci encore !
Cordialement, JBENs
Modifié par JBENs (26 Apr 2007 - 13:42)
)
)
