28220 sujets

CSS et mise en forme, CSS3

[Résolu]Problème lors du redimensionnement sous IE

Salut à tous,

j'ai expurgé le HTML.

Voici une page de mon site:

http://microsillon.free.fr/css/origine.html

Sous FF, quelle que soit la résolution, le titre reste en haut, le menu à gauche, et le texte central avec les images ne passe pas sous le menu. Avec IE, si la fenêtre est trop étroite, le texte central passe sous le menu de gauche...merci à nouveau de votre aide par avance.

ci joint la CSS:
/* CSS Document */
*{margin: 0;padding: 0;}
body {background-color: black;
} 

ul.sans 
{
list-style-type: none;
}

.titre {background: transparent; 
width: 700px;
font-family :Trebuchet MS, Verdana, Arial, Helvetica, Courier, sans-serif;
font-size: 120%; 
 color: #ffffcc;
text-align: justify;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 25px;
padding-bottom: 15px;

}

.corps {
background: transparent;
width: 50%;
height: 100%;
font-family :Trebuchet MS, Verdana, Arial, Helvetica, Courier, sans-serif;
font-size: 100%; 
 color: #ffffcc; 
text-align: justify;
margin-left: auto;
margin-right: auto;

}

.gauche {
background: transparent;
font-family :Trebuchet MS, Verdana, Arial, Helvetica, Courier, sans-serif;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
font-size: 100%; 
 color: #ffcc66; 
float: left;
width: 20%;
}

.droite {
background: transparent;
font-family :Trebuchet MS, Verdana, Arial, Helvetica, Courier, sans-serif;
font-size: 100%;
padding-top: 15px;
padding-bottom: 15px;
margin-right: 15px;
margin-left: 15px;
 color: #ffffcc; 
float: right;
width:45%;
}

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

.relief {font-family :Trebuchet MS, Verdana, Arial, Helvetica, Courier, sans-serif;
font-size: 100%; 
 color: #ffffcc; 
 text-decoration:underline;
 }
 
 .titre {font-family :Trebuchet MS, Verdana, Arial, Helvetica, Courier, sans-serif;
 font-size: 110%; 
 color: #ffffcc;
 padding-bottom: 5px;
padding-top: 5px; 
 }
 
 .titre2{font-family :Trebuchet MS, Verdana, Arial, Helvetica, Courier, sans-serif;
 font-size: 100%;
 font-variant: small-caps;
 color: #ffffcc;
 padding-bottom: 5px;
padding-top: 5px; 
}
 .retrait {font-family :Trebuchet MS, Verdana, Arial, Helvetica, Courier, sans-serif;
 font-size: 100%; 
 color: #ffffcc;
 text-indent: 2em;
 }
 .grosretrait{font-family :Trebuchet MS, Verdana, Arial, Helvetica, Courier, sans-serif;
 font-size: 100%; 
 color: #ffffcc;
 padding-bottom: 4px;
padding-top: 4px; 
 text-indent: 2em;
 }
 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 le HTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head> 

<title>Les origines de 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="origine.css" />
  
</head>

<body id="top">
<div class="titre">

Les origines de Jaz
</div>

<div class="gauche">
<a href="index.html" class="lien1">Accueil</a>
<br />
<a href="collection.html" class="lien1">Ma collection</a>
<br />
<a href="matiere.htm" class="lien1">Galerie de photos</a>
<br />
<a href="matiere.htm" class="lien1">Le côté technique</a>
<br />
<a href="matiere.htm" class="lien1">La publicité</a>
<br />
<a href="matiere.htm" class="lien1">Les "tirages limités"</a>
<br />
<a href="matiere.htm" class="lien1">Divers objets Jaz</a>
<br />
<a href="matiere.htm" class="lien1">Ecrivez-moi!</a>
<br />
<a href="matiere.htm" class="lien1">Liens</a>

</div>
<div class="corps">


 

 <div class="droite">
<img src="image/docs/jaz2.jpg" alt="premier réveil Jaz: le Classic" title="La dormeuse s'éveille au son du Jaz!" />
</div>

  
 Ici, le texte
  
 
   
</div>
<div class="pied">
Ce site est optimisé pour tous les navigateurs, à condition qu'ils ne datent pas de l'ère antédiluvienne. Cependant, devant l'incapacité chronique d'Internet Explorer à interpréter correctement
 les feuilles de style, je vous engage à opter pour un navigateur digne de ce nom: Firefox, <a href="http://www.mozilla-europe.org/fr/products/firefox/" class="lien1"> disponible ici.</a>

</div>


</body>
</html>

Modifié par bouquins (29 Mar 2005 - 09:17)
Salut,

1) Je n'ai pas lu ton code. Désolé mais il est trop indigeste, essaie de l'alléger et éditant ton post et en te limitant à l'eesentiel (ex. : le texte n'a aucune importance)
2) A priori, si ton menu gauche est flottant, il suffit que tu mettes à ta zone de contenu une marge gauche égale à la largeur du menu (padding compris)
3) tu mélanges les valeurs en px et en %. Attention : ça va te poser des problèmes dès que tu auras des calculs à faire (tiens comme celui de la marge par exemple : ça fait combien 20% + 15px ?)

Voilà j'espère que ça t'aidera
Sujet clos
Aller à