Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1313 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1944936
Profil sup​primé
Posté le 26-11-2009 à 14:08:22  answer
 

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:

mood
Publicité
Posté le 26-11-2009 à 14:08:22  profilanswer
 

n°1945226
macgawel
Posté le 27-11-2009 à 10:07:30  profilanswer
 


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

n°1945245
Profil sup​primé
Posté le 27-11-2009 à 10:35:17  answer
 

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.

n°1945253
macgawel
Posté le 27-11-2009 à 10:53:12  profilanswer
 

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

Code :
  1. <body>
  2. ...
  3.     <div list_debug en absolute>
  4.         <div debug en relatif>message 1</div>
  5.         <div debug en relatif>message 2</div>
  6.     </div>
  7. ...
  8. </body>


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

n°1945270
Profil sup​primé
Posté le 27-11-2009 à 11:26:57  answer
 

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

Code :
  1. <body>
  2. <div>lorem ipsum</div>
  3. <div>lorem ipsum</div>
  4.         <div class="debug">message 1</div>
  5. <div>lorem ipsum
  6. <div>lorem ipsum</div>
  7. </div>
  8. <div>lorem ipsum</div>
  9.         <div class="debug">message 2</div>
  10.  
  11. <div>lorem ipsum</div>
  12. </body>

n°1945537
toum_toum
Vivons masqués
Posté le 28-11-2009 à 10:57:17  profilanswer
 

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 ? :o )

n°1945578
phosphorel​oaded
Posté le 28-11-2009 à 16:47:15  profilanswer
 

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.


Aller à :
Ajouter une réponse
  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 visualisationCherche 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 TextBoxProblème menu horizontal CSS
Plus de sujets relatifs à : [CSS]mettre des boites les unes en dessous des autres


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR