28220 sujets

CSS et mise en forme, CSS3

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

Salut à tous,

quelle que soit la résolution, tout fonctionne sous FF; le texte du centre reste au centre. Par contre, avec IE, dès que je redimensionne la fenêtre en 800/600 par exemple, il me fait basculer mon bloc de texte du centre sous les menus...quelqu'un aurait-il une idée?

Merci!

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: #ffffcc;
text-align: justify;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 25px;
padding-bottom: 15px;
border-style: groove;
border-weight: 5px;

}

#corps {
background: transparent;
background-image: url(image/fond/jaseur3.png);
background-repeat: 
no-repeat;
background-position: 
 center;   
width: 400px;
height: 200px;
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-top: 15px;
padding-bottom: 15px;
}

#gauche {
background: #333333;
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: #333333;
font-family :Trebuchet MS, Verdana, Arial, Helvetica, Courier, sans-serif;
font-size: 100%;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px; 
 color: #ffffcc; 
float: right;
width:20%;
}

#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;
}

 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;
}


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

Bla bla
</div>
<div id="gauche">

<a href="pourquoi.htm" class="lien1">Ma collection</a>
<br>
<a href="pourquoi.htm" class="lien1">Histoire de Jaz</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 id="droite">

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

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


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>
Dernière mise à jour le 13 février 2005.
</p>

</div>




<div id="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, disponible ici.

</div>


</BODY>
</HTML>

Modifié par bouquins (26 Mar 2005 - 19:33)
Ton #corps central a une largeur spécifiée (width: 400px), qu'IE interprète comme une largeur minimale. D'où le passage de #corps sous les menus lorsque l'espace disponible est inférieur à 400px.
Je progresse: j'y avais pensé en postant, mais je me disais qu'IE ne serait pas assez stupide pour l'interpréter ainsi...
As-tu une solution, du genre faut-il que je passe en % au lieu des pixels?

Merci!
Tu peux effectivement passer en pourcentage. Mais en fait, tu pourrais aussi bien te passer de spécifier cette largeur : le texte central remplira l'espace entre les flottants. A moins que cette largeur ne soit nécessaire pour ton arrière-plan ?
Modifié par Laurent Denis (26 Mar 2005 - 19:09)
En fait non: j'ai juste besoin de placer une image en arrière-plan de ce bloc, derrière le texte. Donc en supprimant le "forçage" de la largeur, tout se passe bien.

Je te remercie!
Sujet clos
Aller à