float:right se comporte comme un position:absolute

[calimo]

Prenons au hasard la page http://extensions.geckozone.org/AlwaysRememberPassword/ (pas tout à fait au hasard parce que l'extension a un nom à rallonge et c'est plus facile à visualiser).
Si on réduit la largeur de la fenêtre, au bout d'un moment (plus ou moins court selon votre résolution initiale) le lien d'installation finit par passer par dessus la description. Il s'agit d'un <p id="telecharement"> positionné de la manière suivante :

Code : Tout sélectionner

#telechargement {
	float: right;
	margin-right: 5em;
	margin-top: -6em
}

Question : il est en float, donc sorti du flux, mais normalement il devrait faire s'écouler le flux autour de lui, donc il ne devrait pas y avoir de chevauchement... je me trompe ? Et comment résoudre ce problème ?

[NaWer]

le plus bizarre, c'est que si tu met le margin-top a 20em (dans le texte description)
le texte se met bien correctement et il n'y a plus de chevauchement

il faudrai essayer de mettre un liste assez longue comme description pour voir si le chevauchement a lieu uniquement avec les listes ou pas.
Ou alors voir les propriété de #information (en regardant vite fait, je ne le trouve pas ...)

[calimo]

Il n'y a aucune mise en page spéciale pour #information, c'était juste au cas'zou mais finalement on en a rien fait... il n'est donc pas en position absolue

[calimo]

Personne n'a d'autre idée ?
Ou a défaut une proposition pour contourner le problème ?

[SIBELIUS]

Je ne me suis pas penché de près sur la structure, mais il il faut faire bien attention : un élément flottant n'affecte *que* les éléments en flux qui le suivent et pas ceux définis avant lui.
C'est peut-être ce qui pose le problème.

[calimo]

Ah ben oui peut-être bien ça vu que justement il est placé après dans le code

[SIBELIUS]

Oui, float est assez spécial : d'abord il se place dans le flux (à la suite des autres blocs), puis il est poussé à droite ou à gauche, en influençant les blocs en flux suivants.

[calimo]

Et pas l'inverse donc... bon tant pis on trouvera autre chose. Comment t'y prendrais-tu pour avoir un effet semblable ?

[SIBELIUS]

Et pas l'inverse donc... bon tant pis on trouvera autre chose. Comment t'y prendrais-tu pour avoir un effet semblable ?

Humm difficile à dire à priori, mais je te propose des pistes :

- placer d'abord ton bloc flottant dans le code, puis la liste (auteur, version). Tu pourras toujours décaler ton flottant avec des marges.

- ou mettre une margin-right sur la liste (pas sûr que ça marche)

- ou placer ton bloc flottant à droite, mais sous la liste (avec un clear)

- ou ... changer toute ta mise en page !

Pour info, je privilégierais la première solution.

[calimo]

Et pas l'inverse donc... bon tant pis on trouvera autre chose. Comment t'y prendrais-tu pour avoir un effet semblable ?

Humm difficile à dire à priori, mais je te propose des pistes :

- placer d'abord ton bloc flottant dans le code, puis la liste (auteur, version). Tu pourras toujours décaler ton flottant avec des marges.

Oui, c'est probablement le mieux... en même temps ça demande de revoir le code de toutes les pages.

- ou mettre une margin-right sur la liste (pas sûr que ça marche)

Ça marcherait si tous les float avaient la même largeur...

- ou placer ton bloc flottant à droite, mais sous la liste (avec un clear)

C'est peut-être le plus simple qu'on puisse faire pour l'instant.

- ou ... changer toute ta mise en page !

Pour info, je privilégierais la première solution.

Et moi la troisième à court terme, puis mise en place de la première, avec pour avantage que tous les "télécharger..." seraient du coup à la même hauteur. Je vais voir ça, merci beaucoup pour ton aide

[psyco_thug]

Juste comme ça, un margin-left: X ne marche pas? Ou un padding-left?

[calimo]

Sur quel élément ?

Le problème c'est que le lien flottant n'a pas toujours la même dimention. Il varie selon la longueur du nom de l'extension...

[psyco_thug]

sur #téléchargement, force le à être dans un block avec une marge gauche et droite. Mais j'avoue que j'ai également des probs avec des float alors je les utilise rarement, je préfere le bon vieux text-align.

Ou alors raccourci le texte du lien.

[malicia]

j vois pas... tu pourrais tout mettre en div float: left non ?

[PsyDk]

Heu, bah avec un margin-top négatif il est normal que ça chevauche