[CSS]mettre des boites les unes en dessous des autres

Marsh Posté le 26-11-2009 à 14:08:22

Salut,
j'ai une structure html assez complexe sur un site et j'ai une boite disons .debug qui s'affiche quand il y a une erreur.
Vu qu'elle peut apparaitre un peu partout et pas forcément où c'est visible, j'ai eu la merveilleuse idée de la mattre en position:absolute;
avec un joli background-color ce qui fait qu'elle est super visible.
Le soucis, c'est que parfois, elle n'est pas toute seule
donc j'ai toutes mes boites .debug qui se superposent et ça fait pire que mieux.
Est-il possible de configurer ces boites pour qu'elle se mettent les unes en dessous des autres ?
:jap:

Message cité 1 fois

Reply

Marsh Posté le 26-11-2009 à 14:08:22

Reply

Marsh Posté le 27-11-2009 à 10:07:30

- Si tu maîtrise le code, tu peux mettre tous les messages d'erreur dans la même boîte.
- Sinon, tu peux tenter de créer un "super" conteneur #list_debug (en position absolue), dans lequel tu places tes boîtes .debug (en relatif)

Reply

Marsh Posté le 27-11-2009 à 10:35:17

les messages d'erreurs viennent du framework, la je ne peux pas faire grand chose.
Par contre je pourrais mettre mon body en absolute mais je ne vois pas comment mes .debug se mettraient les unes en dessous des autres en relative étant donné qu'il y a du code entre les box.

Reply

Marsh Posté le 27-11-2009 à 10:53:12

C'est pas le body qu'il faut mettre en absolute. Je pensais à une boîte qui contiendrait les autres boîtes...

Code :

<body>
...
    <div list_debug en absolute>
        <div debug en relatif>message 1</div>
        <div debug en relatif>message 2</div>
    </div>
...
</body>

Après, sans connaître le framework et sans voir le code html, c'est un peu difficile de préciser...

Reply

Marsh Posté le 27-11-2009 à 11:26:57

les boites se déclenchent un peu partout donc ça ressemble plus à ça :

Code :

<body>
<div>lorem ipsum</div>
<div>lorem ipsum</div>
        <div class="debug">message 1</div>
<div>lorem ipsum
<div>lorem ipsum</div>
</div>
<div>lorem ipsum</div>
        <div class="debug">message 2</div>
 
<div>lorem ipsum</div>
</body>

Reply

Marsh Posté le 28-11-2009 à 10:57:17

Pourquoi la mettre en position absolue si tout le reste est en relatif ? Elle se chevauchera nécessairement en fait, non ?...

Si tu mets toutes tes boites en relatif elles se suivront toutes dans l'ordre de leur écriture, et donc à toi de choisir entre quelle et quelle boîte elle doit apparaître (mais j'ai peut-être mal compris ? )

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

Reply

Marsh Posté le 28-11-2009 à 16:47:15

Quand tu positionnes en absolu ton message, il (sort du flux et) se positionne par rapport au premier ancêtre positionné. S'il n'y a pas d'ancêtre positionné alors ce sera par rapport à la fenêtre et tous les blocs se positionnent par rapport à la même référence si tu indiques les mêmes valeurs pour les instructions top/bottom et left/right. D'où superposition.
Si maintenant tu positionnes en relatif tes blocs lorem ipsum, chacun d'eux sera le premier ancêtre positionné de chaque message d'erreur et ce sera par rapport à eux que tu pourras positionner en absolu chaque message.
Il faut par contre que tes messages soient plus courts que tes lorem ipsum sinon il y aura superposition : étant hors du flux, un message d'erreur très long ne pousse pas vers le bas le reste du contenu.

Reply

[CSS]mettre des boites les unes en dessous des autres

Sujets relatifs:

Leave a Replay