Clear et float en pied de page ?

catseb · 15 Mai 2006

Bonjour a tous,

Je vous ai mis des couleurs (pas jolies mais bon) pour plus de lisibilté :

Le DIV gauche en bleu ne s'étend pas ou ne se réduit pas aux memes dimensions que le DIV Corps (en mauve). Ainsi si j etends l un ou l autre, ils se decalent au lieu de se redimensionner l un et l autre.

Ainsi sur l exemple disponible ici : Page test L'on voit que si j agrandis le DIV gauche, le DIV corps reste plus petit.

De plus, le DIV Pied de page (en vert) descend tres au dela de la fin des DIV superieurs (gauche et corps) alors qu il devrait arreter juste sous le dernier menu du DIV gauche.

Je me dis qu il doit y avoir un truc autour de position, float et clear mais je vois pas malgre pas mal de tests.

J attends donc l avis d un specialste pour me sortir de ce mauvais pas.

Merci a tous

Le code de la feuille css :

<style type="text/css" media="screen">
body {margin:10px;}
div.conteneur {background-color:#FFFFFF;}
div.banniere {background-color:#66FF33;height:100px;}
.logo {float:left; height:100px;}
.t {float:right;}
ul.menu {margin:5px; padding:0; font-family:Georgia, Times New Roman, Times, serif;height:20px;margin-left:auto; margin-right:auto; width:600px;}
.menu li {float:left; list-style-type:none; line-height:20px;}
.menu a {display:block;width:105px;margin:0 3px;text-align:center;color:#000000;text-decoration:none;font-size:0.8em;background-color:#00FFCC;font-weight:bold}
.menu a:hover {background-image:url(1058454356.gif);color:#006600; font-weight:bold; text-indent:26px;}
div.gauche {font-family:Georgia, "Times New Roman", Times, serif;width:140px;float:left;margin-bottom:-1.2em; background-color:#33CCFF;padding-left:5px;font-size:0.85em;}
.table {background-color:#FF6600)}
.cell {background-color:#FFFF33; border-bottom:1px solid #F7A60E; border-left:1px solid #F7A60E; border-right:1px solid #F7A60E;}
div.corps { position:relative; clear:right;font-family:Geneva, Arial, Helvetica, sans-serif;font-size:0.85em; margin-right:0;margin-left:150px;border-left:1px solid #666;padding:5px;background-color:#CCCCFF;}
div.pied { position:relative; clear:left;font-family:Verdana, Arial, Helvetica, sans-serif;width:100%;line-height:14pt;background-color:#66FF00; padding-left:0;} 
.tire {clear:both;padding:0 5px;display:block;}
h1, p{margin:0;}
.Style2 {
	font-weight: bold;
	color: #000000;
	font-family: Georgia, "Times New Roman", Times, serif;font-size: x-large;}
.Style3 {color: #006600;font-weight: bold;font-style: italic;font-family: Georgia, "Times New Roman", Times, serif;font-size: x-large;}
.Style4 {color: #006600}
.Style6 {font-size: medium}
.Style8 {font-family: Arial, Helvetica, sans-serif}
.Style14 {color: #FFFFFF;font-weight: bold;font-size: 11px;}

Le code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <title>ABCD</title>
<style type="text/css" media="screen">
_AT_import url(menuaccueil.css);
</style> 
<link rel="shortcut icon" href="favicon.ico" />          
<style type="text/css">
</style>
</head>

<body>
<div class="conteneur">
<div class="banniere">
  <p><img class="logo" src="f.gif" alt="G"/><img class="t" src="t.jpg" alt="F"/></p>
  <p align="left" class="pied"> </p>
  <p align="left" class="Style2 Style4">Titre 1</p>
  <p align="left" class="Style2 Style4">Sous titre </p>
</div>
<ul class="menu">
         <li><a href="#">Menu 1 </a></li>
            <li><a href="#">Menu 2 </a></li>
 	 <li><a href="#">Menu 3 </a></li>
 	 <li><a href="#">Menu 4 </a></li>
 	 <li><a href="#">Menu 5 </a></li>
  </ul>
<div class="gauche">
  <table width="135" border="0" cellspacing="0" cellpadding="1">
    <tr class="table">
      <td><div align="center" class="Style4"><strong>MENU 1 </strong></div></td>
    </tr>
    <tr>
      <td class="cell"><p align="center" class="Style8"> </p>
        <p align="center" class="Style8">Menu n° 1</p>
        <p align="center" class="Style8">Menu n°2</p>
        <p align="center" class="Style8">* * * * * *</p>
        <p align="center" class="Style8">Création   </p>
        <p align="center" class="Style8"> </p></td>
    </tr>
  </table>
  <p> </p>
  <table width="135" border="0" cellspacing="0" cellpadding="1">
    <tr class="table">
      <td><div align="center" class="Style4"><strong>MENU 2 </strong></div></td>
    </tr>
    <tr>
      <td class="cell"><div align="center">
        <p class="Style8"> </p>
        <p class="Style8">Un peu de texte </p>
        <p class="Style8">Menu n° 3</p>
        <p class="Style8">Menu n° 4</p>
        <p>* * * * * *   </p>
        <p> </p>
      </div></td>
    </tr>
  </table>
    <p> </p>
  <table width="135" border="0" cellspacing="0" cellpadding="1">
    <tr class="table">
      <td><div align="center" class="Style4"><strong>MENU 3</strong></div></td>
    </tr>
    <tr>
      <td class="cell"><div align="center">
        <p class="Style8"> </p>
        <p class="Style8">Menu n° 5 </p>
        <p class="Style8">Menu n° 6</p>
        <p class="Style8">Menu n° 7</p>
        <p class="Style8">Etc </p>
        <p class="Style8"> </p>
        <p class="Style8"> </p>
        <p class="Style8">test</p>
        <p class="Style8"> </p>
        <p class="Style8">test</p>
        <p class="Style8"> </p>
        <p class="Style8"> </p>
        <p class="Style8">test</p>
        <p class="Style8"> </p>
        <p class="Style8"> </p>
        <p class="Style8"> </p>
        <p class="Style8"> </p>
        <p class="Style8">test</p>
        <p class="Style8"> </p>
        <p class="Style8">test</p>
        <p class="Style8"> </p>
      </div></td>
    </tr>
  </table>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  </div>
<div class="corps">
  <p class="Style8">Corps du texte    </p>
  <p class="Style8">Corps du texte</p>
  <p class="Style8">Exemple de photo </p>
  <p class="Style8"> </p>
  <p class="Style8"><img src="fraise.jpg" alt="" width="372" height="253" /></p>
  <p class="Style8"> </p>
  <p class="Style8">Corps du texte    </p>
  <p class="Style8">Texte</p>
  <p class="Style8">Texte</p>
  <p class="Style8">Texte</p>
  <p class="Style8"><span class="Style8">Corps du texte </span></p>
  </div>
<div class="pied">
<ul class="menu">
         <li><a href="#">Menu 1 </a></li>
            <li><a href="#">Menu 2 </a></li>
 	 <li><a href="#">Menu 3 </a></li>
 	 <li><a href="#">Menu 4 </a></li>
 	 <li><a href="#">Menu 5 </a></li>
	</ul>
 <p align="center"><span class="Style14">Nous contacter | Mentions Légales | Conditions Générales de vente</span></p>
 <p align="center"><span class="Style14">Nos engagements | Mon Panier | Mon Compte | Aide </span></p>
</div>
</div>
</body>
</html>

Modifié 15 Mai 2006 par catseb

catseb · 15 Mai 2006

Voila, je vous redonne le bon code je vous avais pas fourni le bon :blush:

Desolé pour les precedents lecteurs

Merci

Connexion

Clear et float en pied de page ?

Sujets conseillés

catseb

catseb

Veuillez vous connecter pour commenter

Parcourir

Activité