position relative ? absolue ? table ? bref : que choisir dans mon cas?

position relative ? absolue ? table ? bref : que choisir dans mon cas? - HTML/CSS - Programmation

Marsh Posté le 25-10-2006 à 14:01:59    

Bonjour,
 
étant novice( voir même pire) en css, et plus généralement en agencement des différents éléments constitutifs d'une page, je demande aide et conseils sur le cas suivant :
 
Voici ce que je veux réaliser :
 
http://img144.imageshack.us/img144/4124/pagedn6.png
 
(Note : par "cadre" j'entend "bloc" ou "zone" mais pas "frame" ).
 
Les cadres rouges sont des zones ayant un placement fixe sur toutes mes pages.
Leur contenu peut être variable lorsque qu'ils contiennent du vert mais leurs dimensions doivent rester les mêmes.
 
Le cadre vert (4) doit avoir une taille fixe en largeur, mais une taille variable en longueur, cette taille dépendant de ce contenu. Son placement est toujours le même, c'est à dire son angle haut gauche étant situé à l'intersection du cadre (2) et (3).
 
Le cadre bleu (5) a une taille fixe, mais son positionnement dépend des autres cadres. Il doit être situé sous l'élément le plus "bas" entre le cadre (3) et (4). Dans l'image présentée ci-dessus, le contenu du cadre (4) est assez fourni pour qu'il soit plus grand que le cadre (3) mais ca ne sera pas toujours le cas.
 
J'ai donc tenté de coder tout ca et voici ce que j'ai réalisé :  
 
Code html :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  5. <link rel="stylesheet" type="text/css" media="screen" href="./res/test_style.css">
  6. <title>Page de test des cadres</title>
  7. </head>
  8. <body>
  9. <!-- bandeau_haut (1) -->
  10. <img src="res/test_bandeau_haut.png">
  11. <div class="test_lien_bandeau_haut">
  12. <a href="test2.html"><img src="res/test_lien_bandeau_haut.png" border="0" /></a>
  13. </div>
  14. <div class="test_text_bandeau_haut">
  15. Youpla boum
  16. </div>
  17. <!-- bandeau_gauche (2) -->
  18. <div class="test_bandeau_gauche">
  19. <img src="res/test_bandeau_gauche.png">
  20. </div>
  21. <!-- bandeau_onglets (3) -->
  22. <div class="test_onglets">
  23. <a href="onglet1.html"><img src="res/test_onglet_pair.png" border=0></a>
  24. <a href="onglet2.html"><img src="res/test_onglet_impair.png" border=0></a>
  25. <a href="onglet3.html"><img src="res/test_onglet_pair.png" border=0></a>
  26. <a href="onglet4.html"><img src="res/test_onglet_impair.png" border=0></a>
  27. <a href="onglet5.html"><img src="res/test_onglet_pair.png" border=0></a>
  28. </div>
  29. <!-- contenu (4) -->
  30. <div class="test_contenu">
  31. salut <br />
  32. ca <br />
  33. va <br />
  34. bien <br />
  35. ? <br/><br/>
  36. salut <br />
  37. ca <br />
  38. va <br />
  39. bien <br />
  40. ? <br/><br/>
  41. salut <br />
  42. ca <br />
  43. va <br />
  44. bien <br />
  45. ?
  46. </div>
  47. <!-- bandeau_bas (5) -->
  48. <div class="test_bandeau_bas">
  49. <img src="res/test_bandeau_bas.png">
  50. </div>
  51. </body>
  52. </html>


 
Code css :

Code :
  1. @CHARSET "ISO-8859-1";
  2. .test_lien_bandeau_haut {
  3. position: relative;
  4. top: -21px;
  5. left: 2px
  6. }
  7. .test_text_bandeau_haut {
  8. position: relative;
  9. top: -37px;
  10. left: 55px;
  11. color: white;
  12. font-family: arial, verdana;
  13. font-size: 11px;
  14. font-weight: bold
  15. }
  16. .test_bandeau_gauche {
  17. position: relative;
  18. top: -32px;
  19. left: 0px;
  20. }
  21. .test_onglets {
  22. position: relative;
  23. top: -491px;
  24. left: 142px;
  25. width: 606px;
  26. height: 25px;
  27. color: black;
  28. }
  29. .test_contenu {
  30. position: relative;
  31. top: -491px;
  32. left: 142px;
  33. width: 606px;
  34. color: black;
  35. background-color: grey;
  36. }
  37. .test_bandeau_bas {
  38. position: relative;
  39. top: -459px;
  40. left: 0px;
  41. }


 
Et voici ce que j'obtiens :  
 
http://img80.imageshack.us/img80/3264/page2rw3.th.png
 
On voit bien que le bandeau du bas ne se place pas où je le souhaite :/
 
Ma question est donc :
 
1*/ comment faire ce que je veux ?  :D  
2*/ L'utilisation des position:relative est elle judicieuse ici ? Je n'ai aucune expèrience à ce niveau là donc toute information est la bienvenue !
 
Merci !  :hello:


Message édité par ikao2 le 25-10-2006 à 14:04:47
Reply

Marsh Posté le 25-10-2006 à 14:01:59   

Reply

Marsh Posté le 25-10-2006 à 14:30:57    

bah c est souvent une question de gout tout ca
je ne me sers de "position" que tres rarement ca fait un peu trop table-like a mon gout
en général je fais tout en float et ton 5 se placerait naturellement sous le 4
apres ca demande parfois quelques petits hacks (du genre un div qui englobe 3 et 4 pour eviter les mauvaises surprises) mais je trouve ca plus souple  
surtout que t as un div de hauteur variable (4) donc la avec tes position tu l auras dans l os a tous les coups :/


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 25-10-2006 à 14:47:56    

Ok, mes position ne sont pas la solution, je vais donc tenter de voir ton histoire de float, mais de ce que j'en ai lu pour le moment, je ne comprends pas trop le fonctionnement.
 
Je vais tenter de me dépatouiller avec ça et je reviendrai à la charge si ca ne fonctionne pas :)
 
