Bonjour à tous,
Et bien comme d'habitude c'est IE qui me pose problème.
Mon menu subit un décalage vers la droite et je ne comprend pas pourquoi.
Code HTML
Code CSS
Donc voilà si vous avez une idée de souci, cela m'interesse.
Merci beaucoup
Modifié par Hydrax (06 Mar 2007 - 17:39)
Et bien comme d'habitude c'est IE qui me pose problème.
Mon menu subit un décalage vers la droite et je ne comprend pas pourquoi.
Code HTML
<!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" >
<head>
<title>xxxxxxxxxxxxx.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="essai.css" />
</head>
<body>
<div id="en_tete">
<!-- Ici on mettra la bannière -->
<div class="logo"></div>
</div>
<!-- Bloc Menu -->
<ul id="menu">
<div class="menu_haut"></div>
<li><a href="#">Acceuil</a></li>
<li><a href="#">Qui suis-je ?</a></li>
<li><a href="#">Le feng shui ?</a></li>
<li><a href="#">Exemple</a></li>
<li><a href="#">Contact</a></li>
<li id="blanc"><br /><br /><br /><br /></li>
<div class="menu_bas"></div>
<div class="menu_contact"></div>
</ul>
<!-- -----Bloc Principal----- -->
<div id="corps">
<div id="contenu">
<!-- Ici on mettra le contenu principal de la page -->
<h1 id="accroche">Diagnostic et apport de solutions<br />pour optimiser le potentiel énergétique<br />de votre construction<br /><br /></h2>
<h2>--- ----- ---- ---- peut intervenir :</h2>
<ul>
<li>dès l’achat d’un terrain,</li>
<li>dès l’avant-projet de construction en collaboration avec la maîtrise d’œuvre,</li>
<li>après l’achat d’un bâtiment,</li>
<li>à l’occasion d’une rénovation, d’une restructuration,</li>
<li>lors de la rencontre d’une problématique (sensation de conflit interne au bâtiment)</li>
</ul>
<p>
J’interviens pour l’habitat, l’entreprise et les locaux commerciaux.
Les conseils du praticien ---- ---- se font toujours dans le respect des goûts de ou des habitants. Ils prennent également en compte les possibilités financières de chacun. Réalisme et esthétisme vont de pair avec le ---- ---- que je pratique.<br /><br />
Nouvellement installée dans la région de Nantes, j’interviens principalement dans l’Ouest, sur Paris et l’île de Ré.<br /><br />
N’hésitez pas à me contacter
</p>
</div>
</div>
<div id="pied_de_page">
<!-- Enfin, on mettra en bas de la page -->
<p>Copyright "xxxxxxxxxxxx.com" 2006, tous droits réservés</p>
</div>
</body>
</html>
Code CSS
@charset "iso-8859-1";
body
{
width: 760px;
margin: auto; /* Pour centrer la page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur.*/
margin-bottom: 20px; /* Idem pour le bas du navigateur */
}
/*------ L'en-tête ------*/
#en_tete
{
width: 760px;
height: 140px;
background-image: url("images/banniere.gif");
background-repeat: no-repeat;
}
/* ------ Le corps de la page ------*/
#corps
{
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
background-image: url("images/motif1.gif");
background-repeat: repeat-y; /* Couleur de fond qui se répètera verticalement */
}
#contenu
{
margin-top: 10px;
margin-left: 180px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
margin-right: 50px;
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
}
/* ------- Le pied de page ------ */
#pied_de_page
{
width: 760px;
height: 40px;
background-image: url("images/pied.gif");
background-repeat: no-repeat;
}
#pied_de_page p
{
margin:0;
padding-top: 13px;
font-family: "Verdana", Arial, Arial Black, serif;
font-size: x-small;
text-align: center;
}
/* -------- Le menu -------- */
ul#menu
{
float: left;
padding-left: 13px;
padding-top: 5px;
list-style-type: none;
}
.menu_haut
{
background-image: url(images/menu_haut.gif);
background-repeat: no-repeat;
height: 15px;
width: 140px;
font-size: 1px;
}
ul#menu li a
{
display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
width: 140px ;
line-height: 20px ;
color: #000 ;
font-family: "Verdana", Arial, Arial Black, serif;
font-size: 0.9em;
text-align: center;
text-decoration: none ;
background: url(images/bouton_menu.gif) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
ul#menu li a:hover
{
background: url(images/bouton_menu.gif) no-repeat 0 -20px ; /* Et ici on décale l'image du background de 20px vers le haut pour laisser apparaître la 2eme partie de l'image */
}
ul#menu li#blanc
{
width: 140px ;
background: url(images/menu_milieu_sans_lien.gif);
background-repeat: repeat-y;
}
.menu_bas
{
background-image: url(images/menu_bas.gif);
background-repeat: no-repeat;
height: 15px;
width: 140px;
font-size: 1px;
}
.menu_contact
{
margin-top: 10px;
width: 140px ;
height: 80px;
background: url(images/contact.gif);
}
/* ------- Formatage du texte ------- */
#contenu h1#accroche
{
text-align: center;
font-family: "Trebuchet MS", Verdana, Arial, Arial Black, serif;
font-size: 1.55em;
}
#contenu h1
{
font-family: "Trebuchet MS", Verdana, Arial, Arial Black, serif;
font-size: 1.4em;
}
#contenu h2
{
font-family: "Trebuchet MS", Verdana, Arial, Arial Black, serif;
font-size: 1.1em;
}
#contenu p
{
font-family: "Trebuchet MS", Verdana, Arial, Arial Black, serif;
}
#contenu ul
{
font-family: "Trebuchet MS", Verdana, Arial, Arial Black, serif;
list-style-type: none;
list-style-image: url("images/puce1.gif");
}
Donc voilà si vous avez une idée de souci, cela m'interesse.
Merci beaucoup
Modifié par Hydrax (06 Mar 2007 - 17:39)
) ça marche.