28217 sujets

CSS et mise en forme, CSS3

Blocs inclues qui se désinclusent avec un float

Bonjour. Je sais que le problème a déjà été posé, mais malgrés tous mes efforts je ne suis pas parvenu à le régler.

Je tiens tout d'abord à montrer ce que je souhaiterais faire :

http://nadia.malbranque.free.fr/stockage/problemes/exemple.jpg

Comme on peut le voir, il y a un bloc conteneur (Jaune, ou n°4) contient deux autres blocs contenus (le bleu, n°5, et le noir n°6).

... Et c'est là que ça coince ! Pour avoir cette position (un cadre bleu (n°5) à gauche et un cadre noir (n°6) à droite), je dois utiliser la propriété float: left que j'applique au bleu (n°5).

Le problème : Dés que j'applique la propriété 'float: left;' au cadre bleu (n°5) avec la propriété 'clear: both;' sur le noir (n°6)... eh bien le cadre conteneur (jaune, n°4) ne s'adapte plus au contenu d'un des deux cadres ou des deux... Ce qui fait qu'il disparaît complétement ce conteneur.

J'ai essayé avec la propriété overflow : ça fonctionne bien sous Firefox, mais pas sur Internet Explorer.

Si l'un d'entre vous saurait m'aider, j'en serais très heureux.

Pour mieux cerner la chose, je propose le liens vers la page de fond et le fichier CSS qui va avec. Le tout disponible dans un fichier zip
Bon, je crois que j'ai trouvé la solution : appliquer un float au bloc conteneur. C'est, certe, un peu barbare... mais ça à l'air de fonctionner à première vue.

Si quelqu'un à une autre solution, je suis preneur.
J'allais poster là tout de suite sur un problème qui me semble être similaire.
De mon côté je me suis amusé à chercher la cause du problème, et la conclusion de ma recherche peut se lire ici :
Page d'explications avec lien vers les exemples

Je ne suis pas tout à fait sûr qu'il s'agisse du même problème.
La solution que j'ai trouvée au mien en tout cas est satisfaisante, mais pas parfaite. En particulier, je me pose la question suivante :
S'agit-il d'un bug de gestion du CSS (si c'est le cas il est commun à Gecko et KHTML), ou bien est-ce normal au vu des spécifications CSS de la W3C ? Dans tous les cas, il faut être assez prudent avant d'utiliser des float...

Voilà, je me suis amusé à écrire ces pages en espérant que ça serve à d'autres. Si vous pouvez éclairer ma lanterne sur le pouquoi du comment que ça marche, ça serait sympa aussi.
mpop a écrit :
J'allais poster là tout de suite sur un problème qui me semble être similaire.
De mon côté je me suis amusé à chercher la cause du problème, et la conclusion de ma recherche peut se lire ici :
Page d'explications avec lien vers les exemples

Je ne suis pas tout à fait sûr qu'il s'agisse du même problème.
La solution que j'ai trouvée au mien en tout cas est satisfaisante, mais pas parfaite. En particulier, je me pose la question suivante :
S'agit-il d'un bug de gestion du CSS (si c'est le cas il est commun à Gecko et KHTML), ou bien est-ce normal au vu des spécifications CSS de la W3C ? Dans tous les cas, il faut être assez prudent avant d'utiliser des float...

Voilà, je me suis amusé à écrire ces pages en espérant que ça serve à d'autres. Si vous pouvez éclairer ma lanterne sur le pouquoi du comment que ça marche, ça serait sympa aussi.


C'est en effet le même genre de problème. Tu parles d'un 'clear: both;', mais comme tu le dis ça impliques d'ajouter un bloc DIV qui n'a aucune grande utilité, si c'est pour "boucher les trous de failles" en quelques sortes.

N'appréciant pas ce fait, par un heureux hazard, j'ai attribué un float au bloc conteneur. Sur ton exemple c'est le cadre blanc.

Je ne sais pas pourquoi, mais ça fonctionne.
Modifié par NiRaDo (01 Jun 2005 - 13:16)
C'est en effet le même genre de problème. Tu parles d'un 'clear: both;', mais comme tu le dis cette méthode implique l'ajouter d'un bloc DIV qui n'a aucune grande utilité, si ce n'est pour "boucher les trous de failles" en quelques sortes.

N'appréciant pas ce fait, par un heureux hazard, j'ai attribué un float au bloc conteneur. Dans ton exemple c'est le cadre blanc.

Ce qui donnerait par exemple : 

#page
{
  [b]float: left;[/b]
  width: 500px; margin-left: 100px;
  padding: 20px;
  border: solid 1px gray;
  background-color: #fed;
}
#gauche
{
  float: left;
  height: 400px; width: 200px;
  background-color: gray;
}
#droite
{
  float: right;
  height: 200px; width: 100px;
  background-color: #555;
}


Je ne sais pas pourquoi, mais ça fonctionne. Malgrés que cette technique un peu barbare, je l'ai tout de même adoptée. Mais cela nous demande grande attention, car au cas ou le bloc conteneur ne devrait pas être en float, le problème surviendrait.
Modifié par NiRaDo (01 Jun 2005 - 13:18)
Sujet clos
Aller à