Pbe de bloc DIV bas de page qui decale

Posté par

terreazur, le mardi 16 mai 2006 à 22:28:36

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>

Répondre à terreazur Signaler ce message aux modérateurs Aller au dernier message

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Wale, le mercredi 17 mai 2006 à 11:00:41

Bonjour.

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

Répondre à Wale

Posez votre question Répondre

Trucs & astuces pertinents trouvés dans la base de connaissances

12/01 15h04	[Blogs] Choisir un hébergeur de blog et créer son blog	Blogs
04/09 10h31	[Windows] Windows ne s'éteint plus	Windows
16/08 21h40	Choisir une distribution Linux	Distributions
15/02 16h15	[Vidéo] Décalage du son et de l'image d'un fichier vidéo (Divx)	Vidéo
14/03 20h10	Créer une base de données sous Ingres	Ingres

Plus d'astuces sur « Pbe de bloc DIV bas de page qui decale »

Discussions pertinentes trouvées dans le forum

12/04 18h50	Blocage de la page de démarrage sous xp	13
09/03 11h47	Pc bloqué a la page d'accueil!help!!	5
06/02 23h49	Mon pc se bloque sur la page de memarrage	1
11/01 10h54	PC démarre très mal et se bloque à chaque pag	39

Plus de discussions sur « Pbe de bloc DIV bas de page qui decale »

Logiciels pertinents trouvés dans les téléchargements

	AdBlock Plus - AdBlock Plus est l'une des extensions classiques de Firefox ,celui-ci bloque déjà en standard les fenêtre popup: AdBlock va...	Catégorie: Extensions Firefox Licence: Open Source
	Virtual Magnifying Glass - Virtual Magnifying Glass est une loupe gratuite et libre pour les système Windows et Linux. Très simple d'emploi, elle est...	Catégorie: Loupe Licence: Freeware/gratuit
	Mouseless Browsing - Cette extension Firefox permet de naviguer dans les pages web sans utiliser la souris ! C'est utile si vous avez un...	Catégorie: Extensions Firefox Licence: Freeware/gratuit
	Page Saver Basic - Les outils de capture d'écran se limitent à la capture de la zone visible de l'écran. Parfois il est nécessaire d'avoir une...	Catégorie: Capture Licence: Freeware/gratuit

Plus de logiciels gratuits sur « Pbe de bloc DIV bas de page qui decale »

Produits relatifs

Takara DIV95	Catégorie: Lecteur DVD / Enregistreur DVD de salon	379.99 € Cdiscount
Takara DIV74	Catégorie: Lecteur DVD / Enregistreur DVD de salon	129.50 € Pixmania
Takara DIV102	Catégorie: Lecteur DVD / Enregistreur DVD de salon	147.52 € Cdiscount
Konica Minolta PagePro1350E	Catégorie: Imprimante	148.33 € Amazon.fr

Plus de produits sur « Pbe de bloc DIV bas de page qui decale »