28220 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Voilà, je rencontre des dificultés à mettre en forme ma page web.
Voici ce que je dois intégrer.
Je pense que d'utiliser des tableaux se sera plus simple à intégrer.
Qu'en pensez vous?
upload/2679-mapage.jpg

Voici ce que j'ai codé ... mais ça ne va pas trop..



<!-- Partie Guide d'Achat -->
<div class="conteneur_center">
   <div style="float:left;">
	    <table width="220" cellpadding="0" cellspacing="0" border="0" class="conteneur_center">
			    <tr>
               <td height="10"></td>
          </tr>
          <tr>
	             <td valign="top"><img src="/Icons/car1.jpg" alt="" /></td>
          </tr>
			    <tr>
               <td valign="top" class="bg_button"><p class="tl">Tous les modèles </p></td>
          </tr>
			    <tr>
               <td height="10"></td>
          </tr>
      </table>
   </div>
   <div>
	    <table width="238" cellpadding="0" cellspacing="0" border="0" class="conteneur_center">
			    <tr>
                <td height="10"></td>
          </tr>
	        <tr>
				        <td valign="top"><img src="/Icons/guide_achat.gif" alt="" /></td></tr>
          </tr>
				  <tr>
				        <td valign="top" id="achat"><h1>Bentley : Continental Flying Spur</h1><p><a href="#">Lorsque Bentley a changé de cap avec le fameux deux portes Continental GT, à la ligne si époustouflante, la marque classique britannique s’est ouvert un gigantesque nouveau marché. D’une allure prodigieuse, il est en outre suprêmement fastueux, mais aussi terriblement puissant et sportif</a><span class="chevron">&nbsp;&gt;&gt;</span></p></td>
          </tr>
			</table>
	 </div>
</div>	 
<!-- /Partie Guide d'Achat -->
<!-- Partie La vidéo du salon -->
<div class="conteneur_center"  style="clear:both;">
   <div style="float:left;">
  	   <table width="223" cellpadding="0" cellspacing="0" border="0">
		       <tr>
                <td valign="top" width="223"><img src="/Icons/title_car2.gif" /></td>
								
           </tr>
			     <tr>
					      <td valign="top" width="223"><img src="/Icons/car2.jpg" /></td>
           </tr>
					 <tr>
	              <td valign="top" class="car" width="223" height="86"><h1>Alfa Romeo 159 : future Star ? </h1><p class="chevron"><a href="#">Après 7 années de bons et loyaux services, l'Alfa 156 tire sa révérence et s'en va. La 159 qui lui succède devrait la remplacer avantageusement</a><span class="chevron">&nbsp;&gt;&gt;</span></p></td>
				   </tr>
		 </table>
   </div>		
<!-- /Partie La vidéo du salon-->
   <div  class="conteneur_center" style="float:left; width:15px; height:5px"></div>
<!-- Partie Salon Pratique -->
   <div style="float:left; ">
	  
	   <table width="223" cellpadding="0" cellspacing="0" border="0">
		       <tr>
                <td valign="top" width="223"><img src="/Icons/title_car3.gif" /></td>
								
           </tr>
			     <tr>
					      <td valign="top" width="223"><img src="/Icons/car3.jpg" /></td>
           </tr>
			     <tr>
	              <td class="car" valign="top" height="86"><h1>Salon du Cabriolet & du Coupé</h1><p class="chevron"><a href="#">du 15 au 17 Avril Evénement incontournable pour les amateurs de cabriolet Plus d’infos, plan, tarifs</a><span class="chevron">&nbsp;&gt;&gt;</span></p></td>
	         </tr>
		 </table>
   </div>
<!-- /Partie Salon Pratique-->
<!-- Partie Panoramiques -->
   <div style="clear:both;">
     <table width="461" cellpadding="0" cellspacing="0" border="0" class="conteneur_center" >
		       <tr>
                <td height="10"></td>
           </tr>
           <tr>
                <td valign="top" colspan="4"><img src="/Icons/logo_panoramik.gif" alt="" /></td>
           </tr>
           <tr>
                <td valign="top"><a href="#"><img src="/Icons/flech_gauche.gif" alt=""/></a></td>
	              <td valign="top"><img src="/Icons/img_salon.jpg" alt="" /></td>
	              <td valign="top"><a href="#"><img src="/Icons/flech_droite.gif" alt=""/></a></td>
	              <td class="car" rowspan="2"><h1>Ambiance du salon<h1><p class="chevron"><a href="#"> Peugeot au Mondial de l'auto 2004 ? C'est la 407, la 407 SW, la 1007, la 907, la Quark, la 1007 RC, ... </a><span class="chevron">&nbsp;&gt;&gt;</span></p></td>
           </tr>
     </table>
   </div>
</div>
<!-- /Partie Panoramiques-- >
Bonjour

Essaye de démarrer avec ce début de structure,pour le reste à toi de voir.
Tu vas y arriver.

@+

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>voitures</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
body{
	margin:0;
	color: #FFFF00;
}
#conteneur{
	border:1px solid #fff;
	margin:auto;
	padding:0;
	width:90%;
	background-color: #004566;
}
#divgauche{
	float:left;
	width:49%;
	border:1px solid #fff;
	padding: 2px;
}
#gauche01{width:99%; border:1px solid #fff;}
#gauche02{width:49%; float:left; border:1px solid #fff;}
#gauche03{width:49%; float:left; border:1px solid #fff;}
#gauche04{width:99%;clear:both; border:1px solid #fff;}

#divdroite{
	float:left;
	width:49%;
        border:1px solid #000000;
}
#droite05{width:100%; border:1px solid #fff;}
#droite06{width:100%; border:1px solid #fff;}
#droite07{width:100%; border:1px solid #fff;}


#piedepage{
clear:both;
}
</style>
</head>

<body>
<div id="conteneur">
<div id="divgauche">
<div id="gauche01">01</div>
<div id="gauche02">02</div>
<div id="gauche03">03</div>
<div id="gauche04">04</div>
</div>
<div id="divdroite">
<div id="droite05">05</div>
<div id="droite06">06</div>
<div id="droite07">07</div>
</div>
<div id="piedepage">pieddepage</div>
</div>

</body>
</html>