Merci.

Reply

Marsh Posté le 25-10-2006 à 16:08:24    

Bon je m'en sors pas...
 
voilà le code que j'ai réalisé :
 

Code :
  1. <html>
  2. <head>
  3. </head>
  4. <style type="text/css">
  5. <!--
  6. body {
  7.   font-family: Arial;
  8.   color: black;
  9. }
  10. .jaune {
  11.   float: right;
  12.   margin-left: 10px;
  13.   margin-top: 10px;
  14. }
  15. .verte {
  16.   background-color: white;
  17.   background-image: url(test_bandeau_haut.png);
  18.   background-repeat: no-repeat;
  19. }
  20. .bandeau_haut {
  21.   background-color: white;
  22.   background-image: url(bandeau_haut.png);
  23.   background-repeat: no-repeat;
  24.   width: 991px;
  25.   height: 102px;
  26. }
  27. .lien_bandeau_haut {
  28.   color: white;
  29.   float: left;
  30.   margin-left: 15px;
  31.   margin-top: 85px;
  32. }
  33. .bandeau_bas {
  34.   background-color: white;
  35.   background-image: url(bandeau_bas.png);
  36.   background-repeat: no-repeat;
  37.   width: 992px;
  38.   height: 37px;
  39. }
  40. .bandeau_gauche {
  41.   background-color: white;
  42.   background-image: url(bandeau_gauche.png);
  43.   background-repeat: no-repeat;
  44.   width: 141px;
  45.   height: 459px;
  46. }
  47. .ongletsEtContenu {
  48.   float: left;
  49.   margin-left: 142px;
  50. }
  51. .onglets {
  52.   width: 606px;
  53.   height: 23px; 
  54. }
  55. .contenu {
  56.   width: 606px;
  57. }
  58. -->
  59. </style>
  60. <body>
  61. <div class="lien_bandeau_haut">hello</div>
  62. <div class="bandeau_haut"></div>
  63. <div class="ongletsEtContenu">
  64. <div class="onglets">
  65.  <a href="onglet1.html"><img src="test_onglet_pair.png" border=0></a>
  66.  <a href="onglet2.html"><img src="test_onglet_impair.png" border=0></a>
  67.  <a href="onglet3.html"><img src="test_onglet_pair.png" border=0></a>
  68.  <a href="onglet4.html"><img src="test_onglet_impair.png" border=0></a>
  69.  <a href="onglet5.html"><img src="test_onglet_pair.png" border=0></a>
  70. </div>
  71. <div class="contenu"> salut <br/> [...] salut <br/></div>
  72. </div>
  73. <div class="bandeau_gauche"></div>
  74. <div class="bandeau_bas"></div>
  75. </body>
  76. </html>


 
