Bah en fait , mon probleme est resolu ,j'avais un "width:.len", je l'ai changé par "width:auto" et ca marche.
mais j'en ai un autre , l'alignement du menu
Mon probleme est dans head2, si tu veut voir a koi ca ressemble , c'est ici : http://annonces.rogerstudio.com/test.php
j'alligne mon menu a 200px vers la droite (par rapport au debut) mais IE l'aligne apparememtn par rapport a l'autre menu, ducoups, la page est plus grande.
si tu veut aller voir , essai firefox et apres IE.
Alors , mon fichier CSS : /* CSS Document */
body {
margin: 0;/* sans marges, la page sera collée aux bords */
font-family: verdana, arial, sans-serif; /* on définit la police de base dans la page */
font-size: 12px; /* on définit la taille de police de base dans la page */
background-color:#EAE5DC;
font-weight:100;
}
.head1 {
background-image: url('imgs/header.gif');
background-repeat:repeat-x;
height: 100px;
}
.head2 {
position:fixed;
float:left;
padding-left:200px;
padding-top:77px;
}
.logo {
float: left; /* alignement du logo à droite */
margin-left: 10px; /* placement du logo dans son conteneur, head1 */
margin-top: 0px;
border: 0;
}
.gauche {
position:absolute;
left:0; /* on place le bloc gauche à gauche en position absolue */
width: 180px;
border-right:1px solid #765;
border-bottom:1px solid #765;
}
.gauche h1
{
background:url(imgs/barre.gif);
background-repeat:repeat-x;
color:#330000;
font-size:14px;
font-weight:700;
text-align:center;
}
.gauche h6
{
font-size:10px;
color:#000000;
font-weight:100;
text-align:center;
margin:5px;
}
.gauche ul
{
font-size:10px;
text-indent:3px;
font-size:12px;
list-style-image: url("imgs/puce.gif"); /* On change l'apparence des puces */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
font-weight:100;
}
.gauche a
{
color:#0033CC;
text-align: center;
margin:0px;
margin-bottom:5px;
font-size: 10px;
font-weight:100;
}
.gauche a:visited
{
color:#993366;
text-align: center;
margin:0px;
margin-bottom:5px;
font-size: 10px;
font-weight:100;
}
.gauche a:hover
{
color:#000000;
font-weight:bolder;
background-color:#D9B0B1;
}
.identform
{
text-align:center;
}
.identform a
{
color:#0033CC;
text-align: center;
margin:0px;
margin-bottom:5px;
font-size: 10px;
font-weight:100;
}
.identform a:visited
{
color:#0033CC;
text-align: center;
margin:0px;
margin-bottom:5px;
font-size: 10px;
font-weight:100;
}
.identform a:hover
{
color:#000000;
font-weight:bolder;
background-color:#D9B0B1;
}
.textboxmenu
{
text-align:center;
color:#000000;
font-weight:100;
background-color:#DFC9C4;
width:100px;
font-size:10px;
}
.textboxarea
{
color:#000000;
font-weight:100;
background-color:#DFC9C4;
font-size:10px;
}
/**************** MENU HAUT **********************/
.menuhaut{
float:left;
width:100%;
font-size:93%;
line-height:normal;
}
.menuhaut ul
{
margin:0;
padding:0px 0px 0;
list-style:none;
}
.menuhaut li
{
float:left;
background:url("imgs/left_both.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
border-bottom:1px solid #765;
}
.menuhaut a
{
float:left;
display:block;
/* width:.1em;*/
width:auto;
background:url("imgs/right_both.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
.menuhaut > ul a {width:auto;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.menuhaut a {float:none;}
/* End IE5-Mac hack */
.menuhaut a:hover {
color:#333;
}
#home #nav-home, #news #nav-news,
#products #nav-products, #about #nav-about,
#contact #nav-contact {
background-position:0% -150px;
border-width:0;
}
#home #nav-home a, #news #nav-news a,
#products #nav-products a, #about #nav-about a,
#contact #nav-contact a {
background-position:100% -150px;
padding-bottom:5px;
color:#333;
}
.menuhaut li:hover, .menuhaut li:hover a {
background-position:0% -150px;
color:#333;
}
.menuhaut li:hover a {
background-position:100% -150px;
}
.centre {
margin-left: 180px; /* on place le bloc centre par rapport à la largeur du bloc gauche */
font-weight:100;
vertical-align:top;
}
.centre h1
{
background-image:url(imgs/centreh1.gif);
background-repeat:repeat-x;
font-size:18px;
color:#660066;
text-align:left;
text-indent:20px;
margin:0;
padding:0;
}
Et mon fichier test.php <html>
<head>
<title>mon site</title>
<link href="design.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="head1">
<img src="imgs/logo.gif" class="logo" alt="logo" />
<div class="head2"><div class="menuhaut" id="about"><ul>
<li ><a href="">Mon compte</a></li>
<li ><a href="#">Chercher</a></li>
<li ><a href="">Acheter une annonce</a></li>
<li id="nav-home"><a href="#">Nouvelle annonce</a></li>
<li id="nav-about"><a href="#">Toutes les annonces</a></li>
</ul></div>
</div></div>
<div class="gauche"><? include "menu.php";?></div>
<div class="centre">
<? include "accueil.php"; ?>
</div>
</body>
</html>