Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Flottant à droite récalcitrant

15 réponses
Avatar
Pascale
Bonjour,

Je me doute que c'est une question de débutant, mais enfin, je suis
enquiquinée avec ça.

Soit une page avec un menu (flottant à gauche), un corps de texte, et une
petite boîte flottante à droite.

Le menu a les caractéristiques suivantes (j'ai viré bien sûr ce qui n'était
pas nécessaire à la compréhension) :
div.gauche
{
float: left;
position: absolute;
top: 150px;
left: 60px;
width: 250px;
}

div.corps
{
margin-left: 250px;
padding: 40px;
max-width: 800px;
}

Cette partie fonctionne correctement, mais lorsque j'essaie de placer ma
boîte à droite, de la manière suivante :

div.droite
{
clear: left;
max-width: 100px;
text-align: center;
margin: 60px 10px 10px 10px;
float: right;
}

La boîte « flotte » bien mais je constate deux problèmes :

- Si j'ouvre mon navigateur en plein écran, la boîte est calée à droite, ce
qui ne me va pas du tout : je préfèrerais qu'elle soit, à la marge près,
collée contre le corps de texte. Là, il y a un énorme blanc entre le corps
de texte et cette boîte.

- Si je réduis la taille de mon navigateur, cette boîte et le corps de
texte se chevauchent, c'est très moche.

Je ne suis même pas sûre d'employer la bonne technique pour faire ce que je
désire, donc si quelqu'un pouvait m'aider, ce serait bien...
--
Pascale
http://www.la-grille-verte.net

5 réponses

1 2
Avatar
Pascale
SAM écrivait
news:4f914f19$0$12498$:

Je suis quasi certain que tu n'as plus besoin du float
(en tous cas pour cette page)



Une fois de plus, c'est toi qui as raison ! (o:

J'avoue n'avoir jamais pensé qu'absolute pouvait se substituer à float, et
ça me plonge dans des abîmes de perplexité... D'autant que le
positionnement avec absolute me paraît plus facile à appréhender que les
flottants.

--
Pascale
http://www.la-grille-verte.net
Avatar
SAM
Le 20/04/12 16:44, Pascale a écrit :

J'avoue n'avoir jamais pensé qu'absolute pouvait se substituer à float, et
ça me plonge dans des abîmes de perplexité...



Dans la mesure où pour le div suivant tu lui précises une marge gauche ≥
à la largeur de celui en absolute, ce div suivant remonte tout seul se
mettre à droite.
Ça fonctionne comme si le div absolute était un float gauche sauf qu'on
n'est plus dans le flux, le positionnement, naturel.

D'autant que le positionnement avec absolute



