28220 sujets

CSS et mise en forme, CSS3

Problème de float. Clear, c'est bien joli mais...

Pages :
Bonjour, je voudrais vous soumettre un problème que l'on retrouve avec le positionnement float.

LE problème bien connu du depassement du conteneur.
On attribut alors un clear : both; (ou left ou right quand cla suffit).

Cependant, on se retrouve confronté à un autre problème lorsqu'il existe d'autres éléments positionnés en float dans la page.

Exemple : http://www.hellsplayers.com/aides/aide01_flottants.htm
(simplifié au max)

Comment résoudre alors ce nouveau problème ?

Merci Smiley smile
Modifié par Dark elf (13 Jun 2005 - 12:27)
Mais que vois-je ? Un sujet sur le même sujet quelques lignes en dessous de celui-ci...

Et ma recherche qui n'avait pourtant rien donné Smiley decu

Ceci dit, je ne comprend pas grand chose..
A part changer le menu de position, je ne sais que faire..

Donc oui les solutions que j'ai trouvé sont les suivantes :
-changer le positionnement du menu (admettons que je ne veux pas)
-mettre un padding-top supérieur à l'image en float pour le texte en dessous de l'image (donc rien d'automatique, c'est faire de l'a peu près..tiens, mon image fais 25px de hauteur hop un padding-top de 30..ha zut, maintenant que j'ai changé d'image, va falloir augmenter le padding...hem.)

Donc pas de solution réélle en gros ? Smiley sweatdrop
Modifié par Dark elf (13 Jun 2005 - 12:31)
Excuse moi mais c'est déjà fait (dans l'exemple :<div id="conteneur_news">).
De plus, clear agit sur toute la page et pas seulement le conteneur dans lequel la propriété est appliquée Smiley ohwell
C'est une bonne question alors, je ne sais pas. La réponse m'intéresse fortement, je serai bientôt confronté au même problème !
Ah c'est un problème à s'arracher les cheveux ! Ça m'est déjà arrivé... cette histoire de clear qui se propage à tous les éléments de la page et pas seulement au conteneur. Peut-être résoudre le problème avec des blocs positionnés en "position: relative" les uns par rapport aux autres, je m'en suis déjà sorti de cette façon. Tu y as pensé ? Ça a l'avantage de rester fluide en cas de changement d'images, texte plus long etc...
Oui bobe, mais je m'en suis aperçu trop tard (cf mon deuxième post dans ce même sujet.)

Et j'ai résumé les réponses que j'avais trouvé dans ce sujet quelques messages auparavant.

Mais mon problème à moi est le suivant :
Comment avec des éléments positionnés en float, faire en sorte que le clear n'agisse que sur les éléments du bloc conteneur et pas sur l'ensemble de la page ?

Et d'après tout ce que j'ai pu lire...la réponse n'existe pas.= Smiley ohwell
Si ce n'est de changer de position les autres éléments (moui..) ou de devinez la taille de l'élément du dessus pour anticiper son débordement..

Voilà voilà Smiley smile
Dark elf a écrit :

Mais mon problème à moi est le suivant :
Comment avec des éléments positionnés en float, faire en sorte que le clear n'agisse que sur les éléments du bloc conteneur et pas sur l'ensemble de la page ?

Et d'après tout ce que j'ai pu lire...la réponse n'existe pas.= Smiley ohwell


Si, la réponse est bien dans l'autre sujet. Il suffit de faire flotter le div 'conteneur_news'. Par contre, l'inconvénient est qu'il faut lui donner une largeur explicite.
moi ça ne me convient pas du tout Smiley bawling Smiley bawling

je trouve ça quand-même énorme qu'il n'y ait pas un moyen simple pour insérer des images dans du texte, ce dernier englobant l'image !!!
Modérateur
Piloutje a écrit :
je trouve ça quand-même énorme qu'il n'y ait pas un moyen simple pour insérer des images dans du texte, ce dernier englobant l'image !!!


Ouais, il y a un moyen simple : float sur l'image.

Personnellement, depuis un certain temps, j'utilise toujours les positions relatives/absolues pour positionner une colonne à gauche du contenu, au lieu d'utiliser le classique float left. De cette façon, pour le contenu, je peux très bien utiliser le float left sur les images du contenu et les clear sans problèmes.
Bobe a écrit :


Si, la réponse est bien dans l'autre sujet. Il suffit de faire flotter le div 'conteneur_news'. Par contre, l'inconvénient est qu'il faut lui donner une largeur explicite.


Alors, tu peux me...heu nous l'expliquer clairement parce que je ne vois pas en quoi mettre une div qui contient toutes les news en float peut arranger notre problème..
Le clear ne s'applique plus à l'ensemble de la page si on fait ça ? Smiley murf
Merkel a écrit :


Ouais, il y a un moyen simple : float sur l'image.

Personnellement, depuis un certain temps, j'utilise toujours les positions relatives/absolues pour positionner une colonne à gauche du contenu, au lieu d'utiliser le classique float left. De cette façon, pour le contenu, je peux très bien utiliser le float left sur les images du contenu et les clear sans problèmes.


Je ne peux pas employer une autre méthode que les floats pour mes menus latéraux. En effet, ceux-ci peuvent être plus grand que le contenu de mes pages, ils font donc qu'ils interviennent pour "pousser" mon pied de page vers le bas...

Bref c'est vraiment nul cette histoire de float qu'on ne peut finalement employer qu'une seule fois dans son layout...
Personnellement, ce n'est que de la curiosité car mes menus sont absolus.
Pilloutje, pour pousser ton footer, si la position n'est pas en float, utilise un height avec IE et un min-height avec firefox :

.corps {
height : ***px;
}
html>body .corps{ /* emploi ici des selecteurs avec html>body */
min-height : ***px;
}


Smiley cligne
Piloutje a écrit :
je connais pas la hauteur de mes menus...

je vois vraiment pas comment m'en sortir ! Heeelp



Fais des tests, la hauteur de ton menu est fixe,ce la ne devrait pas poser de problèmes..
Mais une valeur assez grande au pire (mais un espace sous le contenu ne ferait pas très beau)..

Désolé mais il n'existe pas de solution parfaite.
Le mieux selon alors moi serait de laisser ton menu en float et de mettre une taille minimale aux news...et de garder la même taille pour toutes les images.

Va falloir faire des choix !
Pages :
Sujet clos
Aller à