Aide sur la mise en page d'un site (HTML/CSS)

Aide sur la mise en page d'un site (HTML/CSS) - HTML/CSS - Programmation

Marsh Posté le 27-10-2011 à 18:53:20    

Bonjour,
 
J'ai deux soucis : la partie droite où se situe le texte n'a pas la même hauteur que la partie avec le menu -qui pourrait la dépasser selon la quantité de texte et d'images- enfin je n'arrive pas à borner l'espace disponible pour le texte, j'aimerais qu'il reste que dans la partie blanche.
 
Voici le texte HTML et celui du CSS :
 
HTML

Code :
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.  <link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css" />
  6.         <title>...</title>
  7.     </head>
  8.     <body>
  9. <div id="header"></div>
  10. <div id="container">
  11. <div id="menu">
  12. <img src="images/menu.png" alt="Menu">
  13. </div>
  14. <div id="main"><div id="texte">
  15. <p>.</p>
  16. </div></div></div>
  17. <div id="footer"></div>
  18.     </body>
  19. </html>


 
 
 
CSS

Code :
  1. body
  2. {
  3.    width: 960px;
  4.    margin: auto; /* Pour centrer notre page */
  5.    margin-top: 0px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
  6.    margin-bottom: 0x;    /* Idem pour le bas du navigateur */
  7.    background-color: #000000; /* Le fond de la page sera vert */
  8.    font-size: medium; /* Paragraphes de 14 pixels */
  9.    text-align: justify;
  10.    font-family: Georgia, Arial, Verdana, serif;
  11.    padding-left: 5px;
  12.    padding-right: 5px;
  13. }
  14. div#header {
  15. float: center;
  16. width: 960px;
  17. height: 258px;
  18. background: black url(images/banniere.gif) no-repeat right bottom;
  19. }
  20. div#menu {
  21. float: left;
  22. width: 215px;
  23. background: black url(images/fondmenu.png) repeat right bottom;
  24. }
  25. div#main {
  26. float: left;
  27. width: 745px;
  28. background: black url(images/corps.jpg) repeat right bottom;
  29. }
  30. div#footer {
  31. clear: left;
  32. width: 960px;
  33. height: 231px;
  34. background: black url(images/footer.gif) no-repeat right bottom;
  35. }


 
http://img11.hostingpics.net/thumbs/mini_262699ScreenSite.png
 
 
Merci beaucoup !!

Reply

Marsh Posté le 27-10-2011 à 18:53:20   

Reply

Marsh Posté le 29-10-2011 à 06:34:43    

1 : n'ai pas peur d'utiliser des DIV, ce n'est pas la mort pour une structure.
2 : Evite de toucher au body comme tu l'as fait, laisse le tranquille, tu pourrais en avoir besoin pour d'autres problématiques
3 : Utilises un div pour englober ton site et appliques lui les propriétés que tu as collé sur le body, sauf les propriétés background,font-size et text-align, que tu peux laisser sur body, et mets un text-align:center sur body puis text-align:left sur ton container principal (celui que je t'ai demandé de creer :)) afin de centrer le site sous IE6,7,8 car tu utilises un doctype HTML5 qui n'est pas compris par ces sites, alors IE678 foncitonneront en mode dégradé et le centrage par margin, ne fonctionne pas.


---------------
Blablaté par Harko
Reply

Sujets relatifs:

Leave a Replay

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