Sauf que ... il faut absolument tout tenter pour s'en passer ! ! !
(le + souvent il est facile de s'en passer)

me paraît plus facile à appréhender que les flottants.



La largeur d'un relatif se règle automatiquement et par défaut sur toute
la largeur restante disponible
(sauf à la fixer bien entendu)

La largeur d'un absolute se règle sur son contenu
(sauf à la fixer bien entendu)

Un float est presque un absolute
sa largeur devrait se régler en fonction de son contenu


--
Stéphane Moriaux avec/with iMac-intel
Avatar
Pascale
SAM écrivait
news:4f91946e$0$12481$:

Dans la mesure où pour le div suivant tu lui précises une marge gauche ?
à la largeur de celui en absolute, ce div suivant remonte tout seul se
mettre à droite.
Ça fonctionne comme si le div absolute était un float gauche sauf qu'on
n'est plus dans le flux, le positionnement, naturel.



Oui, en y réfléchissant un peu, j'ai fini par comprendre que c'était
logique.

D'autant que le positionnement avec absolute


Sauf que ... il faut absolument tout tenter pour s'en passer ! ! !
(le + souvent il est facile de s'en passer)



Peux-tu m'expliquer pourquoi ? Il me semblait avoir lu que le rendu des
float pouvait être parfois un peu aléatoire.
Et dans la mesure où on ne veut pas que le corps de texte revienne sous
l'élément flottant (vu qu'on met une marge), le float est-il si logique que
ça ? Je ne conteste pas, j'essaie de comprendre (:

La largeur d'un relatif se règle automatiquement et par défaut sur toute
la largeur restante disponible
(sauf à la fixer bien entendu)

La largeur d'un absolute se règle sur son contenu
(sauf à la fixer bien entendu)



Dans le cas de mon menu, la largeur est effectivement fixée.

Un float est presque un absolute
sa largeur devrait se régler en fonction de son contenu



Tes explications sont très claires. L'inconvénient, c'est que ça me pousse
à te poser plus de questions ! (-:

--
Pascale
http://www.la-grille-verte.net
Avatar
SAM
Le 20/04/12 19:28, Pascale a écrit :
SAM écrivait
news:4f91946e$0$12481$:

D'autant que le positionnement avec absolute


Sauf que ... il faut absolument tout tenter pour s'en passer ! ! !
(le + souvent il est facile de s'en passer)



Peux-tu m'expliquer pourquoi ?



Paske !
Plus propre, plus concis, plus respectueux du visiteur (il peut n'avoir
pas les mêmes réglages que le voisin et dans ce cas le positionnement
naturel se dégrade mieux), sans doute plus en accord avec l'affichage
sur écrans de mobiles ?
Voir si openweb n'en cause pas ?

Il me semblait avoir lu que le rendu des
float pouvait être parfois un peu aléatoire.



Ben ... oui, comme tu as pu le voir ;-)

(IE étant là aussi très caractériel !)
(mébon, juste pour un menu flottant ça ne doit pas poser de pb)

Et dans la mesure où on ne veut pas que le corps de texte revienne sous
l'élément flottant (vu qu'on met une marge), le float est-il si logique que
ça ? Je ne conteste pas, j'essaie de comprendre (:



Ben ... le float est fait pour faire glisser sur le côté indiqué les
trucs suivants.
Une fois dépassé le truc qui a la flottaison il est naturel qu'on
revienne à la ligne et marge normale, comme pour tout traitement de
texte qui gère des objets (images ou pavés de texte).
Comme pour un traitement de texte, si on ne veut pas que ça revienne
sous le flotaillon, il faut mettre une marge.
À mon idée, il n'y a donc rien d'anormal à ces comportements.

Avec le menu en absolute, il faudra que tu en revois la position dès que
tu changeras ce qu'il y a au-dessus, non ?
Avec le menu en float, le menu et ce qui doit glisser à côté vont suivre
tout naturellement l'évolution du haut de page sans avoir à changer la FdS.


Bon, il se trouve que tu as bien compliqué les choses en flottaillonnant
alternativement un trombinoscope commenté

Mais ... c'est très faisable
- sans absolute
- avec des floats
<http://cjoint.com/?BDvbP0jwDU6>
Cependant ... non testé IE ! ! !

--
Stéphane Moriaux avec/with iMac-intel
Avatar
Pascale
Tout d'abord, je te fais mes excuses pour n'avoir pas répondu plus tôt.
Mais me revoici !
SAM écrivait
news:4f91f553$0$21469$:

Paske !



(o:

Plus propre, plus concis, plus respectueux du visiteur (il peut
n'avoir pas les mêmes réglages que le voisin et dans ce cas le
positionnement naturel se dégrade mieux), sans doute plus en accord
avec l'affichage sur écrans de mobiles ?
Voir si openweb n'en cause pas ?



Là ? http://openweb.eu.org/articles/initiation_absolue
Alsacréations donne les limites du positionnement absolu :
http://www.alsacreations.com/article/lire/53-guide-de-survie-du-
positionnement-css.html

Dans le cas précis d'un menu calé à gauche et sous une bannière, qui n'en
bouge pas, j'avoue que je n'ai pas trop de scrupules à l'utiliser, du moins
dans la mesure où ça me simplifie la vie.

Il me semblait avoir lu que le rendu des
float pouvait être parfois un peu aléatoire.


Ben ... oui, comme tu as pu le voir ;-)

(IE étant là aussi très caractériel !)
(mébon, juste pour un menu flottant ça ne doit pas poser de pb)



En fait, ce qu'il faudrait, c'est avoir une utilisation plus subtil du
clear. Je sais qu'on peut faire both, right ou left, mais en fait, il
faudrait pouvoir préciser qu'on se débarrasse du float « juste avant »,
mais pas de celui du menu à gauche. J'explique ça de manière plus que
rustique, mais je pense que tu vois ce que je veux dire (:

Ben ... le float est fait pour faire glisser sur le côté indiqué les
trucs suivants.
Une fois dépassé le truc qui a la flottaison il est naturel qu'on
revienne à la ligne et marge normale, comme pour tout traitement de
texte qui gère des objets (images ou pavés de texte).



Voilà, et justement, je ne veux pas que le corps de texte repasse sous mon
menu une fois celui-ci terminé, c'est pourquoi l'emploi du float dans ce
cas, quoiqu'usuel, ne me paraît pas si logique que ça.

Comme pour un traitement de texte, si on ne veut pas que ça revienne
sous le flotaillon, il faut mettre une marge.



Oui, c'est bien ce que je fais.

À mon idée, il n'y a donc rien d'anormal à ces comportements.



Ah mais non, j'ai pas dit que c'était anormal ! (:

Avec le menu en absolute, il faudra que tu en revois la position dès
que tu changeras ce qu'il y a au-dessus, non ?



Forcément, mais la bannière ne change pas tous les jours (encore que, si
j'étais moins nulle en dessin, je pourrais faire quelque chose de mieux).

Avec le menu en float, le menu et ce qui doit glisser à côté vont
suivre tout naturellement l'évolution du haut de page sans avoir à
changer la FdS.



Oui !

Bon, il se trouve que tu as bien compliqué les choses en
flottaillonnant alternativement un trombinoscope commenté

Mais ... c'est très faisable
- sans absolute
- avec des floats
<http://cjoint.com/?BDvbP0jwDU6>
Cependant ... non testé IE ! ! !



<couine>Maisheuuu ! pourquoi avec toi ça marche et pas avec moi ?!</couine>
J'avoue que je n'avais pas pensé à mettre une liste de définitions à cet
endroit, mais ça ressemble à une bonne idée.

--
Pascale
http://www.la-grille-verte.net
1 2