Bonjour et bonne année à ceux qui liront ça.
Donc, ça y est, je suis arrivé au bout de mon design à l'exception de quelques légers détails sans grand importance, je vous soumet donc les 2 codes finaux :
HTML :
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-type" content="text/html; charset=utf-8" />
<title>CuiZine.com - recette ...</title>
<link rel="stylesheet" type="text/css" href="reset.css" /> <!-- pour mettre tous les paramètres navigateurs par défaut à zéro -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="style_ie.css" />
<!--[endif]-->
<link rel="stylesheet" type="text/css" href="fonts.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="images/logo.png" alt="La magazine culinaire du quotidien" />
<ul>
<li><a href="#">Les entrées</a></li>
<li><a href="#">Les plats</a></li>
<li><a href="#">Les desserts</a></li>
</ul>
<form id="recherche" action="search.php" methode="post" />
<img src="images/loupe.png" alt="loupe" />
<label for="search"></label>
<input type="text" id="search" name="search" placeholder="Vous cherchez une recette ou quoi ?" maxlenght="35" size="35">
<input type="submit">
</form>
<form id="password" action="ident.php" methode="post" />
<img src="images/ombre.png" />
<h3>Veuillez décliner votre identité !… <a href="inscription.php"></a></h3>
<label for="">Utilisateur : </label>
<input type="text"><br>
<label for"">Mot de passe :</label>
<input type="password"><br>
<input type="submit" class="identite">
<a href="forget.php">Mot de passe oublié</a>
</form>
</div>
<div id="content">
<div id="colg">
<h1>Panacotta au viandox</h1>
<p class="t12bi">et à l'huile de coude</p><br>
<img src="images/panacotta.jpg" alt="Panacotta au viandox" />
<p>Recette de : <span class="t12vert">Mr Machin</span></p>
<img src="images/fleur.png" /><h2>Les ingrédients</h2>
<ul>
<li>.Viandox ...................... <span>300 g</span></li>
<li>.Crème liquide légère ... <span>50 cl</span></li>
<li>.Feuilles de canabis ...... <span>6</span></li>
<li>.Sucre ......................... <span>150 g</span></li>
<li>.Huile semi-synthèse ... <span>15 cl</span></li>
<li>.Menthe ..................... <span>4 brins</span></li>
</ul>
</div>
<div id="cold">
<p>Pour <span class="t24b"> 4 </span>gros mangeurs</p>
<img src="images/fleur.png" /><h2>Préparation</h2>
<ul>
<li>Dans une gamelle, faites revenir l’huile de moitié.<br />
Ca doit avoir l’air gluant et ça doit sentir le pneu.</li><br />
<li>Foutez ça dans un coin.</li>
<li>Faites ramollir les feuilles de canabis dans de la flotte froide.</li><br />
<li>Portez la crème à ébullition avec le sucre et le viandox.</li><br />
<li>Ajouter les feuilles de canabis essorées. Mélangez bien jusqu’à ce qu’elles soient dissoutes, c’est vachement important !</li><br />
<li>Versez la crème dans 4 écuelles ou verres en plastique.</li><br />
<li>Collez-ça au frigo au moins 3 bonnes heures.</li>
<li>Lavez et équeutez les fraises si vous en avez le courage.</li><br />
<li>Taillez-les en pièce.</li><br />
<li>Déposez les morceaux de fraises sur les panacottas et arrosez
comme y faut d’huille de vidange.</li><br />
<li>Décorez avec la menthe ou ce que vous avez sous la main.</li>
</ul>
<img src="images/ombre.png" />
</div>
<div id="conseil">
<img src="images/cuisiniere.png" alt="Ursuline vous conseille" />
<img src="images/fleur.png" />
<h2>Ursuline vous conseille…</h2>
<img src="images/double_quotes.jpg" />
<p>Si vous voulez que ça ai l'air mangeable, essayez de démouler la panacotta en vous aidant d'un chausse-pied.<br />
Faites flamber avec du wisky, ça déchire sa race !</p>
</div>
<div id="infos">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<th><img src="images/icon_preparation.png" alt="Prépation" /></th>
<th><img src="images/icon_couverts.png" alt="Nbre de mangeurs" /></th>
<th><img src="images/icon_temps.png" alt="Temps de cuisson" /></th>
</tr>
<tr>
<td><br />Préparation</td>
<td><br />Nbre de mangeurs</td>
<td><br />Temps de cuisson</td>
</tr>
<th><br />5mn</th>
<th><br />6</th>
<th><br />1h</th>
</table>
</div>
<div id="note">
<img src="images/fleur.png" />
<h2>La note des cuizineurs…</h2>
<img src="images/toque.png" alt="" />
<p class="etoiles4">4/5</p>
</div>
<div id="moe">
<img src="images/fleur.png" />
<h2>Moe vous suggère…</h2>
<img src="images/moe.jpg" alt="" />
<p>Villageoise Cuvée Prestige 1988<span>*</span></p>
<p><span>*à</span> consommer avant que ça devienne illégal</p>
</div>
</div>
<div id="side">
<h3>Découvrez nos nouvelles recettes</h3><br>
<ul>
<li>
<h4>Gloubi-boulga</h4>
<img src="images/recette1.jpg" alt"Par ici le bon miam" />
<p>Voici un plat délicieux qui nous est proposé par Casimir, les enfants adorent !<br>
En dehors du fait que ça donne la chiasse et que ça fait fondre les dents, ça cale bien son homme et ça sent bon le vieux poney. …<h5>lire la suite</h5></p>
</li>
<li>
<h4>Gâteau de restes</h4>
<img src="images/recette2.jpg" alt"huuum, c'est troooop bon !" />
<p>Du pain dur, quelques trognons de pommes, de la sciure de bois, de la gencive de porc, du gras double et des yeux de biches et vous obtenez un magnifique gateau de restes comme autrefois.<br>
Idéal en cas de dissentrie sévère…<h5>lire la suite</h5></p>
</li>
</ul>
<div id="pub"></div>
</div>
</div>
<div id="footer">
<img src="images/ombre.png" />
<ul>
<li><a href="" alt="" />Les entrées </a></li>
<li><a href="" alt="" /> Les plats </a></li>
<li><a href="" alt="" /> Les desserts </a></li>
<li><a href="" alt="" /> Contact </a></li>
</ul>
</div>
<div id="bottom">
<p>2015- <a href="http://www.cuizine.com">Cuizine.com</a>, Design by Thierry Chabenat</p>
</div>
</body>
</html>
[/code]
et le CSS :
[code]
html
{
font-size: 62.5%; /* valeur par défaut défini pour que le calcul en rem soit plus simple, après travailler en rem, c'est égal à 10px */
font-family: Arial,Helvetica,sans-serif;
}
body
{
background:#fff url(images/fond2.jpg) top center no-repeat;
}
div[id="wrapper"]
{
width:990px;
margin-left:auto;
margin-right:auto;
}
div[id="header"]
{
width:990px;
height:125px;
}
div[id="header"] img /* logo */
{
margin: 4px 0 0 117px;
}
div[id="header"] ul { /* fond du menu */
float:right;
margin:105px 5px 0 0;
position: relative;
top: -8px;
left: 4px;
width: 455px;
height: 26px;
padding-top: 5px;
background: url(images/menu.png) 0 0 no-repeat;
}
div[id="header"] ul li + li { /* espacement entre les textes du menu */
margin-left: 66px;
}
div[id="header"] ul li:first-child { /* Bouton "Les entrées" */
margin-left: 25px;
}
div[id="header"] ul li { /* alignement horizontal des textes du menu */
display: inline-block;
}
div[id="header"] ul li a { /* paramétrage des textes du menu */
font-family: arial, helvetica, sans-serif;
font-size: 1.8rem;
font-style: italic;
color: #000;
text-decoration: none;
}
div[id="header"] ul li a:hover {
color: red;
}
div[id="header"] form[action="search.php"] /* formulaire recherche */
{
width:300px;
margin: -40px 0 0 670px;
}
div[id="header"] form img /* loupe*/
{
float:left;
display: inline-block;
width: 22px;
height: 22px;
margin: 0 10px 0 0;
}
div[id="header"] form[action="ident.php"] /* formulaire identification */
{
width:338px;
height: 100px;
font-size:0.8rem;
margin: 10px 0 0 650px;
background-color: #f3d9e6;
-webkit-border-radius: 0 0 0 20px; /* ligne nécessaire pour compatibilité */
border-radius: 0 0 0 20px;
}
div[id="header"] form[action="ident.php"] h3 /* Identifiez-vous */
{
background-color: #e3a6c5;
font-size: 1.3rem;
font-weight: bold;
height: 30px;
color: #000;
text-align: center;
}
div[id="header"] form[action="ident.php"] label /* User & password */
{
font-size: 1rem;
font-weight: bold;
color: #000;
margin: 5px 0 20px 10px;
}
div[id="header"] form[action="ident.php"] input.identite /* bouton envoyer */
{
position:relative;
top: -30px;
left: 250px;
font-size: 1rem;
color: #000;
}
form[action="ident.php"] a /* mot de passe oublié */
{
font-size: 0.9rem;
margin-left: 180px;
text-align: center;
color: #000;
}
div[id="header"] form[action="ident.php"] img /* ombre */
{
float:left;
position: relative;
top: 100px;
left: 20px;
display: inline-block;
width: 300px;
height: 13px;
margin: 0;
}
div[id="content"]
{
position:relative;
top: -20px;
margin-left: 15px;
padding: 10px 10px 10px 10px;
background-color: #fff;
width:610px;
float:left;
}
div[id="colg"] /* colonne de gauche */
{
float:left;
}
div[id="colg"] h1 /* Panacotta ... */
{
font-size: 1.8rem;
font-weight: bold;
color: #7e0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div[id="colg"] p /* à l'huile de coude */
{
font-size: 1rem;
font-weight: normal;
text-align: center;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div[id="colg"] img+p /* Recette de : */
{
font-size: 1.1rem;
font-weight: normal;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: right;
margin-right: 50px;
}
div[id="colg"] img+p+img /* fleur ingrédients */
{
margin-top: 20px;
margin-bottom: 20px;
width: 9px;
height: 10px;
}
div[id="colg"] h2 /* titre ingrédients */
{
position:relative;
top : -35px;
left: 25px;
font-size: 1.8rem;
font-weight: normal;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div[id="colg"] ul /* liste ingrédients */
{
position: relative;
top: -20px;
padding-left: 15px;
font-size: 1rem;
font-weight: normal;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div[id="colg"] ul span /* quantité ingrédients */
{
font-size: 1.1rem;
font-weight: bold;
font-style:italic;
color: #c21724;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div[id="cold"] /* colonne de droite */
{
width: 620px;
}
div[id="cold"] p:first-child /* ------------- Pour gros mangeurs ------------- */
{
float:right;
width: 225px;
height: 40px;
position: relative;
left:-100px;
background-color: #f3d9e6;
-webkit-border-radius: 0 0 0 20px;
border-radius: 0 0 0 20px;
margin-top: 20px;
margin-bottom: 25px;
text-align: center;
font-size: 1.5rem;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
color: black;
}
.t24b { /* -------------------------------- 4 -------------------------------- */
font-size: 3.6rem;
font-weight: bold;
font-style: italic;
font-family: Arial, Verdana, Helvetica, sans-serif;
color: #7e0000;
}
div[id="cold"] img /* fleur préparation */
{
margin-left: 20px;
padding-top: 90px;
margin-bottom: 10px;
width: 9px;
height: 10px;
}
div[id="cold"] h2 /* titre Préparation */
{
position:relative;
top : -25px;
left: 45px;
font-size: 1.8rem;
font-weight: normal;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div[id="cold"] ul /* Paragraphe préparation */
{
margin-top: 0px;
font-size: 1.1rem;
font-weight: normal;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;;
}
div[id="cold"] ul+img /* ombre */
{
float:left;
position: relative;
top: -70px;
left: 20px;
display: inline-block;
width: 600px;
height: 13px;
margin: 0;
}
div[id="conseil"]
{
margin-top: -50px;
margin-left: -10px;
width:630px;
display:inline-block;
}
div[id="conseil"] img /* Ursuline */
{
width:113px;
height:137px;
float:left;
}
div[id="conseil"] img+img /* fleur conseil */
{
padding-left: 25px;
margin-top: 35px;
width:9px;
height:10px;
}
div[id="conseil"] h2 /* titre conseil*/
{
position:relative;
left: 15px;
top:30px;
font-size: 1.8rem;
font-weight: normal;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div[id="conseil"] h2+img /* double quotes */
{
margin-top: 35px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 74px;
width: 37px;
height: 30px;
display: inline-block;
}
div[id="conseil"] p /* paragraphe */
{
margin-top: 35px;
margin-left: 86px;
padding-top: 10px;
background-color: #e0b1cf;
width: 532px;
height: 74px;
line-height: 20px;
font-size: 1.2rem;
font-style:italic;
color: #49012e;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-radius: 0 0 0 20px;
}
div[id="infos"]
{
float:left;
background-color:#f3d9e6;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
width: 290px;
height: 110px;
border-radius: 0 0 0 20px;
}
div[id="infos"] td
{
font-size: 1rem;
font-weight: bold;
color: #000;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div[id="infos"] th
{
font-size: 1.2rem;
font-style:italic;
font-weight: bold;
color: #bc000f;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div[id="note"]
{
width: 260px;
height:120px;
margin-top: 10px;
}
div[id="note"] img /* note */
{
width: 9px;
height: 10px;
padding-left: 25px;
margin-top: 35px;
}
div[id="note"] h2 /* titre */
{
position:relative;
left: 50px;
top: -17px;
font-size: 1.8rem;
font-weight: normal;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div[id="note"] h2+img /* toque */
{
position:relative;
left: 250px;
top: -85px;
width: 39px;
height: 47px;
margin-top: 40px;
}
div[id="note"] p {
position: relative;
top: -95px;
left: 20px;
width: 131px;
height: 26px;
display: inline-block;
font-size: 1px;
color: #fff;
background: url("images/etoiles.png") 0 0 no-repeat;
}
div[id="note"] p.etoiles5
{
background-position: left top;
}
div[id="note"] p.etoiles4
{
background-position: 0 20%;
}
div[id="note"] p.etoiles3
{
background-position: 0 40%;
}
div[id="note"] p.etoiles2
{
background-position: 0 60%;
}
div[id="note"] p.etoiles1
{
background-position: 0 80%;
}
div[id="note"] p.etoiles0
{
background-position: 0 bottom;
}
div[id="moe"]
{
float:right;
position: relative;
left:-40px;
width:230px;
margin-top:-150px;
border-left: 1px solid #610008;
padding: 10px;
}
div[id="moe"] img /* note */
{
width: 9px;
height: 10px;
padding-left: 25px;
margin-top: 35px;
}
div[id="moe"] h2 /* titre */
{
position:relative;
left: 10px;
top: -17px;
font-size: 1.8rem;
font-weight: normal;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div[id="moe"] h2+img /* moe */
{
width: 237px;
height: 140px;
margin-top:-40px;
}
div[id="moe"] p /* Villageoise Cuvée ... */
{
font-size: 1.2rem;
font-style:italic;
color: #49012e;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div[id="moe"] p+p /* à conserver avant que ... */
{
font-size: 0.9rem;
line-height: 1.5rem;
font-style:normal;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div[id="side"]
{
width:320px;
float:right;
margin-top:130px;
border-left: 1px solid #610008;
padding: 10px;
margin-right:1px;
background-color: #f3d9e6;
border-radius: 20px 0 20px 20px;
}
div[id="side"] img /* Recettes */
{
float:left;
width: 140px;
height: 144px;
}
div[id="side"] h3 /* Découvrez nos nouvelles recettes */
{
font-size: 1.5rem;
font-weight:bold;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div[id="side"] h4 /* Gloubi Boulga */
{
float:right;
padding-left: 5px;
width: 170px;
font-size: 1.3rem;
font-weight:bold;
color: #bc000f;
font-style: italic;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div[id="side"] p /* Recettesnon détaillées */
{
display: inline-block;
width:170px;
padding-left: 5px;
padding-right: 5px;
font-size: 1.2rem;
font-weight:normal;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div[id="side"] h5 /* En savoir plus */
{
float:left;
font-size: 1rem;
font-weight:bold;
color: #bc000f;
font-style: italic;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-left: 5px;
padding-top: 5px;
margin-bottom: 35px;
}
div[id="pub"]
{
position: relative;
left: 10px;
width: 293px;
height: 293px;
background: url(images/pubs.jpg) no-repeat;
border:1px solid #666;
border-radius: 20px 0 20px 20px;
}
div[id="footer"]
{
clear: both;
width: 990px;
height: 72px;
margin-left: auto;
margin-right: auto;
background: url(images/bottom.jpg) no-repeat;
}
div[id="footer"] img /* ombre */
{
float:left;
position: relative;
top: 20px;
left: 185px;
width: 600px;
height: 13px;
margin: 0;
}
div[id="footer"] ul /* menu bas */
{
position: relative;
right:325px;
float:right;
margin: 50px;
}
div[id="footer"] li
{
display: inline;
list-style: none;
}
div[id="bottom"] {
position: relative;
left: 400px;
width: 990px;
height: 40px;
margin-left: auto;
margin-right: auto;
}
[/code]
Et voilà.
Si ça peut aider
