Bonjour à tous,
Après un bon bout de temps à tester plusieurs solutions je me tourne vers vous.
Déjà, mon problème principal est le suivant :
- impossible de faire en sorte que mon clear:right; soit respecté sous IE6 et 7. C'est comme si il voulait absolument appliquer un clear:both; (je veux qu'il passe sous l'élément gauche mais qu'il se mette à la suite du droit)
- le fait d'ajouter un commentaire conditionnel pour IE6 et 7 fait disparaître sous ces même navigateurs ma barre #pre-header même en lui donnant le layout. Si j'enlève le commentaire, la barre réapparaît.
Je vous joins le code html, le css "normal" et le css conditionnel :
Merci d'avoir pris le temps d'arriver jusqu'ici !
Modifié par Padaweb (25 Apr 2012 - 11:57)
Après un bon bout de temps à tester plusieurs solutions je me tourne vers vous.
Déjà, mon problème principal est le suivant :
- impossible de faire en sorte que mon clear:right; soit respecté sous IE6 et 7. C'est comme si il voulait absolument appliquer un clear:both; (je veux qu'il passe sous l'élément gauche mais qu'il se mette à la suite du droit)
- le fait d'ajouter un commentaire conditionnel pour IE6 et 7 fait disparaître sous ces même navigateurs ma barre #pre-header même en lui donnant le layout. Si j'enlève le commentaire, la barre réapparaît.
Je vous joins le code html, le css "normal" et le css conditionnel :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Le Réseau</title>
<link type="text/css" rel="stylesheet" href="stylereseau.css" />
<!--[if lte IE 7]> <link type="text/css" rel="stylesheet" href="stylereseauIE.css <![endif]-->
</head>
<body>
<div id="pre-header">
<div id="conteneur">
<div id="marque-page">
<a href="#"><img alt="marque page" src="img/marque-page-header.png" /></a>
</div>
<div id="raison-sociale">
<p>Association loi de 1901 - 8/10 rue des blés 93210 La Plaine Saint-Denis</p>
</div>
<div id="menu-pre-header">
<ul id="menu-access">
<li><a href="#">Accueil</a> |</li>
<li><a href="#">FAQ</a> |</li>
<li><a href="#">Contact</a> |</li>
<li><a href="#">Plan du site</a> |</li>
<li><a href="#">Mentions légales</a></li>
</ul>
<div id="test">
<a href="#"><img alt="" src="img/logo-fb.png" /></a>
<a href="#"><img alt="" src="img/logo-tw.png" /></a>
</div>
</div>
<div id="header">
<a href="#"><img alt="marque page" src="img/logo-reseau.png" /></a>
<div id="espace-membre">
<p>Espace adhérents</p>
</div>
</div>
</div>
</div>
</body>
</html>/* Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
body {
background-color:#757474;
font-family:Arial, sans-serif;
font-size:11px;
color:black;
}
div#pre-header {
width:100%;
height:37px;
background: url(img/bkg-pre-header.png) 0 0 repeat-x;
}
div#conteneur {
width:1023px;
height:37px;
margin:0 auto;
}
#marque-page {
width:73px;
height:131;
float:left;
margin-left:50px;
}
#raison-sociale {
float:left;
margin-left:10px;
}
#raison-sociale p {
margin-top:15px;
font-family:Arial, Verdana, sans-serif;
font-size:9px;
color:white;
}
ul#menu-access {
float:left;
margin-top:12px;
}
ul#menu-access li {
display:inline;
list-style-type: none;
font-style:Arial, Verdana, sans-serif;
font-size:10px;
color:white;
}
ul#menu-access li a {
text-decoration:underline;
color:white;
}
ul#menu-access li a:hover {
text-decoration:none;
}
div#menu-pre-header {
float:right;
width:340px;
height:37px;
margin-right:20px;
text-align:right;
}
div#menu-pre-header a img {
margin-left:10px;
}
div#test {
float:right;
width:69px;
margin-top:4px;
}
/* ///HEADER/// */
div#header {
clear:right;
width:1023px;
height:104px;
background:url(img/bann-header.jpg) no-repeat;
}
div#header a img{
margin-left:10px;
margin-top:22px;
}
div#espace-membre {
float:right;
width:160px;
height:90px;
margin-right:20px;
margin-top:5px;
background-color:#f0f0f0;
border:solid 1px #ebebeb;
}
div#espace-membre p {
height:16px;
padding-left:5px;
padding-top:5px;
border-bottom:solid 1px #b2b2b2;
font-style:Arial, Verdana, sans-serif;
font-size:12px;
text-transform:uppercase;
color:black;/* POUR IE6 et 7 */
/* problème des float */
#marque-page,
#raison-sociale,
ul#menu-access,
div#menu-pre-header,
div#test,
div#espace-membre {display:inline; position:relative;}
input, button {overflow:visible;}
/* problème de layout */
div#pre-header,
div#header {zoom:1;}Merci d'avoir pris le temps d'arriver jusqu'ici !
Modifié par Padaweb (25 Apr 2012 - 11:57)
