Votre question

découpage css simple

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
31 Octobre 2008 23:25:13

bonjour.
j'ai quelques difficultées à découper mon graphisme. Pourtant il est quasi enfantin.
le voila:


donc je part sur 4 divs: une pour le contenu entier, un pour la barre de gauche, un pour le centre et un pour celle de droite.
http://adpersonnel.free.fr/prba/theme/effet_gauche.gif
http://adpersonnel.free.fr/prba/theme/effet_droite.gif

mon html:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" rel="nofollow" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" rel="nofollow" target="_blank">http://www.w3.org/1999/xhtml</a>">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title></title>
  6. <meta name="description" content="">
  7. <meta name="keywords" content="">
  8. <meta name="robots" content="">
  9. <link rel="shortcut icon" href="" />
  10. <link rel="stylesheet" type="text/css" href=style.css />
  11. </head>
  12. <body>
  13. <div id="header">
  14. </div>
  15.  
  16. <div id="conteneur">
  17. <div id="gauche">
  18. <p>aa</p>
  19. </div>
  20. <div id="centre">
  21. <p>zzz</p>
  22. </div>
  23. <div id="droite">
  24. <p>eeee</p>
  25. </div>
  26. </div>
  27. </body>
  28. </html>


ce qui donne: http://adpersonnel.free.fr/prba/

et mon css:
  1. body
  2. {
  3. background-color:black;
  4. background-attachment:fixed;
  5. margin:0;
  6. padding:0;
  7. font-family:Verdana, Geneva, sans-serif;
  8. font-size:9px;
  9. color:white;
  10. }
  11.  
  12. #gauche
  13. {
  14. float:left;
  15. background: url(theme/effet_gauche.gif) no-repeat 0 0;
  16. margin : 0;
  17. padding:0:
  18. }
  19.  
  20. #centre
  21. {
  22. width:800px;
  23. margin:0 auto;
  24. }
  25.  
  26. #droite
  27. {
  28. float:right;
  29. background: url(theme/effet_droite.gif) no-repeat 0 0;
  30. margin : 0;
  31. padding:0:
  32. }


si quelqu'un pouvait m'aider, ça serait sympa, je galère trop :'( 

merci

Autres pages sur : decoupage css simple

1 Novembre 2008 17:01:38

Oula pourquoi tu te complique la vie?

Tu n'a qu'a faire une seule div...
Genre:

<div id="conteneur">
</div>

#conteneur {
background: url(images) repeat-y;
width: ..px;
margin: auto;
}

Tu remarquera le repeat-y qui se répetera quand le contenu dépassera la hauteur de la div... donc tu peux faire une image de 2 3 pixel de hauteur... se qui te fait gagner de la place sur ton ftp, et un affichage plus rapide.
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS