28173 sujets

CSS et mise en forme, CSS3

Firefox ne veut pas de float dans un h

de quoi ? mon titre n'est pas clair ?? Bon, je m'explique Smiley lol :
Soit le code suivant :

<html>
<head>
<title>test firefox</title>
<style type="text/css" title="text/css">
h1 {
	border: 1px solid black;
}
span {
	float: right;
}
</style>
</head>
<body>
<h1>LA RENTREE <span>2006-2007</span></h1>
<p>blablabla blablabla blablabla</p>
</body>
</html>

qui sous un navigateur courant donne ça :
upload/8443-Image6.png
mais sous firefox (mac 1.3 et 2.0) donne ça :
upload/8443-Image5.png

Donc j'ai 2 questions :
1. qui a raison ? Est-ce qu'on a le droit de mettre un élément en float dans un hx ?
2. Comment obtenir le même effet (un texte à gauche et un texte à droite sur la même ligne) sur firefox, sans div supplémentaire ni tableau ?

Merci les gars, c'est sympa, merci les filles, c'est sympi. Smiley ravi
Administrateur
mouloud a écrit :

Donc j'ai 2 questions :
1. qui a raison ? Est-ce qu'on a le droit de mettre un élément en float dans un hx ?

Pas de soucis tant que l'élément HTML n'est pas de type bloc. Pour un span, c'est ok.

mouloud a écrit :

2. Comment obtenir le même effet (un texte à gauche et un texte à droite sur la même ligne) sur firefox, sans div supplémentaire ni tableau ?

Là, il faut revoir le mode de positionnement flottant Smiley cligne
C'est le comportement normal d'un flottant :

tutoriel a écrit :
Récapitulatif. Attention à bien comprendre le fonctionnement du positionnement flottant :

* L'élément est d'abord placé normallement dans le flux. Donc si un autre élement bloc est placé avant lui, l'élément flottant se positionnera en dessous; et si un élément bloc le suit, ce dernier sera placé dessous. Bref, le comportement classique du positionnement en flux
* Ensuite l'élément qui a reçu la propriété float est "poussé" à gauche ou à droite de son conteneur.
* Les éléments qui le suivent au sein du conteneur se placent alors autour de lui.


Bref, tu résoudras ton problème tout simplement en plaçant ton span en début du h1 :
<h1><span>2006-2007</span>LA RENTREE </h1>


NOTE pour moi-même : rajouter ça dans la FAQ car la question est posée au-moins une fois par semaine.
je me répond à moi même pour le point 2 :

h1 {
	border: 1px solid black;
	position: relative;
}
span {
	position: absolute;
	right: 0px;
}

et ça marche sur firefox. Mais j'aime pas trop mettre des relatives et des absolutes pour un oui pour un non. J'ai toujours l'impression que c'est eux qui posent le plus de problèmes d'un navigateur à l'autre...
Salut,
mouloud a écrit :
Mais j'aime pas trop mettre des relatives et des absolutes pour un oui pour un non. J'ai toujours l'impression que c'est eux qui posent le plus de problèmes d'un navigateur à l'autre...
Surtout que si ton titre devient trop long, ton span va venir empiéter dessus...
Raphael a écrit :

Là, il faut revoir le mode de positionnement flottant Smiley cligne
C'est le comportement normal d'un flottant :

Si je comprends bien, il a beau être à l'intérieur du h1, il se considère quand même comme après lui, car il est après le texte qu'il contient.
Moi, il me semblait que c'était le conteneur qui était en bloc, et que son contenu était inline, et que donc, on pouvait considérer le texte "la rentrée" comme un inline implicite qui ne rejetterai pas le inline suivant à la ligne.
C'est en tout cas comme ça que semble penser bcp de navigateurs...


Raphael a écrit :

Bref, tu résoudras ton problème tout simplement en plaçant ton span en début du h1 :
<h1><span>2006-2007</span>LA RENTREE </h1>


ah oui, en effet. C'est mieux que mon absolute.
Sauf que pour les navigateurs sans css, les textes ne seront pas dans le bon ordre.
J'ai essayé de faire

<h1><span>LA RENTREE</span> <span class="annee">2006-2007</span></h1>

