Bonjour
voila je suis en tain d'apprendre à réalisé un site avec CSS mais la je rencontre une problématique avec la compatibilité avec IE6 ET IE7 en faite le
sur mozilla tout les bloc sans a leur place mais quand je vis sur IE les blocs disparu ou et ils ne sont plus a leur place voila le lien pour voir http://lorractu.idev-hosting.info/
pour les feuille de style c'est main.css voila le code
a écrit :

body {
margin: 0px 0 0;
font: .70em "Helvetica", Arial, Sans-Serif;
background-image: url(../images/bg.gif);
background-repeat: repeat-x;
}
h1 { font-size: 2.3em; }
h2 { font-size: 1.8em; color: #5c5b57; }
a { color: #960a0d; }
a:hover { color: #960a0d; text-decoration: none; }
img { border: 0; }
.red { color: #960a0d; }
.grey { color: #5c5b57; }
p { font-size: 1.2em; color: #5c5b57; }

#header {
width: 995px;
height: 235px;
margin: 0 auto;
background-image: url(../images/top.jpg);
}
#wrap, wrap a {
width: 995px;
background: #fff url;
margin-right: auto;
margin-left: auto;
padding-left: 0px;
color: #960a0d;
padding-top: 9px;
}
#header #logo {
width: 995px;
height: 133px;
background:transparent url(../images/logo.png) repeat scroll 0%;
background-repeat: no-repeat;
background-position: 0px 24px;
}
#header #pub {
width: 995px;
height: 70px;
background-image: url(../images/Banniere_animee.gif);
background-repeat: no-repeat;
background-position: 300px 5px;
padding-top: 9px;
}
#header #recherche {

background:transparent url(../img/elements/dotted_vertical.gif) repeat-y scroll 0%;
float:right;
padding:20pt 0pt 14px 13px;
}
#header #header #recherchebis {

background:transparent url(../img/elements/dotted_vertical.gif) repeat-y scroll 0%;
float:right;
padding:20pt 0pt 14px 13px;
}
#header #flashnews {
color:#083266;
font-size:1em;
left:469px;
position:absolute;
text-transform:uppercase;
top:184px;
width: 719px;
}
#header #mise_jour {
clear:both;
color:#083266;
display:block;
font-size:1em;
font-weight:bold;
margin:3px 0pt 0pt 10px;
width:220px;
position:absolute;
left: 230px;
top: 181px;
}
.nav{
color: #960a0d;
padding-right: auto;
font-size: 14px;
}
.nav a{
color: #960a0d;
text-decoration: none;
padding-left: 9px;
padding-right: 9px;
}
.col-left {
float: left;
width: 476px;
border:1px solid #CCCCCC;
height:auto;
padding:0pt 10px 0pt 10px;
}
.col-middle {
float: left;
width: 120px;
padding-top: 52px;
padding-right: 20px;
border:1px solid #CCCCCC;
height:auto;
padding-left:10px;
}
.col-right {
float: left;
width: 308px;
border:1px solid #CCCCCC;
padding-top: 52px;
padding-right: 20px;
height:auto;
padding-left:10px;
}
.footer {
padding-top: 110px;
background-image: url(../images/bgFooter.gif);
background-position: bottom;
height: 50px;
background-repeat: repeat-x;
color: #7a7a77;
clear: both;
margin-bottom: 0px;
width: 995px;
margin: 0 auto;
}
.footer a { color: #7a7a77; text-decoration: none;}


et pour la feuille de style du menu vloia le code
a écrit :

ul#navigation-1
{
margin:0;
padding:1px 0px;
list-style:none;
width:932px;
height:21px;
font:normal 8pt verdana, arial, helvetica;
position:absolute;
top: 210px;
left: 223px;
}
ul#navigation-1 li
{ margin:0; padding:1; display:block; float:left; position:relative; width:148px; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:transparent; color:#960a0d; width:148px; height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
{ padding:4px 0; display:block; text-align:ceter; text-decoration:none; background:transparent; color:#960a0d; width:147px; height:13px; border-left:1px solid #960a0d; border-right:1px solid #960a0d; }

ul#navigation-1 li ul.navigation-2
{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
{ display:block; }
ul#navigation-1 li ul.navigation-2 li
{ width:146px; clear:left; width:146px; }

ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
{ clear:left; background:#ffffff; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3
{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
{ display:block; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
{ background:#ffffff; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
{ background:#ec454e; }
ul#navigation-1 li ul.navigation-2 li a span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }
ul#navigation-1 li ul.navigation-2 li:hover a span,
ul#navigation-1 li ul.navigation-2 li a:hover span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }


Merci d'avence pour votre aide Smiley smile
mon problème est réglé c'était une histoir de <br> qui traine Smiley sweatdrop Smiley langue
Modifié par fox54 (13 Jan 2008 - 09:30)