[Résolu][Divs] Dépendance

Dépendance [Résolu][Divs] - HTML/CSS - Programmation

Marsh Posté le 14-10-2005 à 11:13:35    

Bonjour à vous !
 
Voici un problème assez fréquent sur les site dynamiques avec structure un peu complexe:
On ne connait pas la taille du div central, mais il se doit d'"étirer" le fond du div principal.
Seulement... ça ne marche pas si bien.. :/
 

Code :
  1. #conteneur {
  2. width:800px;
  3. background-color:#cccccc;
  4. margin-left:auto;
  5. margin-right:auto;
  6. position:relative;
  7. min-height:200px;
  8. height:200px;
  9. #top {
  10. position:relative; height:100px;
  11. }
  12. #left {
  13. position:absolute;
  14. left:0px;
  15. top:110px;
  16. width:100px;
  17. }
  18. #center {
  19. position:relative;
  20. width:600px;
  21. left:110px;
  22. top:8px;
  23. }
  24. #right {
  25. position:absolute;
  26. width:80px;
  27. left:720px;
  28. height:100px;
  29. top:110px;
  30. }


 

Code :
  1. <div id="conteneur">
  2. <div id="top"></div>
  3. <div id="left"><ul><li></li><li></li></ul></div>
  4. <div id="center">
  5.   <p>lkjbfckjvb</p>
  6.   <p>l,dsn vkjdvb kjdb </p>
  7.   <p>kjbvfkjvbdkjbv</p>eqiugv iuvgs i vgv siuvg dsiuvg viug viu gvivg <br> oefgue iugeziufgfiu
  8. </div>
  9. <div id="right"></div>
  10. </div>


 
 
Voyez, l'idée est de faire en sorte que le div central étire le fond, tout en gardant une hauteur minimale à celui-ci.
J'ai beau tordre ce code dans tous les sens, je ne vois que des bugs et des bugs ou de l'incompréhension...  :heink:  
 
C'est une structure assez complexe, et pour un site dynamique..  :p  
Je crois que ce problème est fréquemment rencontré...
 
On ne peut se rendre compte des divers soucis que je rencontre qu'une fois copié-collé dans un éditeur...
En tout cas, merci de bien vouloir prendre le temps de jouer un peu au puzzle avec moi !  ;)


Message édité par Nigel_ le 17-10-2005 à 17:39:31

---------------
RPGamers, la passion du RPG : http://www.rpgamers.fr
Reply

Marsh Posté le 14-10-2005 à 11:13:35   

Reply

Marsh Posté le 14-10-2005 à 20:05:06    

Salut !!
 
Je pense que ce que tu veux faire est relativement simple à mettre en oeuvre  :wahoo:
Par contre, il y a beaucoup de choses à revoir, tu veux que ton bloc s'étire en fonction du contenu, alors pourquoi lui donnes tu une hauteur ?
Une largeur de 800px fera apparaître une barre de scroll pour les résolutions 800*600, le mieux est de mettre la taille à environ 760/770 px.
Saches que le min-width ne fonctionne pas avec IE, il faut un hack.
 
Tu as plein d'exemple de mises en page chez alsa, inspires toi en  ;)

Reply

Marsh Posté le 15-10-2005 à 00:35:37    

Oui enfin, ce code n'est qu'un schéma. :)
Je m'en sers pour faire mes tests, mais le soucis principal est que je ne trouve pas le moyen pour que le contenu étire le div principal, sans que ça délire completement... :/


---------------
RPGamers, la passion du RPG : http://www.rpgamers.fr
Reply

Marsh Posté le 15-10-2005 à 05:06:32    

tu aurais d'abord séparé les styles du contenu HTML ca aurait été plus lisible. ca ait trop bordel là, même si c'est pour faire des tests


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 15-10-2005 à 19:52:07    

Ok, je fais ça.
Mais si vous arrivez à voir ce qui coinçe rien que de visu, vous êtes très forts. ^^
 
Edit: Voilà ^^


Message édité par Nigel_ le 15-10-2005 à 19:57:45

---------------
RPGamers, la passion du RPG : http://www.rpgamers.fr
Reply

Marsh Posté le 16-10-2005 à 23:14:28    

ca serait pas un truc comme ça que tu cherche à faire ???
http://gatsu.ftp.free.fr/Modele/warcraft/maquette.html
 
:D


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 17-10-2005 à 07:40:10    

Ohohoh !
Je vais regarder ça de plus près. ^^
Je ne sais pas trop si ça gêne, mais j'ai en fait un div supplémentaire qui vient s'ajouter sur la droite.
 
Enfin bon j'étudie cette page, merci infiniement !


---------------
RPGamers, la passion du RPG : http://www.rpgamers.fr
Reply

Marsh Posté le 17-10-2005 à 18:23:45    

Ok, c'est effectivement comme ça qu'il faut procéder, merci à toi Gatsusat !


---------------
RPGamers, la passion du RPG : http://www.rpgamers.fr
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed