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
et pour la feuille de style du menu vloia le code
Merci d'avence pour votre aide
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