Se connecter avec
S'enregistrer | Connectez-vous

découpage css simple

Dernière réponse : dans Programmation

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" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" 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

Lassé par la pub ? Créez un compte
Expert Programmation

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.
Lassé par la pub ? Créez un compte

Répondre Créer un nouveau sujet

Tom's guide dans le monde