28220 sujets

CSS et mise en forme, CSS3

[Résolu]Problème d'affichage avec Internet Explozer

Salut à tous,
sous FF, le bloc de texte (encadré en blanc) est au centre, et l'image flotte à droite; sous IE, le bloc de texte est sous l'image, qui flotte à droite...une idée?
Merci d'avance!

Le lien:

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

La css:


.titre {background: transparent; 
width: 5em;
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: 25px;
padding-bottom: 15px;

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

.gauche {
background: transparent;
font-family :Trebuchet MS, Verdana, Arial, Helvetica, Courier, sans-serif;
position: absolute; top: 8em; left: 0;
padding: 1em;
font-size: 100%; 
 color: #ffcc66; 
width: 10em;
}

.droite {
background: transparent;
font-family :Trebuchet MS, Verdana, Arial, Helvetica, Courier, sans-serif;
font-size: 100%;
padding-left: 1em;
 color: #ffffcc; 
float: right;
width:38%;

}

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

Le html:

<body>
<div class="titre"> Les réveils </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="origine.html" class="lien1">Les origines de Jaz</a> <br />
  <a href="photos.html" class="lien1">Galerie de photos</a> <br />
  <a href="publicite.html" class="lien1">La publicité</a> <br />
  <a href="tirages.html" class="lien1">Les "tirages limités"</a> <br />
  <a href="divers.html" class="lien1">Divers objets Jaz</a> <br />
  <a href="contact.html" class="lien1">Ecrivez-moi!</a> <br />
  <a href="liens.html" class="lien1">Liens</a>
   </div>


<div class="droite">
<img src="image/docs/montage.jpg" width="290" height="291" alt="La chaîne de montage en 1954" title="La chaîne de montage en 1954" />   
</div>

<div class="corps">
Plusieurs matières ont été employées pour l'habillage des réveils Jaz.
<p class="grosretrait">
Les plus communément employées sont:
</p>
 <ul class="sans">
 <li><a href="metal.html" class="lien1">Le métal</a></li>
<li><a href="bakelite.html" class="lien1">La bakélite</a></li>
<li><a href="bois.html" class="lien1">Le bois</a></li>
<li><a href="plastique.html" class="lien1">Le plastique</a></li>
<li><a href="cuir.html" class="lien1">Le cuir</a></li>
<li><a href="ceramique.html" class="lien1">La céramique</a></li>
<li><a href="marbre.html" class="lien1">Le marbre</a></li>
</ul>
</div>

<div class="pied">
Ce qui va sans dire va encore mieux en le disant. Je précise donc que <strong> les photos affichées sur ce site ne sont pas libres de droit</strong>, et que si vous souhaitez les utiliser, la moindre des corrections consiste à en faire la demande. Cette précision est malheureusement nécessaire, compte tenu du nombre de personnes relativement important utilisant ces photos pour illustrer leur vente sur un site d'enchères en ligne.
</div>


</body>

Modifié par bouquins (04 Apr 2005 - 13:35)
bonjour,

pardonne la question mais que veux tu comme rendu ? le premier, le second, ou un autre completement différent ( style l'image a droite du cadre.. cadre en entier)

je demande ça parceque I.E. et les float c'est pas le top.

Donc pour l'image, plutot que la mettre en float: right; tu pourrais la mettre en margin-right: 0; en esperant que tout ça rentre sur une meme ligne
Modifié par ganou66 (04 Apr 2005 - 11:12)
salut,

si j'ai bien compris tu as le menu fixe et le corps dynamique...

à mon avis tu devrais positionner le menu et la photo en absolu avec le contenu entre les deux qui reste fluide; du genre:


#titre { /*Les réveils*/
text-align:center;
margin:0 0 30px 0;
}
#gauche {/*menu*/
position:absolute;
left:10px;
width:190px;
margin:30px 0 0 0;
}
#corps {/*contenu*/
margin:0 350px 0 190px;
}
#droite {/*photo*/
position:absolute;
right:0px;
width:350px;
}
#pied {
text-align:justify;
margin:100px 40px 0 190px;
}


html:

<body>
<div id="titre"> Les réveils
</div>

