28220 sujets

CSS et mise en forme, CSS3

[Résolu]Disposition de blocs différente sous IE et FF

Salut à tous,

je souhaiterais que le bloc marqué "pied" se positionne sous les deux blocs de gauche et droite. Sous IE, ça fonctionne (bien qu'en redimensionnant la fenêtre, il fasse ni'importe quoi...), par contre, FF le positionne entre les deux blocs gauche et droite, mais pas dessous.

Pourriez-vous m'aider?

Merci d'avance!

Ici la CSS:



/* CSS Document */
*{margin: 0;padding: 0;}
body {background-color: black;
} 
#titre {background: transparent; 
width: 700px;
font-family :Trebuchet MS, Verdana, Arial, Helvetica, Courier, sans-serif;
font-size: 120%; 
 color: #ffcc66; 
text-align: justify;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 25px;
padding-bottom: 25px;
border-style: inset;
border-color: #ffcc66;
border-width: 5px;}

#corps {
background: transparent;
width: 700px;
font-family :Trebuchet MS, Verdana, Arial, Helvetica, Courier, sans-serif;
font-size: 100%; 
 color: #ffcc66; 
text-align: justify;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 25px;
padding-bottom: 25px;
border-style: inset;
border-color: #ffcc66;
border-width: 5px;
}

#gauche {
background: #333333;
font-family :Trebuchet MS, Verdana, Arial, Helvetica, Courier, sans-serif;

font-size: 100%; 
 color: #ffcc66; 
float: left;
width: 20%;
border-style: inset;
border-color: #ffcc66;
border-width: 5px;
}

#droite {
background: #333333;
font-family :Trebuchet MS, Verdana, Arial, Helvetica, Courier, sans-serif;
font-size: 100%; 
 color: #ffcc66; 
float: right;
width:20%;
border-style: inset;
border-color: #ffcc66;
border-width: 5px;
}

#pied {
background: transparent;
width: 700px;
font-family :Trebuchet MS, Verdana, Arial, Helvetica, Courier, sans-serif;
font-size: 100%; 
 color: #ffcc66; 
text-align: justify;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 25px;
padding-top: 25px;
border-style: inset;
border-color: #ffcc66;
border-width: 5px;
}

 a.lien1:link {
color: #ffcc66;
text-decoration: none;
}
a.lien1:visited {
color: #cccccc;
text-decoration: none;
}
a.lien1:hover {
color: #ff6600;
text-decoration: none;
}
a.lien1:active {
color: #ffcc66;
text-decoration: none;
}


Et là, le HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>
<HEAD> 

<TITLE>Collection de réveils Jaz</TITLE>
<META NAME="Keywords" CONTENT="jaz, Jaz, JAZ, REVEILS, reveil, réveil, REVEIL, réveils, reveils, collection, COLLECTION, BROCANTE, HORLOGERIE, horlogerie, pendules, bakelite, bakélite, brocante, marque Jaz, industrie horlogere">
<META NAME="Description" CONTENT="Collection de réveils, pendules et pendulettes Jaz, presentation de modèles anciens, conseils de restauration, échanges, achats">
<META NAME="Author" CONTENT="Jean-Stephane Vega">
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
href="accueil.css">
  
</HEAD>

<BODY>
<div id="titre">
<p>Bienvenue sur ce site, consacré à ma collection de réveils, pendules et pendulettes de marque Jaz.
<br>
il ne s'agit pas d'un site officiel de la marque, mais de celui d'un Jazeur désireux de faire partager sa passion.</p>
</div>

<div id="corps">
Corps
</div>

<div id="gauche">
<p>
<a href="pourquoi.htm" class="lien1">Ma collection</a>
</p>
<p>
<a href="matiere.htm" class="lien1">Galerie de photos</a>
</p>
<p>
<a href="matiere.htm" class="lien1">Le côté technique</a>
</p>

<p>
<a href="matiere.htm" class="lien1">La publicité</a>
</p>
<p>
<a href="matiere.htm" class="lien1">Les "tirages limités"</a>
</p>
<p>
<a href="matiere.htm" class="lien1">Divers objets Jaz</a>
</p>
<p>
<a href="matiere.htm" class="lien1">Ecrivez-moi!</a>
</p>
<p>
<a href="matiere.htm" class="lien1">Liens</a>
</p>
</div>

<div id="droite">
<p>
La galerie générique a été mise à jour.
</p>
<p>
Ce site présente à ce jour 110 réveils, 30 pendules et 15 pendulettes, tous détaillés.
</p>

</div>

<div id="pied">
Pied


</div>


</BODY>
</HTML>

Modifié par bouquins (26 Mar 2005 - 13:43)
Si tu veux absolument que le block soit en dessous tu peux utiliser le principe du spacer:



<div classe="spacer">&nbspc;</div>

avec une css :

.spacer {clear: both}


Sinon il y a beaucoup d'information que tu repettes dans toutes ta feuilles de style comme la police ou les bordure à utiliser. Tu devrais pour ça utiliser le selecteur * qui 'applique à tous les éléments de ta page, cela simplifirait beaucoup ta css.

De même pour les liens tu peux simplifier :

a.lien1 {
color: #ffcc66;
text-decoration: none;
}

a.lien1:visited {
color: #cccccc;
}
a.lien1:hover {
color: #ff6600;
}



FoW
Sujet clos
Aller à