18041 sujets

Questions générales et questions de débutants

[resolu] Tuto design complet avec 2 col de même hauteur

Salut,

j'ai appliqué le tuto a un site web.(voir le site) Et le résultat est tres satisfaisant dans IE7 et FF.

Mais dans IE6 j'ai 2 problèmes :

1. la page ne fait pas toute la hauteur. La hauteur varie en fonction de la longeur du texte.

2. le footer a des réactions un peu bizzare :
- il ecrase le texe de #content sur certaines pages (par exmple sur celle ci)
- on voit le font de #container apparaitre au bas (petite ligne jaune de 1 pixel)

voici mon code : 


html, body {height:100%; margin:0;}
body { background-color:#F3F2EF;}
#container {width:1004px;background:url(../img/css/back_center.jpg) repeat-y top right #EBEAE4; min-height:100%; margin: 0 auto; position:relative;}
#header {width:100%;height:91px; background:url(../img/css/back_header.png) no-repeat top left;}
#center {padding-bottom:50px; overflow:auto; }
#content {float:left; width:618px; padding:30px 35px 10px 114px;}
#rightcol {float:right; width:237px;}
#footer {clear:both; width:100%; bottom:0; position:absolute;}

body,p,ul,h3,h2,h4 {font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#000;}
h1,h2,h3,h4,p {margin:0;padding:0;}

/* Header */
#header h1 {left:108px; top:13px; position:absolute; }
#header h2 {color:#FFFFFF; font-size:16px; top:55px; left:110px; position:absolute;}

/* Content */
#content {background:url(../img/css/back_content.jpg) no-repeat top left #F6B741;}
#content img.right {float:right; padding:0 8px;}
#content ul {list-style-image:url(../img/css/bullet_content.gif);}
#content li {padding-bottom:8px;}

#news, #faq {margin-bottom:20px;}

#faq h4 {padding:5px; border-bottom:1px solid #FDC847; margin:0 0 15px; font-size:14px;}

/* faq */
h3 {margin:2px 0; padding:4px 0; border-bottom:1px dashed #FDC847;}
h3 a {color:#000000;}
h3 a:hover {color:#C31748;}

/* Menu */
#menu dl, #menu dt, #menu dd, #menu ul, #menu li {margin:0;padding:0;list-style-type:none;}
#menu {width:228px; padding-left:2px;}
#menu dt {cursor:pointer;margin:2px 0; height:20px; line-height:20px; padding-left:15px; font-weight:bold;
border:1px solid #D3D0CA; background:url(../img/css/li_menu.jpg) repeat-x;color: #615F5A;}
#menu dd {border:1px solid #D3D0CA;}
#menu li {background:#fff; padding-left:15px; color: #615F5A;}
#menu li a, #menu dt a {color:#615F5A;text-decoration:none;display:block;border: 0 none;height:100%;}
#menu li a:hover {background:#FDC847;}
#menu dt a:hover {background:#EBEAE5;}
#menu li ul a {cursor: pointer;}

/* Footer */
#footer {background:url(../img/css/back_footer.jpg) no-repeat bottom left; padding-bottom:10px; margin-top:10px; position:absolute; width:100%; bottom:0;}
#footer p {font-size:10px; padding-left:95px;}


et la correction pour IE6


body {position:relative;}
#container { height:100%;}
#content {display:inline;}
#center {overflow:visible; height:1%;}


et un resumé du code HTML 


<body>
<div id="container">
  <div id="header">
    <h1>Image</h1>
    <h2>texte</h2>
  </div>
  <div id="center">
    <div id="content">
contenu    
</div>
    <div id="rightcol">
menu de gauche  </div>
  <div id="footer">
    <p>footer</p>
  </div>
</div>
</body>


Le site utilise un menu deroulant a droite (tuto Un menu déroulant en CSS et XHTML), je ne sais pas si ca peut avoir un impact sur le reste du design.

Merci de votre aide Smiley smile
Modifié par celia_ccs (16 Jan 2007 - 10:36)
Salut.

C'est sans doute à cause de ceci : 
<!--[if lt IE 6]>
<link rel="stylesheet" media="screen" type="text/css" title="corrections IE" href="css/ie_supplements.css" />
<![endif]-->
Les commentaires conditionnels ne s'appliquent qu'à IE strictement inférieur à IE 6, pour le moment Smiley smile

Remplace IE 6 par IE 7, pour commencer Smiley cligne
Sujet clos
Aller à