qui théoriquement, devrait marcher, si je suis ton raisonnement. Vu qu'il n'y a plus d'élément bloc avant lui. Mais non, firefox n'en veut pas.
Et si je met "la rentree" en float:left, ça marche parce qu'ils sont tous les deux en dessous du h1, et que celu-ci, privé de contenu, est plat. Mais bon, ce n'est pas l'idéal...
Eldebaran a écrit :
Un élément en float génère implicitement un bloc en ligne, c'est donc normal que ton span se retrouve en dessous.

je comprends pas... le principe d'un bloc en ligne, c'est justement que les éléments suivants se mettent à la suite et non dessous, non ?

Eldebaran a écrit :
Ta solution utilisant float: left et float: right me parait plutôt adaptée. C'est normal que ton titre se retrouve plat :
http://forum.alsacreations.com/faq/#item6

Oui, mais du coup, je n'ai plus les marges, padding et border du h1... Et quand à rajouter un hr dans mon h1, autant faire un tableau...
Smiley ohwell
mouloud a écrit :
je comprends pas... le principe d'un bloc en ligne, c'est justement que les éléments suivants se mettent à la suite et non dessous, non ?
Si ce sont eux aussi des éléments en ligne, oui, ce qui n'est pas le cas de ton span sur lequel tu appliques un float.
mouloud a écrit :
Oui, mais du coup, je n'ai plus les marges, padding et border du h1... Et quand à rajouter un hr dans mon h1, autant faire un tableau... Smiley ohwell
Je ne suis pas vraiment un pro de ces techniques, mais peut-être peux-tu utiliser quelque chose comme
float: left; width: 100%;
sur ton titre, puis
clear: left;
sur l'élément suivant ?
Eldebaran a écrit :
Si ce sont eux aussi des éléments en ligne, oui, ce qui n'est pas le cas de ton span sur lequel tu appliques un float.

Mon span, pas un élément en ligne ? Ben vl'a aut'chose, peucherette ! Smiley biggol Tous les span sont des éléments en ligne sauf si on précise le contraire, ou j'ai raté un épisode ?
Eldebaran a écrit :
Je ne suis pas vraiment un pro de ces techniques, mais peut-être peux-tu utiliser quelque chose comme
float: left; width: 100%;
sur ton titre, puis
clear: left;
sur l'élément suivant ?

ça ne marche pas... mais je ne vois pas pourquoi. Si "la rentrée" fait 100%, je ne vois pas pourquoi "2006-2007" resterait sur la même ligne... Ou alors, je n'ai pas compris...
Smiley sweatdrop
Administrateur
mouloud a écrit :

Mon span, pas un élément en ligne ? Ben vl'a aut'chose, peucherette ! Smiley biggol Tous les span sont des éléments en ligne sauf si on précise le contraire, ou j'ai raté un épisode ?

En fait, la propriété Float applique un comportement de type bloc à l'élément (il occupe un espace, peut avoir des dimensions, etc.).
En clair, <span> restera de type en-ligne, mais son comportement sera celui d'un bloc.
mouloud a écrit :
Mon span, pas un élément en ligne ? Ben vl'a aut'chose, peucherette ! Smiley biggol Tous les span sont des éléments en ligne sauf si on précise le contraire, ou j'ai raté un épisode ?
Désolé, j'ai dit une bêtise tout à l'heure. Quand un élément est positionné en float, il se transforme implicitement en élément de type bloc. C'est donc le cas de ton span.
mouloud a écrit :
ça ne marche pas... mais je ne vois pas pourquoi. Si "la rentrée" fait 100%, je ne vois pas pourquoi "2006-2007" resterait sur la même ligne... Ou alors, je n'ai pas compris...
Smiley sweatdrop
Je me suis une fois de plus mal exprimé. Smiley smile

Ce que je te proposais, c'est de faire ceci pour le HTML :
<h1><span>La rentrée</span> <span class="annee">2006-2007</span></h1>

<p id="el2">Elément suivant (exemple)...</p>
et ceci pour les CSS :
h1 {float: left; width: 100%;}
h1 span {float: left;}
h1 span.annee {float: right;}

#el2 {clear: left;}
Edit : ceci dit, peut-être peux-tu utiliser strong plutôt que span pour "La rentrée", puisque ton but semble être de mettre cette partie en valeur.
Modifié par Eldebaran (03 Nov 2006 - 15:11)
Raphael a écrit :

