28220 sujets

CSS et mise en forme, CSS3

Mise en forme de plusieurs images

Voila j'ai presque terminer mon site web en PHP (le design lui est totalement fini) mais je m'apercois qu'il rame...
on m'a conseillé d'optimiser mes images ce que j'ai fait mais le site reste encore lourd a charger je souhaite donc utiliser du CSS plutôt que des tableaux...
Mais voila je commence a peine (hier) a aprendre le CSS et j'ai un soucis...

Mon header (example parmis tant d'autre sur mon site) se compose de 4 parties :

3 images et un code php qui m'affiche la version de mon site.
une image en haut et deux images en bas qui sont au deux coté de mon code...
voila mon site pour mieu vous montrer :
Eye'sWorld
J'aimerais savoire comment metre en forme la totalité de mon header en CSS...
Bonjour,

2 solutions (parmis d'autres), une avec les images dans le code, l'autre avec les images dans le css en fonction de ton avis si ce header est du contenu ou pas !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
			
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
*{margin: 0; padding: 0;}

#header{
	  width: 920px;
	  height: 200px;
	  margin: auto;
	  position: relative;
	  background: black;
}

#header img{
	  border: 0;

}

#header img.gauche{
	position: absolute;
	width: 270px;
	height: 16px;
	bottom:0;
	left: 0;									
}	  

#header img.droite{
	position: absolute;
	width: 270px;
	height: 16px;
	bottom:0;
	right: 0;
}

#header p{
	padding-left: 620px;
	font-size: 0.8em;
	color: white;
	margin-top: -4px;
}	  
	  

#header2{
	  width: 920px;
	  height: 200px;
	  margin: auto;
	  position: relative;
	  overflow: hidden;
	  background: black;
	  background-image: url(header_01.gif);
	  background-repeat: no-repeat;
}

#header_gauche{
	position: absolute;
	width: 270px;
	height: 16px;
	bottom:0;
	left: 0;
	background-image: url(header_02.gif);									
}

#header_droite{
	position: absolute;
	width: 270px;
	height: 16px;
	bottom:0;
	right: 0;
	background-image: url(header_04.gif);
}

#header2 p{
	position: absolute;
	left: 620px;
	bottom: 4px;
	font-size: 0.8em;
	color: white;
}

h1{	
	width: 300px;
	margin: auto;
	font-size: 1.2em;
	margin-top: 50px;
}
	 
</style>

</head>
<body>
<h1>Version dans le code html</h1>
<div id="header">
	 <img src="header_01.gif" alt="" />
	 <img class="gauche" src="header_02.gif" alt="" />
	 <img class="droite"src="header_04.gif" alt="" />
	 <p>V2.2</p>
</div>
<h1>Version dans le CSS</h1>
<div id="header2">
	 <div id="header_gauche">
	 </div>
	 <div id="header_droite">
	 </div>
	 <p>V2.2</p>
</div>
</body>
</html>
Sujet clos
Aller à