28220 sujets

CSS et mise en forme, CSS3

Float left : ok; float right : non... dans FF1.5 !

Bonjour,
Je viens d'acheter le l'excellent livre de R. Goetter.
J'ai récupéré les scripts du livre sur le site d'Eyrolles.
J'ai collé celui concernant le positionnement flottant (voir le code ci-dessous).
Résultat :
1- sous IE et mon éditeur ( Script Edit), le float: right; fonctionne.
2- sous FF 1.5 (Wxp patch 2) : seul le left fonctionne correctement. A droite, j'ai un léger décalage vers le bas du 1er paragraphe.

CSS
div {
width: 300px;
height: 200px;
background: yellow;
}
p#premier {
width: 100px;
float: right;
background: orange;
}
p#second {
background: green;
}
</style>

HTML
<div>
<p id="premier">premier paragraphe de texte</p>
<p id="second">deuxième paragraphe de texte deuxième paragraphe de texte
deuxième paragraphe de texte deuxième paragraphe de texte deuxième
paragraphe de texte </p>
</div>

Je ne comprends pas très bien...
R.L.
Salut,

rajoutes :
margin :0;
padding:0;

à p#premier

En effet celà vient sûrement de l'interprétation des marges par défaut de la balise <p> par Firefox. Ce n'est pas toujours la même selon les navigateurs.

Pour éviter ce genre de mésaventure, je commence toujours ma feuille de style par :
* {
margin: 0;
padding: 0;
}

Ce qui a pour conséquence de supprimer toutes les marges (intérieures et extérieures) sur tous les éléments de ta page.

@+
Chez moi tout marche bien sous Firefox 1.5
Le paragraphe est bien flotté à droite. Il est juste légèrement décalé vers le bas, mais c'est tout simplement l'application des marges par défaut. Un simple
p#premier {
	margin: 0;
}

Règle le problème.

fafane84 a écrit :
Pour éviter ce genre de mésaventure, je commence toujours ma feuille de style par :
* {
	margin: 0;
	padding: 0;
}

Ce qui a pour conséquence de supprimer toutes les marges (intérieures et extérieures) sur tous les éléments de ta page.

Par contre cette méthode peut avoir des inconvénients. Vu que les styles par défaut sont désactivés, il faut repréciser dans la feuille de style les marges et espaces internes pour tous les éléments que l'on utilisera. Si on oublie quelque chose, on peut avoir des surprises. Donc à moins de vouloir absolument faire un design au pixel près, j'évite...
Merci à tous les deux : ça fonctionne ainsi.
2 remarques :
- Ce matin, ça ne fonctionne pas à gauche sous FF 1.5 (sans margin) Smiley eek , contrairement à hier. et c'est mieux ainsi. Smiley cligne
- Comme je l'ai dit, j'ai copié-collé le code du bouquin de Raphael (au demeurant excellent !) et ai contrôlé sa Figure 07-17 qui affiche un bon placement avec son code (sans margin donc). ESt-ce à dire qu'avant la version 1.5 (R. n'a pu utiliser qu'une version antérieure à l'époque), FF interprétait autrement la balise <p> placée au tout début d'une page ?
Merci encore.
Rosa
Sujet clos
Aller à