Je tombe dans le problème inverse, c'est à dire que le cadre (4) déborde sur le (5) sans le pousser.
 
Ce qu'il faut c'est que les cadres (3) ET (4) "poussent" le cadre 5. Or j'arrive à faire soit l'un, soit l'autre mais pas les deux...
 
j'ai mis la (1) "fixe", la (2) "fixe", la (3) et (4) flottantes gauche et la (5) "fixe".
 
Quelqu'un a une idée ?


Message édité par ikao2 le 25-10-2006 à 16:09:56
Reply

Marsh Posté le 25-10-2006 à 16:26:56    

wééééééééé
 
Je crois que je viens de trouver la solution à mon problème, en utilisant un "spacer".
 
Tout est expliqué sur ce site : http://openweb.eu.org/articles/initiation_float/
 
En gros, ca met à niveau la hauteur de mon cadre (2) sur le cadre (4).
Je trouve pas ca super propre, mais bon, c'est déjà une solution !
 
Si vous avez une autre idée, surtout, n'hésitez pas !

Reply

Marsh Posté le 25-10-2006 à 16:40:18    

bon y a un truc a savoir
c est que les positionnements sont independants : que ce soint in ou hors flux....
si t en places un en absolute et un autre en float ca va bugger parce qu ils n ont aucun moyen de savoir (entre eux) ou ils sont placés effectivement (et donc ca s applique de la meme facon que ce soit avec un element en flux normal / un element en flux modifié (float/position))
en gros :  
1 - t as un positionnement "normal" (c est a dire pas de position ou float en css)
2 - t as un flux "détourné" : float ou position absolute/relative
ce qui te fait en fait 4 (mais plutot 3 et demi) valeurs de flux:
normal
float
absolute
relative (relative est un cas particulier)
 
ces flux n ont aucun moyen de communiquer entre eux:
le moyen le plus simple de garder une coherence entre ces divers elements est d utiliser a chaque fois le meme type de positionnement (normal/float/absolute)
 
si tu decides d utiliser du float tu mets tout en float
(pareil pour normal ou absolute)
la difference avec absolute ou relative c est que float ne prend pas en parametre les top/ bottom left/right : il viendra se placer naturellement dans l espace que tu lui as consigné
en gros avec "position" tu dois placer tes blocs au pixel pres (ce qui est plutot chiant : c est pour ca que je ne l utilise que rarement), avec float, si tu geres bien le truc, tout se fera naturellement sans prise de tete (evidemment si tu aimes placer tes bordels au pixel pres tu seras plus a l aise en absolute)
 
sinon oui :
openweb est une source d information non negligeable pour s initer aux css ;)


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 25-10-2006 à 16:59:11    

Ok je comprends plus ou moins ce que tu veux dire, mais je me demande comment ca peut marcher.
 
Par exemple, tu as 5 "boites".
Tu veux en placer 2 au même niveau, une en dessous, et 2 au même niveau encore un cran au dessous :
 
O O
 O
O O
 
Bah je ne comprends pas comment, en les gardant toutes en "float" tu peux jouer en hauteur ?
 
Moi je n'arrive à jouer que sur la largeur (comprendre placement gauche ou droite).
Quand je veux passer à la ligne suivante, je reviens en flux normal...
 
Donc si tu pouvais me donner quelques infos, voire même un mini exemple, ce serait sympa :)

Reply

Marsh Posté le 27-10-2006 à 09:25:00    

En float, si tu fais un div conteneur global qui contient tout tes div, si tu arrive a la taille max de ton div conteneur bah le div suivant passera tout seul en dessous.
 
Si tu veux forcer a passer en dessous tu mets clear: both sur le div d'avant, ainsi il n'y aura rien a droite ni a gauche.

Reply

Marsh Posté le 31-10-2006 à 11:24:01    

Okay, merci à tous, effectivement les "float" sont vraiment pas mal à utiliser dans certain cas, bien que la prise en main ne soit pas forcement aisée au départ (jouer sur les margin, padding et autres joyeusetés...).

Reply

Sujets relatifs:

Leave a Replay

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