Position div en css?

Position div en css? - HTML/CSS - Programmation

Marsh Posté le 12-05-2005 à 09:36:30    

Bonjour,
 
j'ai une page sommes toutes assez simple :
 
Un div conteneur remplissant toutes la page. (contents)
Un div header, pour le haut
Un div main, pour le centre
Un div footer, pour le pied de page.
 
ça me donne en html :
 
<html>
<head></head>
<body>
<div id="contents>
 <div id="header"></div>
 <div id="main"></div>
 <div id="footer"></div>
</div>
 
et le Css correspondant  

Code :
  1. html, body, #contents
  2. {
  3. min-height: 100%;
  4. width: 100%;
  5. height: 100%;
  6. }
  8. /*
  9. * The "height" above is a hack for IE5+/Win.  Below we adjust
  10. * it using the child selector to hide from IE5+/Win
  11. */
  13. html>body, html>body #contents
  14. {
  15. height: auto;
  16. }
  18. /*
  19. * Without this, Moz1.0 adds a vertical scrollbar
  20. */
  22. body
  23. {
  24. margin: 0;
  25. font-family: verdana;
  26. }
  28. #contents
  29. {
  30. position: absolute;
  31. top: 0;
  32. left: 0;
  33. }
  35. #header
  36. {
  37. position: absolute;
  38. top: 0;
  39. left: 0;
  40. background-color: #aaeeaa;
  41. width: 100%;
  42. text-align: center;
  43. }
  45. #footer
  46. {
  47. position: absolute;
  48. bottom: 0;
  49. left : 0;
  50. background-color: #ccbbaa;
  51. width: 100%;
  52. text-align: center;
  53. font-family:verdana;
  54. font-size:10px;
  55. color:navy;
  56. }
  58. #main
  59. {
  60. margin-top: 10em;
  61. margin-bottom: 5em;
  62. height: auto;
  63. padding: .5em;
  64. background-color: #aabbcc;
  65. }


 
Je voudrais que mon header, main et footer, s'adpate au contenu.
La comme c'est fait le main est tjs au même endroit.
 
merci :)

Reply

Marsh Posté le 12-05-2005 à 09:36:30   

Reply

Marsh Posté le 13-05-2005 à 15:55:00    

Salut  :hello:  
 
Je ne suis pas sûr d'avoir compris ce que tu veux faire, mais essayes çà :

Code :
  1. html, body, #contents 
  2.      {
  3.          min-height: 100%;
  4.          width: 100%;
  5.          height: 100%;
  6.      }
  7.    
  8.      /*
  9.      * The "height" above is a hack for IE5+/Win.  Below we adjust
  10.      * it using the child selector to hide from IE5+/Win
  11.      */
  12.    
  13.      html>body, html>body #contents 
  14.      {
  15.          height: auto;
  16.      }
  17.    
  18.      /*
  19.      * Without this, Moz1.0 adds a vertical scrollbar
  20.      */
  21.    
  22.      body 
  23.      {
  24.          margin: 0;
  25.          font-family: verdana;
  26.      }
  27.    
  28.      #contents 
  29.      {
  30.          position: absolute;
  31.          top: 0;
  32.          left: 0;
  33.      }
  34.    
  35.      #header 
  36.      {
  37.          /*position: absolute;
  38.          top: 0;
  39.          left: 0;*/
  40.          background-color: #aaeeaa;
  41.          width: 100%;
  42.          text-align: center;
  43.      }
  44.    
  45.      #footer 
  46.      {
  47.          /*position: absolute;
  48.          bottom: 0;
  49.          left : 0;*/
  50.          background-color: #ccbbaa;
  51.          width: 100%;
  52.          text-align: center;
  53.          font-family:verdana;
  54.          font-size:10px;
  55.          color:navy;
  56.      }
  57.    
  58.      #main 
  59.      {
  60.          /*margin-top: 10em;
  61.          margin-bottom: 5em;*/
  62.          height: auto;
  63.          padding: .5em;
  64.          background-color: #aabbcc;
  65.      }


Si celà correspond à ce que tu souhaites faire alors tu peux virer tout ce que j'ai mis en commentaire c'est à dire compris entre /* et */
 
Mais sâches que si tu ne veux pas que le "main" soit toujours à la même place, il ne faut pas que le positionnement de ton bloc soit absolu.
 
 [:fafane84]


---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 24-05-2005 à 11:25:50    

je profite de ce post, pour exposer mon problème :whistle:
 
Je souhaiterai position un bout de texte en bas de mon cadre.
L'alignement horizontal marche parfaitement mais je peux pas en dire autant pour l'alignement vertical :S
 

Code :
  1. #header
  2. {
  3. text-align:right;
  4. vertical-align:bottom;
  5. background-image:url(banniere.GIF);
  6. width: 700px;
  7. height: 100px;
  8. }
  10. <div id="header">
  11. text
  12. </div>

Reply

Marsh Posté le 24-05-2005 à 11:43:32    

Code :
  1. #header
  2. {
  3. float:right;
  4. vertical-align:bottom;
  5. background-image:url(banniere.GIF);
  6. width: 700px;
  7. height: 100px;
  8. }
  10. <div id="header">
  11. text
  12. </div>


 
Je mettrai ça moi personnellement.
 
Edit : le parser BBcode parse pas pour voir s'il y a du bbcode dans les balise <code> ... rahlala >_<


Message édité par plainsofpain le 24-05-2005 à 11:49:19

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 24-05-2005 à 11:48:02    

Le vertical-align ne sert qu'a aligner des éléments inline entre eux (faudra commencer par lire la spécification, hein ;)), sauf dans le cas d'un display: table-cell. Bon ça marche pas sous IE, mais spagrave. Les gens avec un vrai navigateurs verront le truc en bas, et les autres verront le truc en bas. A condition bien-sûr que ce ne soit pas trop grave :)

Reply

Marsh Posté le 24-05-2005 à 11:49:16    

si je fais la modif que tu conseilles, le text ce retrouve à gauche :p

Reply

Marsh Posté le 24-05-2005 à 17:42:00    

FlorentG a écrit :

Le vertical-align ne sert qu'a aligner des éléments inline entre eux (faudra commencer par lire la spécification, hein ;)), sauf dans le cas d'un display: table-cell. Bon ça marche pas sous IE, mais spagrave. Les gens avec un vrai navigateurs verront le truc en bas, et les autres verront le truc en bas. A condition bien-sûr que ce ne soit pas trop grave :)


 
apres lecture d'un article j'vien de comprendre le pourquoi :jap:
 

Citation :


#header
{
display:table-cell;
text-align:right;
vertical-align:bottom;
background-image:url(banniere.GIF);
width: 700px;
height: 100px;
}


 
cela marche parfaitement :D


Message édité par snarky le 24-05-2005 à 17:43:18
Reply

Sujets relatifs:

Leave a Replay

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