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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS]mettre des boites les unes en dessous des autres

Profil supprimé

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

Publicité

macgawel

- 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)

Profil supprimé

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.

macgawel

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...

Profil supprimé

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>

toum_toum

Vivons masqués

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

phosphoreloaded

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.

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Lien imprimer basculant vers une autre feuille CSS	[CSS] Question de mise en page/structure générale (résolu)
[HTML/CSS/Javascript] Calcul coté client avec visualisation	Cherche docu CSS (mise en page "basique")
Recuperer des infos d'un editeur de texte et les mettre en forme	[Résolu] Hack CSS possible sur positionnement hauteur d'un div ?
Imbrication de style CSS dans balises HTML ul li marche pas?	Problème affichage Safari (HTML/CSS)
[VB] avec une requet SQL la mettre dans une TextBox	Problème menu horizontal CSS
Plus de sujets relatifs à : [CSS]mettre des boites les unes en dessous des autres

Page générée en 0.065 secondes