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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Position div en css?

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Position div en css?

n°1080534
AGA
La boîte à Bokeh!
Posté le 12-05-2005 à 09:36:30  profilanswer
 

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

mood
Publicité
Posté le 12-05-2005 à 09:36:30  profilanswer
 

n°1082463
fafane84
Posté le 13-05-2005 à 15:55:00  profilanswer
 

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
n°1094632
snarky
Posté le 24-05-2005 à 11:25:50  profilanswer
 

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>

n°1094679
plainsofpa​in
Pingouino's lover
Posté le 24-05-2005 à 11:43:32  profilanswer
 

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
n°1094688
FlorentG
Unité de Masse
Posté le 24-05-2005 à 11:48:02  profilanswer
 

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

n°1094692
snarky
Posté le 24-05-2005 à 11:49:16  profilanswer
 

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

n°1095349
snarky
Posté le 24-05-2005 à 17:42:00  profilanswer
 

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

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

  Position div en css?

 

Sujets relatifs
la position a:hover ne veux plus partir!!!position de de 2 clip l'un par rapport a l'autre
[RESOLU] - Superposer 2 Div en position:relative ?[RESOLU] [CSS] aligner deux DIV sans position absolu ???
Afficher la position d'un clipposition de div dans un div différent sous IE et sous FF
[VBS] position de la souris ...Position d'un clip dans un clip
VB .NET récupérer la position de la souris[C#/Dx 9] position souris/mesh
Plus de sujets relatifs à : Position div en css?

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

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