28173 sujets

CSS et mise en forme, CSS3

Bloc pied de page et conteneur décalés

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. 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.

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">
@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">&nbsp;</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">&nbsp;</p>
        <p align="center" class="Style8">Menu n&deg; 1</p>
        <p align="center" class="Style8">Menu n&deg;2</p>
        <p align="center" class="Style8">* * * * * *</p>
        <p align="center" class="Style8">Cr&eacute;ation   </p>
        <p align="center" class="Style8">&nbsp;</p></td>
    </tr>
  </table>
  <p>&nbsp;</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">&nbsp;</p>
        <p class="Style8">Un peu de texte </p>
        <p class="Style8">Menu n&deg; 3</p>
        <p class="Style8">Menu n&deg; 4</p>
        <p>* * * * * *   </p>
        <p>&nbsp;</p>
      </div></td>
    </tr>
  </table>
    <p>&nbsp;</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">&nbsp;</p>
        <p class="Style8">Menu n&deg; 5 </p>
        <p class="Style8">Menu n&deg; 6</p>
        <p class="Style8">Menu n&deg; 7</p>
        <p class="Style8">Etc </p>
        <p class="Style8">&nbsp;</p>
        <p class="Style8">&nbsp;</p>
        <p class="Style8">test</p>
        <p class="Style8">&nbsp;</p>
        <p class="Style8">test</p>
        <p class="Style8">&nbsp;</p>
        <p class="Style8">&nbsp;</p>
        <p class="Style8">test</p>
        <p class="Style8">&nbsp;</p>
        <p class="Style8">&nbsp;</p>
        <p class="Style8">&nbsp;</p>
        <p class="Style8">&nbsp;</p>
        <p class="Style8">test</p>
        <p class="Style8">&nbsp;</p>
        <p class="Style8">test</p>
        <p class="Style8">&nbsp;</p>
      </div></td>
    </tr>
  </table>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</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">&nbsp;</p>
  <p class="Style8"><img src="fraise.jpg" alt="" width="372" height="253" /></p>
  <p class="Style8">&nbsp;</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&eacute;gales | Conditions G&eacute;n&eacute;rales de vente</span></p>
 <p align="center"><span class="Style14">Nos engagements | Mon Panier | Mon Compte | Aide </span></p>
</div>
</div>
</body>
</html>
Sujet clos
Aller à