Pbe de bloc DIV bas de page qui decale

Résolu/Fermé

terreazur Messages postés 4 Date d'inscription mardi 16 mai 2006 Statut Membre Dernière intervention 14 juin 2006 - 16 mai 2006 à 22:28
Wale - 17 mai 2006 à 11:00

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 : http://terreazur.ifrance.com 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;}


<!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">
@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>

A voir également:

Pbe de bloc DIV bas de page qui decale
Supprimer une page word - Guide
Word numéro de page 1/2 - Guide
Page d'accueil iphone - Guide
Traduire une page web - Guide
Formules excel de base - Guide

1 réponse

Réponse 1 / 1

Wale
17 mai 2006 à 11:00

Bonjour.

div.corps{ height: 800px }  /* IE uniquement */
.conteneur>.corps{ height: auto; min-height: 800px } /* tout le monde sauf IE */

Discussions similaires

[PIX] Commencer chaque poème sur une nouvelle page

[référencement] Ne pas être référencé

Chemin Logo du site de la Cité de l'espace

Discussions similaires

Newsletters