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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1464751
ikao2
okaïdi okaïda
Posté le 25-10-2006 à 14:01:59  profilanswer
 

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>
  10. <!-- bandeau_haut (1) -->
  11. <img src="res/test_bandeau_haut.png">
  12. <div class="test_lien_bandeau_haut">
  13. <a href="test2.html"><img src="res/test_lien_bandeau_haut.png" border="0" /></a>
  14. </div>
  15. <div class="test_text_bandeau_haut">
  16. Youpla boum
  17. </div>
  19. <!-- bandeau_gauche (2) -->
  20. <div class="test_bandeau_gauche">
  21. <img src="res/test_bandeau_gauche.png">
  22. </div>
  24. <!-- bandeau_onglets (3) -->
  25. <div class="test_onglets">
  26. <a href="onglet1.html"><img src="res/test_onglet_pair.png" border=0></a>
  27. <a href="onglet2.html"><img src="res/test_onglet_impair.png" border=0></a>
  28. <a href="onglet3.html"><img src="res/test_onglet_pair.png" border=0></a>
  29. <a href="onglet4.html"><img src="res/test_onglet_impair.png" border=0></a>
  30. <a href="onglet5.html"><img src="res/test_onglet_pair.png" border=0></a>
  31. </div>
  33. <!-- contenu (4) -->
  34. <div class="test_contenu">
  35. salut <br />
  36. ca <br />
  37. va <br />
  38. bien <br />
  39. ? <br/><br/>
  40. salut <br />
  41. ca <br />
  42. va <br />
  43. bien <br />
  44. ? <br/><br/>
  45. salut <br />
  46. ca <br />
  47. va <br />
  48. bien <br />
  49. ?
  50. </div>
  52. <!-- bandeau_bas (5) -->
  53. <div class="test_bandeau_bas">
  54. <img src="res/test_bandeau_bas.png">
  55. </div>
  57. </body>
  58. </html>


 
Code css :

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


 
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
mood
Publicité
Posté le 25-10-2006 à 14:01:59  profilanswer
 

n°1464773
mIRROR
Chevreuillobolchévik
Posté le 25-10-2006 à 14:30:57  profilanswer
 

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
n°1464787
ikao2
okaïdi okaïda
Posté le 25-10-2006 à 14:47:56  profilanswer
 

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.

n°1464874
ikao2
okaïdi okaïda
Posté le 25-10-2006 à 16:08:24  profilanswer
 

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. }
  11. .jaune {
  12.   float: right;
  13.   margin-left: 10px;
  14.   margin-top: 10px;
  15. }
  16. .verte {
  17.   background-color: white;
  18.   background-image: url(test_bandeau_haut.png);
  19.   background-repeat: no-repeat;
  20. }
  22. .bandeau_haut {
  23.   background-color: white;
  24.   background-image: url(bandeau_haut.png);
  25.   background-repeat: no-repeat;
  26.   width: 991px;
  27.   height: 102px;
  28. }
  30. .lien_bandeau_haut {
  31.   color: white;
  32.   float: left;
  33.   margin-left: 15px;
  34.   margin-top: 85px;
  35. }
  37. .bandeau_bas {
  38.   background-color: white;
  39.   background-image: url(bandeau_bas.png);
  40.   background-repeat: no-repeat;
  41.   width: 992px;
  42.   height: 37px;
  43. }
  45. .bandeau_gauche {
  46.   background-color: white;
  47.   background-image: url(bandeau_gauche.png);
  48.   background-repeat: no-repeat;
  49.   width: 141px;
  50.   height: 459px;
  51. }
  53. .ongletsEtContenu {
  54.   float: left;
  55.   margin-left: 142px;
  56. }
  58. .onglets {
  59.   width: 606px;
  60.   height: 23px; 
  61. }
  63. .contenu {
  64.   width: 606px;
  65. }
  66. -->
  67. </style>
  68. <body>
  71. <div class="lien_bandeau_haut">hello</div>
  72. <div class="bandeau_haut"></div>
  73. <div class="ongletsEtContenu">
  74. <div class="onglets">
  75.  <a href="onglet1.html"><img src="test_onglet_pair.png" border=0></a>
  76.  <a href="onglet2.html"><img src="test_onglet_impair.png" border=0></a>
  77.  <a href="onglet3.html"><img src="test_onglet_pair.png" border=0></a>
  78.  <a href="onglet4.html"><img src="test_onglet_impair.png" border=0></a>
  79.  <a href="onglet5.html"><img src="test_onglet_pair.png" border=0></a>
  80. </div>
  81. <div class="contenu"> salut <br/> [...] salut <br/></div>
  82. </div>
  83. <div class="bandeau_gauche"></div>
  84. <div class="bandeau_bas"></div>
  85. </body>
  86. </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
n°1464896
ikao2
okaïdi okaïda
Posté le 25-10-2006 à 16:26:56  profilanswer
 

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 !

n°1464908
mIRROR
Chevreuillobolchévik
Posté le 25-10-2006 à 16:40:18  profilanswer
 

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
n°1464930
ikao2
okaïdi okaïda
Posté le 25-10-2006 à 16:59:11  profilanswer
 

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

n°1465832
Cheinz
Posté le 27-10-2006 à 09:25:00  profilanswer
 

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.

n°1468057
ikao2
okaïdi okaïda
Posté le 31-10-2006 à 11:24:01  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
compression absolueEliminer doublons d'une table avec condition sur un champ
afficher les 3 plus grandes valeurs dans une tableafficher toutes les enregistrements d'une table ext.
PHP pour choisir la CSS ?extraction des image d'une table
verif donnee venant d'un post avec donnee table sqlQuelles architecture choisir? Quel langage: .Net, JAVA, LAMP?
Requête SQL dans une table Hierarchique étrange (Oracle)Impossible d'insérer un nombre dans une table MySQL (Prob de noob dsl)
Plus de sujets relatifs à : position relative ? absolue ? table ? bref : que choisir dans mon cas?

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.116 secondes

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