<div id="gauche">
<a href="index.html" class="lien1">Accueil</a> <br>
<a href="collection.html" class="lien1">Ma collection</a> <br>
<a href="origine.html" class="lien1">Les origines de Jaz</a> <br>
<a href="photos.html" class="lien1">Galerie de photos</a> <br>
<a href="publicite.html" class="lien1">La publicité</a> <br>
<a href="tirages.html" class="lien1">Les "tirages limités"</a> <br>
<a href="divers.html" class="lien1">Divers objets Jaz</a> <br>
<a href="contact.html" class="lien1">Ecrivez-moi!</a> <br>
<a href="liens.html" class="lien1">Liens</a>
</div>

<div id="droite">
<img src="montage.jpg" alt="La chaîne de montage en 1954"
 title="La chaîne de montage en 1954" height="291" width="290"> </div>
 <div id="corps">Plusieurs matières ont été employées pour l'habillage des réveils Jaz.
<p>Les plus communément employées sont:
</p>
<ul>
  <li><a href="metal.html" class="lien1">Le métal</a></li>
  <li><a href="bakelite.html" class="lien1">La bakélite</a></li>
  <li><a href="bois.html" class="lien1">Le bois</a></li>
  <li><a href="plastique.html" class="lien1">Le plastique</a></li>
  <li><a href="cuir.html" class="lien1">Le cuir</a></li>
  <li><a href="ceramique.html" class="lien1">La céramique</a></li>
  <li><a href="marbre.html" class="lien1">Le marbre</a></li>
</ul>
</div>

<div id="pied">
Ce qui va sans dire va encore mieux en le disant. Je précise donc que  les photos affichées sur ce site ne sont pas libres de droit, et que si vous souhaitez les utiliser, la moindre des corrections consiste à en faire la demande. Cette précision est malheureusement nécessaire, compte tenu du nombre de personnes relativement important utilisant ces photos pour illustrer leur vente sur un site d'enchères en ligne.
</div>
</body>


Avec ça, ça marche sous gecko et ie
Modifié par alex_br (04 Apr 2005 - 12:10)
Salut Alex,

merci pour l'astuce; je voudrais aussi que la photo de droite puisse se "coller" vers le texte de gauche lquelle que soit la résolution; c'est-à dire qu'en 1024*768, la photo est à droite du texte central, mais assez éloignée; et en 800*600, la photo reste à droite du texte, mais collée contre lui...
Re,

le contenu central est fluide: il se trouvera toujours à la même distance de la photo (et inversement...); pour t'en convaincre ajoute:


border:1px solid #000;

dans le #corps.

La différence entre 1024*768 et 800*600 est que dans le second cas le texte du contenu central est plus dense (puisque le div est moins large...) mais dans les 2 cas la photo est à même distance.

Maintenant si tu veux densifier ton texte en 1024*768 pour donner l'impression que ta photo est plus proche il faut agrandir la largeur de #droite:


#droite {/*photo*/
position:absolute;
right:0px;
width:400px;
}


mais attention ton contenu central sera encore plus sérré en 800*600...
Re Alex,

désolé, mais lorsque je rétrécis la fnêtre, la photo de droite passe au-dessus du texte...je voudrais qu'elle le "comprime", afin qu'il reste lisible en entier, même dans une petite colonne...
a écrit :
désolé, mais lorsque je rétrécis la fnêtre, la photo de droite passe au-dessus du texte...je voudrais qu'elle le "comprime", afin qu'il reste lisible en entier, même dans une petite colonne...


impossible, que ce soit avec ie ou gecko... et même en 800*600 la photo ne se superpose pas au texte... (peut-être en 640*480, mais bon....)
Modifié par alex_br (04 Apr 2005 - 21:12)
Ben apparemment ça marche pour moi: il faut en fait reprendre ma css du debut, et placer le div contenant l'image dans le div "corps"...et elle flotte bien à droite, sans passer dessous, et sans manger le texte; meme sous Exploser!!
J'ai le même résultat que chez toi...c'est à dire que ton adresse reproduit ce que je souhaite, et j'ai réussi à faire de même de mon côté!! Merci!!
Sujet clos
Aller à