28172 sujets

CSS et mise en forme, CSS3

La boîte qui boîte[Résolu]

J'ai voulu fabriquer des boîtes qui s'imbriquent, mais malgré mes prouessess les boîtes ne se mettent pas comme il faut.

Voici le code CSS:
div#box5    {
    float:left;
    width:965px;
    height:90px;
    background-color:orange;
}

div#box51    {
    float:left;
    width:120px;
    height:90px;
    background-color:#006699;
}

div#box52    {
    float:left;
    width:725px;
    height:60px;
    background-color:#00FF00;
}

div#box53    {
    float:left;
    width:725px;
    height:30px;
    background-color:#996699;
}

div#box54    {
    float:left;
    width:120px;
    height:90px;
    background-color:#33FF00;
}


Et voici le code HTML:

<body>

<div id="box5">

<div id="box51">
box 51
</div>

<div id="box52">
box 52
</div>

<div id="box53">
box 53
</div>

<div id="box54">
box 54
</div>

</div>


</body>


Chez moi - sûrement pas chez vous Smiley biggrin - la boîte 54 est décallée vers le bas en dessous de 52 au lieu de rester alignée à côté de 52 et 53 qui se trouvent à gauche de 51, le tout contenu dans 5.

Pourquoi est-ce que je n'arrive pas à faire obéir les boîtes?
Modifié par jansoz (31 Oct 2008 - 18:04)
6l20 a écrit :
Bonsoir jansoz,

Pourquoi tant de flottants ?
Il existe (fort heureusement) d'autres moyens de positionner des "boites" Smiley cligne

C'est pourquoi est-ce dont faire ?

A te lire,
Cdt,
Sylvain


Bonjour Sylvain,

Merci pour ta réponse et le lien.

J'ai choisi "flottant" parce que je vise cet effet
a écrit :
La propriété FLOAT permet de positionner un bloc à gauche ou à droite dans un parent (et non-plus l'un en-dessous de l'autre). Le reste du conteneur parent occupera alors l'espace laissé libre.
Ce bout de texte provient de ton lien http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS. Mais les boîtes ne se comportent pas selon cette définition de flottant. Je ne le comprends pas. C'est cette question que j'aimerais comprendre.
Modifié par 6l20 (29 Oct 2008 - 13:15)
Hello jansoz,

Au risque de me répéter : Quel est le but de l'opération ?
Ce bloc flottant contenant des flottants me semble pour le moins casse-gueule au niveau du résultat attendu et de l'interopérabilité Smiley ohwell
Ce bloc fait-il partie d'un autre bloc positionné ?
Est-ce pour une mise en page ?
Le positionnement dans le flux, les flottants, le positionnement relatif et absolu peuvent être combinés de manière à obtenir ce que tu souhaites, cela dépend du contexte...

Dis-nous en plus Smiley cligne

Cdt,
Sylvain
Si j'ai bien lu ton code, #box51, #box52, #box53, #box54 sont toutes au même niveau dans #box5 hors l'addition de leurs largeurs donne un résultat supérieur à la largeur de #box5, il est donc normal que tes boites passent à la ligne.
cahnory a écrit :
Si j'ai bien lu ton code, #box51, #box52, #box53, #box54 sont toutes au même niveau dans #box5 hors l'addition de leurs largeurs donne un résultat supérieur à la largeur de #box5, il est donc normal que tes boites passent à la ligne.

