28221 sujets

CSS et mise en forme, CSS3

[Résolu] Différence interprétation IE/Mozilla sur positionnement...

Bonjour,

J'ai isolé un probleme que j'ai rencontré dans la mise en forme d'un site.

Voici l'url de la page en question: http://gilles.mabilais.free.fr/templates_Fr/test.htm

le body:
a écrit :

<body>
<div class="entete2">
<img src="../img/barre_orange.gif" width="215" height="5">
<div class="bloctext">bla bla bla bla bla bla bla bla</div>
<div class="blocimg"><img src="../img/28.jpg" width="80" height="28"></div>
</div>

<div class="entete2">
<img src="../img/barre_orange.gif" width="215" height="5">
<div class="bloctext">bla bla bla bla bla bla bla bla bla bla</div>
<div class="blocimg"><img src="../img/80.jpg" width="80" height="80"></div>
</div>

<div class="entete3">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
</body>


le code css attaché:
a écrit :

body {
margin: 10;
padding: 10;
font: 11px Arial, Helvetica, sans-serif;
}

.entete2 {
width:215px;
margin-bottom:40px;
}

.entete3 {
background-color:#39D93F;
height:100px;
width:215px;
margin-bottom:40px;
margin-top:20px;
}

/* sous-ensembles */

.bloctext {
width:135px;
margin-bottom:8px;
margin-top:5px;
float:left;
}

.blocimg {
width:80px;
height:80px;
margin-top:5px;
float:left;
}


Et enfin, l'exposé du probleme, à savoir le bloc vert qui "déborde" sur le bloc placé au dessus sous Firefox, alors que ça fonctionne comme je le souhaite sous IE.

Pouvez-vous m'éclairer sur mon erreur, afin de me permettre de pouvoir faire fonctionner tout ça sous firefox ?

Merci.
Modifié le 27 Jan 2005 - 21:32
Du calme gilou : tu n'as pas nécessairement une réponse sous 2h (bien que tu en aies parfois une en moins de 10mn). Sois patient.

Il y a des choses qui m'étonne dans le comportement en question : je comprend que le bloc image s'incruste sur le fond vert, puisque le bloc image est en float et pas le bloc vert. En revanche, j'aurais cru que le texte aurait suivi le même comportement. Smiley biggol

Si ton but est que le bloc vert soit sous le bloc image, il te suffit de le mettre en clear : both, afin qu'il ne puisse pas composer avec les éléments float.
Je suis on ne peut plus calme Smiley lol

Merci pour ta réponse déjà.

En utilisant la propriété clear, ça regle effectivement le probleme du bloc vert.
Je vais surement faire la première reponse a un topic, etje suis pas sur d'etre dans le sujet, même si le prob est résolu.

Tu sais qu'en mettant ceci

br#monbr { clear: left /ou/ right}

et en mettant ensuite dans ton code

<br id="monbr">

tu peux ainsi replacer le texte directement sous l'image sans avoir besoin de faire un nouveau bloc ? je dis ça, car je crois avoir vu que tu fais un bloc pour mettre ton texte sous l'image. (désolé si j'ai pas compris, ou lu trop vite). Enfin je dis ça, on sait jamais, ça peut servir, car ce que tu as fais est très proche de ce que je dis Smiley smile
En fait, je veux avoir le texte en face de l'image. Et mon probleme concernait un probleme dans l'affichage du bloc vert (entete3) qui débordait sur le bloc au dessus (entete2). C'est résolu (sans que je sache vraiment ce qui clochait avant, mais tant pis) avec l'utilisation de la propriété clear.

Par contre, ton idée ne va pas tomber dans l'oreille d'un sourd, puisque je vais pouvoir mettre à profit l'utilisation de ce principe Smiley cligne
De rien. Je l'utilise aussi pour mon site que je prépare tranquillement en aprenant les rudiments de la programmation un peu plus propre Smiley smile
Sujet clos
Aller à