28221 sujets

CSS et mise en forme, CSS3

Float et saut de ligne

Bonjour,

Je développe un forum conforme css et xhtml strict. Cependant je rencontre des problèmes notamment au niveau des floats et les sauts de lignes qui selon Internet explorer et firefox ne sont pas intéprétés pareils. Ainsi si j'aligne horizontalement plusieurs divs en float et qu'au dernier pour boucler je met un div avec la propriété clear: left ou both, sous firefox c'est parfait mais sous Internet explorer ça me rajoute un saut de ligne

J'ai bien cherché des astuces mais qu'en j'en trouvé certaines qui se rapprochaient de se que je voulais un autre problème apparaissait : Auriez vous une idée sur comment contrer ce problème car ma seule idée restante serait de réaliser deux feuilles de style à part afin d'ensuite détecter le naviguateur du client pour enfin inclure la feuille de style correspondante. Mais c'est beaucoup de travail (enfin...) mais surtout tout le monde n'a pas javascript d'ou possibilité d'avoir encore un problème avec la reconnaissance du naviguateur. Smiley ravi

Voila en espérant que quelqu'un aura la gentillesse de me répondre, merci d'avance. Je suis également disponible sur MSN (ouaibou_AT_msn.com). Ce qui est peut être mieux pour exposer mon problèmes si certains on le temps de me parler.

Cordialement,
Laurent
Ce forum a bien comme objectif, entre autre, l'entraide et la résolution de problèmes CSS des webmasters. A ce titre il me parait plus adapté de publier complètement la question ici plutôt que d'échanger par mails qui iraient priver la communauté de questions et solutions éventuellement pertinentes.

Tout ça pour dire : si tu pouvais publier un extrait de code qui expose le pb on ne serait pas obligé de jouer aux devinettes.

Je fais néanmoins une tentative :
Si la <div> sur laquelle tu places la règle {clear:left} est vide et de hauteur nulle, elle aura une hauteur minimum sous IE qui pourrait ressembler à ton saut de ligne. Dans ce cas {font-size:0} devrait remédier. Sinon... découvre toi, montre ton code.

Ouaibou a écrit :
car ma seule idée restante serait de réaliser deux feuilles de style à part afin d'ensuite détecter le naviguateur du client pour enfin inclure la feuille de style correspondante. Mais c'est beaucoup de travail (enfin...) mais surtout tout le monde n'a pas javascript d'ou possibilité d'avoir encore un problème avec la reconnaissance du naviguateur
Certes le spécifique n'est pas souhaitable, mais sache qu'en cas de nécessité il existe des méthodes "acceptables" pour l'application de règles CSS spécifiquement à un navigateur sans l'utilisation de javascript. Concernant IE regarde par exemple :
http://www.ultra-fluide.com/ressources/css/css-hacks.htm#filtrage
Ok je me dévoile donc puisqu'avec font-size 0 ça ne fonctionne pas Smiley smile

Xhtml :

<div class="cadre gras">
  <div class="floatLeft" style="width: 220px;">Sujets</div>
  <div class="floatLeft" style="width: 110px;">Auteur</div>
  <div class="floatLeft centrer" style="width: 70px;">Nb rep</div>
  <div class="floatLeft centrer" style="width: 90px;">Vus</div>
  <div class="floatLeft centrer" style="width: 160px;">Dernière réponse</div>
  <div class="clear"></div>
</div>


Css :

.cadre {
	border: 5px solid #ECECEC;
	height: auto;
	padding: 10px;
	width: 650px;
	}

.clear  {
	clear: both;
	padding: 0;
	margin:0;
	font-size: 0;
	}

.floatLeft {
	float: left;
	}
	
.gras {
	font-weight: 700;
	}
D'après moi il y a là un enchaînement qui commence avec une gestion inopportune des flottants, un comportement anormale de IE sur les flottants, le tout se cristallisant du fait du {padding:10px} sur .cadre.

Il faut savoir que les flottants ne font pas partie du flux normal des boîtes, et qu'ils ne participent donc pas directement à la hauteur de .cadre. Ton code donne à .cadre la bonne hauteur grâce à la présence de .clear dans .cadre. Donc tu as de la "chance" d'avoir un résultat correct sous FF.

Enfin le correctif que j'avais donné était bien l'une possibilité : réduire ce .clear à une hauteur nulle sous IE.
Voici 3 solutions différentes :

1/ correction à minima :
.clear  {font-size: 0;height:0}

2/ correction à minima (bis):
tu transferts {padding:10px} de .cadre à .floatLeft.

3/ plus solide à mon goût :
<style type="text/css">
* {margin:0;padding:0}
.cadre {
        float: left;
	border: 5px solid #ECECEC;
	padding: 10px;
	width: 750px;
	}
.clear  {
	clear: both;
	padding:50px 0 50px 20px
	}
.floatLeft {
	float: left
	}
.gras {
	font-weight: 700
	}
</style>

<body>
 <div class="cadre gras">
  <div class="floatLeft" style="width: 220px;">Sujets</div>
  <div class="floatLeft" style="width: 110px;">Auteur</div>
  <div class="floatLeft " style="width: 70px;">Nb rep</div>
  <div class="floatLeft " style="width: 90px;">Vus</div>
  <div class="floatLeft " style="width: 160px;">Dernière réponse</div>
</div>
<div class="clear"><p>Ici éventuellement un contenu utile pour ta page<p></div>
</body>
Sujet clos
Aller à