Hum pas tout à fait Smiley cligne
div#box5 = 965px
Elle contient effectivement les autres boites, mais 52 et 53 doivent être l'une au dessus de l'autre :
120px (div#box51) + 725px (div#box52 et 53) + 120px (div#box54) = 965px (div#box5) Smiley cligne
Techniquement : 53 ne peut pas flotter "à gauche" à coté de 52 par manque de place et file à la ligne, il se place à droite de 51 qui est déjà là...il trouve donc trouve sa place exactement sous 52, c'est après que cela merdoie...

Ce qui pose problème ici, avec ce choix de positionnement (et à mon humble avis) c'est que le dernier flottant (54) se positionne par rapport à la boite précédente (53) et n'est donc pas aligné comme le souhaiterait jansoz...mais ce comportement me semble tout fait conforme...

Article très interessant (comme d'hab) de l'ami Florent

Il y a moyen de faire fonctionner le bouzin (marge négative sur le dernier flottant par exemple) mais encore une fois cela me semble très casse-gueule.
Je peux me tromper et vous vourez bien avoir la gentilesse de m'excuser Smiley cligne

Cdt,
Sylvain
Modifié par 6l20 (29 Oct 2008 - 19:48)
6l20 a écrit :

Ce qui pose problème ici, avec ce choix de positionnement (et à mon humble avis) c'est que le dernier flottant (54) se positionne par rapport à la boite précédente (53) et n'est donc pas aligné comme le souhaiterait jansoz...mais ce comportement me semble tout fait conforme...

Article très interessant (comme d'hab) de l'ami Florent

Il y a moyen de faire fonctionner le bouzin (marge négative sur le dernier flottant par exemple) mais encore une fois cela me semble très casse-gueule.
Je peux me tromper et vous vourez bien avoir la gentilesse de m'excuser Smiley cligne

Cdt,
Sylvain


C'est exactement cela! La boîte 54 devrait à mon avis se poser à droite à côté de 52 et 53 comme la boîte 51 qui se trouve à gauche.

L'objectif de cet exercice est, par exemple, de créer une bannière composée de deux titres centraux de tailles différentes, un emblème à gauche et autre chose à droite.

Comme le dirait le cher capitaine Haddock: "C'est à la fois très simple et très compliqué." (Tintin au pays de l'or noir)
jansoz a écrit :

C'est exactement cela! La boîte 54 devrait à mon avis se poser à droite à côté de 52 et 53 comme la boîte 51 qui se trouve à gauche.

Oui, mais non...Je réexplique ?
jansoz a écrit :

L'objectif de cet exercice est, par exemple, de créer une bannière composée de deux titres centraux de tailles différentes, un emblème à gauche et autre chose à droite.

Sur cet exemple précis en mettant une marge haute négative (-60px par exemple) à ton dernier flottant, tu obtiens ce que tu désires...mais ce n'est, selon moi, pas vraiment une solution fiable...

Mais encore une fois je peux me tromper, et il y a sûrement d'autres solutions avec ce groupe de flottants...

Pour une bannière avec cette configuration (et en me forçant un peu Smiley lol ) j'utiliserai certainement du positionnement relatif (box5) , absolu (emblème (left:0;)et autre chose à droite (right:0;top;0;) plus des marges pour les "titres centraux"...(margin-left:120px;) ou un truc dans le genre...
Mais il y a, là encore, d'autres solutions.

Cdt,
Sylvain
6l20 a écrit :

Sur cet exemple précis en mettant une marge haute négative (-60px par exemple) à ton dernier flottant, tu obtiens ce que tu désires...mais ce n'est, selon moi, pas vraiment une solution fiable...


En tout cas, il marche, et je suis content. Merci! On peut dire que c'est un rafistolage, un truc pour faire obéir IE, qui ne devrait pas être nécessaire en CSS pure.

D'autre part, on m'a filé une autre solution qui est légèrement plus compliqué, mais peut-être plus fiable. Ici, on crée une boîte supplémentaire, box55, qui enferme box52 et box53:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text matematikken</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
div#box5    {
    float:left;
    width:965px;
    height:90px;
    background-color:orange;
}

div#box51    {
    float:left;
    width:120px;
    height:90px;
    background-color:#006699;
}

div#box52    {
    float:left;
    width:725px;
    height:60px;
    background-color:#00FF00;
}

div#box53    {
    float:left;
    width:725px;
    height:30px;
    background-color:#996699;
}

div#box54    {
    float:left;
    width:120px;
    height:90px;
    background-color:#33FF00;
}
div#box55    {
    float:left;
    width:725px;
    height:90px;
    background-color:#00FF00;
}
-->
</style>

</head>
<body>

<div id="box5">

<div id="box51">box 51</div>

<div id="box55">
<div id="box52">box 52</div>
<div id="box53">box 53</div>
</div>

<div id="box54">box 54</div>

</div>
</body>
</html>


Mais à qui viendra l'idée de créer une boîte supplémentaire, et aussi comme Chasseur de 1/2 Kiwiz, d'ajouter -60px? Les deux méthodes marchent, mais où est la logique?
Modifié par jansoz (30 Oct 2008 - 20:16)
Bonsoir jansoz,

Au risque de me répéter, le comportement constaté par le positionnement flottant me semble tout à fait conforme, normal et attendu :
1 - 51 flotte à gauche
2 - 52 flotte à gauche derrière 51
3 - 53 ne peut pas flotter à gauche derrière 52, il n'a pas suffisamment de place, il glisse en dessous et se place là où il y a de la place...derrière 51 où il vient flotter à gauche
4 -54 arrive, vient flotter à gauche juste derrière 53, il y a de la place ça tombe bien !

Pourquoi voudrais-tu que, de lui même, ce bloc vienne combler le vide au dessus de lui, il doit flotter à gauche de 53, il fait son job.
La marge négative, par exemple, vient contrarirer la bestiole et le positionne 60px plus haut, là où tu désirais qu'il soit.
La boite supplémentaire vient, quant à elle, indiquer à 53 qu'elle doit flotter à gauche de 55, ce qu'elle fait, et tu obtiens le même résultat...
What else ? Smiley cligne
Ce sont de drôles de bestioles ces flottants, non ? Smiley cligne

Sinon, il existe d'autres types de positionnement... Smiley rolleyes Smiley lol

Bonne continuation,
Cdt,
Sylvain
6l20 a écrit :
4 -54 arrive, vient flotter à gauche juste derrière 53, il y a de la place ça tombe bien !

Pourquoi voudrais-tu que, de lui même, ce bloc vienne combler le vide au dessus de lui, il doit flotter à gauche de 53, il fait son job.
Sylvain


Oui, que je suis bête! J'étais tellement pris par les calculs pour bien définir la grande boîte et les autres à l'intérieur et la représentation à l'écran que je ne voyais plus la suite des elements, que 54 arrive après 53 et, de ce fait, il flotte exactement comme je l'ai défini, mais pas comme je l'avais imaginé!

Que personne ne vienne dire que tu n'es pas patient! Merci, Sylvain!!

Smiley biggrin /Jansoz
Modifié par jansoz (30 Oct 2008 - 22:40)
Sujet clos
Aller à