En fait, la propriété Float applique un comportement de type bloc à l'élément (il occupe un espace, peut avoir des dimensions, etc.).
En clair, <span> restera de type en-ligne, mais son comportement sera celui d'un bloc.

AH ok. je ne connaissais pas cette subtilité. Si je comprends bien, lui même se voit comme un bloc, donc il va aller à la ligne après un autre élément, mais les autres le voient comme en-ligne, et vont donc rester sur la même ligne que lui ?
Ce qui force donc à mettre toujours les float en premier dans le bloc contener, c'est ça ?
Je crois que je commence à comprendre... Smiley langue
Eldebaran a écrit :
Ce que je te proposais, c'est de faire ceci pour le HTML :
<h1><span>La rentrée</span> <span class="annee">2006-2007</span></h1>

<p id="el2">Elément suivant (exemple)...</p>
et ceci pour les CSS :
h1 {float: left; width: 100%;}
h1 span {float: left;}
h1 span.annee {float: right;}

#el2 {clear: left;}


ça marche ! Mais je comprends pas pourquoi... Pourquoi le fait de mettre H1 en float le force-t-il à englober les 2 span ?
Eldebaran a écrit :
Edit : ceci dit, peut-être peux-tu utiliser strong plutôt que span pour "La rentrée", puisque ton but semble être de mettre cette partie en valeur.

je ne chercher pas spécialement à le mettre en valeur. Il l'est déjà par le H1. Je veux juste que l'année soit au fer à droite, au lieu de suivre "la rentrée"
mouloud a écrit :
ça marche ! Mais je comprends pas pourquoi... Pourquoi le fait de mettre H1 en float le force-t-il à englober les 2 span ?
C'est une question de contexte de float. Je t'invite à lire les specs pour plus d'infos (oui je sais, c'est facile).
je vais plutôt te croire sur parole. La dernière fois que j'ai essayé de lire les specs, j'ai eu 15 jours d'arrêt... Smiley biggol
Bonjour,

Juste une précision :
a écrit :

utoriel a écrit :
Récapitulatif. Attention à bien comprendre le fonctionnement du positionnement flottant :

* L'élément est d'abord placé normallement dans le flux. Donc si un autre élement bloc est placé avant lui, l'élément flottant se positionnera en dessous; et si un élément bloc le suit, ce dernier sera placé dessous. Bref, le comportement classique du positionnement en flux
* Ensuite l'élément qui a reçu la propriété float est "poussé" à gauche ou à droite de son conteneur.
* Les éléments qui le suivent au sein du conteneur se placent alors autour de lui.


Je trouve cette phrase très ambigue : En réalité un flottant est retiré du flux puis repositionné le plus à droite ou à gauche à partir de sa position en flux normal, ce qui explique qu'un conteneur n'englobe pas ses enfants flottants.

Mais son statut c'est bien d'être "en dehors du flux normal".
a écrit :

Une boîte flottante se trouvant hors du flux normal, les boîtes de bloc non positionnées, crées avant et après elle, s'écoulent verticalement comme si celle-ci n'existait pas. Cependant, les boîtes de lignes, crées juste après la boîte flottante, se réduisent pour laisser de la place à celle-ci. Le contenu de la ligne, celui avant la boîte flottée, se répand dans la première ligne disponible contre l'autre bord de cette boîte.
W3C - Spécification CSS2 - 9.5 les flottants

Ce n'est que son repositionnement à partir de sa position initiale dans le flux normal qui le fait "passer dessous" un bloc qui le précède.

<edit>
Tiens, d'ailleurs il y à autre qui me gêne dans ce paragraphe :
a écrit :

Les éléments qui le suivent au sein du conteneur se placent alors autour de lui.

La aussi c'est très ambigue : ce ne sont pas les éléments qui se placent autour de lui, mais le contenu (les boites de lignes dans la citation précédente).
Ce qui explique que le coin supérieur gauche d'un paragraphe qui suit un flottant est juxtaposé avec celui du flottant.
</edit>

Jean-pierre
Modifié par jpv (03 Nov 2006 - 17:24)
Sujet clos
Aller à