la communauté d'entraide francophone dédiée au PHP
PB intégration design avec CSS
Hello, voici où j'en suis :
Mon CSS
Mon HTML
Mon CSS
Code : Tout sélectionner
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/fond.jpg) top center no-repeat;
}
div[id="wrapper"]
{
width: 990px;
margin-left: auto;
margin-right: auto;
}
/* DEBUT HEADER DEBUT HEADER DEBUT HEADER DEBUT HEADER DEBUT HEADER */
div[id="header"]{
width: 990px;
height: 125px;
}
div[id="header"] img{ /* +++++++++++++++++ logo ++++++++++++++++++ */
width: 395px;
height: 143px;
margin-left: 117px;
}
div[id="header"] ul /* ++++++++++++++++++++++ menu ++++++++++++++++++++++ */
{
float: right;
width: 454px;
height: 27px;
margin: 98px 2px 0 0;
background: url(images/fond-menu.png) no-repeat;
}
div[id="header"] ul
{
float: right;
width: 454px;
height: 27px;
margin: 98px 2px 0 0;
background: url(images/fond-menu.png) no-repeat;
}
div[id="header"] form[action="search.php"]{ /* formulaire recherche */
width:410px;
margin: -15px 0 0 600px;
}
div[id="header"] form[action="ident.php"]{ /* formulaire identification */
width:375px;
height: 100px;
font-size:0.8rem;
margin: 20px 0 0 600px;
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"] p /* Identifiez-vous */
{
height:1px;
background-color: #e3a6c5;
font-size: 1.3rem;
font-weight: bold;
color: #000;
padding: 5px 0 20px 0;
text-align: center;
}
form[action="ident.php"] input[type="submit"]
{
margin-left: 25px;
}
#header form img /* loupe*/
{
float:left;
width: 22px;
height: 22px;
margin: 0 10px 0 0;
}
/* FIN HEADER FIN HEADER FIN HEADER FIN HEADER FIN HEADER FIN HEADER */
/* DEBUT CONTENT DEBUT CONTENT DEBUT CONTENT DEBUT CONTENT DEBUT CONTENT */
div[id="content"]
{
float: left;
width: 560px;
background-color: #fff;
margin-left: 19px;
}
div[id="colg"] {
float: left;
width: 240px;
}
h1 /* -------------- Panacotta au viandox -------------- */
{
width: 254px;
margin: 10px 8px 0 0;
font-size: 2.4rem;
font-weight: bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
color: #7e0000;
}
div[id="content"] > p
{
width: 244px;
text-align: center;
margin-bottom: 50px;
}
.t12bi { /* -------------- huile de coude -------------- */
font-size: 1rem;
font-family: Arial, Verdana, Helvetica, sans-serif;
color: black;
font-style:italic;
font-weight:bold;
text-align: center;
}
div[id="content"] img + p /* ------------ Recette de : Mr Machin ------------ */
{
width: 244px;
text-align: right;
margin: 0 0 10px -25px;
font-size: 0.9rem;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-style:italic;
color: black;
}
.t12vert { /* -------------- Mr Machin -------------- */
font-size: 1rem;
font-style:normal;
color: #5a630f;
}
div[id="content"] img
{
margin-left: 20px;
}
div[id="cold"]
{
width:320px;
margin-left: 250px;
margin-top: 10px;
}
div[id="cold"] p /* -------------- Recette -------------- */
{
font-size: 1.2rem;
font-weight: normal;
color: #000;
}
div[id="cold"] p br
{
margin-top: 20px;
}
div[id="cold"] p:first-child /* ------------- Pour gros mangeurs ------------- */
{
width: 225px;
height: 40px;
background-color: #f3d9e6;
-webkit-border-radius: 0 0 0 20px;
border-radius: 0 0 0 20px;
margin-top: 20px;
margin-left: 25px;
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;
}
h2 /* ---------------- Ingrédients, préparation, Ursuline, Moe ---------------- */
{
display: inline;
margin: 0 0 0 10px;
font-size: 1.3rem;
font-style: italic;
font-weight: bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
color: #7e0000;
}
li /* ----------------Listes et menu ---------------- */
{
font-size: 1.2rem;
font-family: Arial, Verdana, Helvetica, sans-serif;
color: black;
float: left;
margin: 0 0 0 65px;
padding: 5px 0 0 0px;
}
li span /* ---------------- Doses ingrédients ---------------- */
{
font-size: 1.3rem;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-style: italic;
font-weight: bold;
color: #7e0000;
}
ul
{
margin: 15px 0 0 -40px;
}
div[id="conseil"]
{
float: left;
width:560px;
margin-top: 40px;
}
div[id="conseil"] >img{
float:left;
}
div[id="conseil"] >img+h2 {
padding-left:35px;
background: url('images/fleur.png') 15px 2px no-repeat;
}
div[id="conseil"] >img+h2+p
{
width:370px;
min-height: 64px;
margin: 40px 0 0 105px;
padding: 20px 0 0 70px;
background: url('images/double_quotes.jpg') 20px 5px no-repeat;
background-color: #e1b2d0;
-webkit-border-radius: 0 0 0 20px; /* ligne nécessaire pour compatibilité */
border-radius: 0 0 0 20px;
}
div[id="conseil"] >p
{
font-size: 1.2rem;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-style: italic;
color: #7e0000;
}
div[id="note"]
{
float: left;
width:260px;
margin-top: 40px;
}
div[id="note"] >img{
float:right;
}
div[id="note"] >img+h2 {
padding-left:35px;
background: url('images/fleur.png') 15px 2px no-repeat;
}
div[id="note"] >img+h2+p
{
width:300px;
height: 84px;
margin: 40px 0 0 105px;
padding: 0 0 0 55px;
}
div[id="moe"]
{
float: right;
width:270px;
margin-top: 40px;
}
div[id="moe"] >img{
float:right;
margin: 0;
}
div[id="moe"] >img+h2 {
padding-left:35px;
background: url('images/fleur.png') 15px 2px no-repeat;
}
div[id="moe"] >img+h2+p
{
height: 84px;
margin: 40px 0 0 105px;
padding: 0 0 0 55px;
}
div[id="moe"] >img+img
{
width: 109px;
height: 89px;
margin: 40px 0 0 105px;
padding: 0 0 0 55px;
}
div[id="moe"] >p+p
{
font-size: 1.2rem;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-style: italic;
color: #000;
}
div[id="moe"] >span
{
font-size: 1rem;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-style: italic;
color: #000;
}
div[id="moe"] >span+span
{
font-size: 0.6rem;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-style: italic;
color: #7e0000;
}
.clearb
{
clear: both;
}
.vh
{
visibility: hidden;
}
/* FIN CONTENT FIN CONTENT FIN CONTENT FIN CONTENT FIN CONTENT */
/* DEBUT SIDE DEBUT SIDE DEBUT SIDE DEBUT SIDE DEBUT SIDE DEBUT SIDE */
div[id="side"]
{
float:left;
background-color: #fff;
margin-top: 170px;
margin-left: 0x;
left:650px;
width: 396px;
}
div[id="side"] li
{
height:180px;
}
div[id="side"] img
{
float:left;
}
div[id="side"] >li+img+p
{
display:inline-block;
}
div[id="pub"]
{
display: inline-block;
border: 1px solid #e1b1cf;
background-color: #fff;
margin: 0 auto 0 auto;
padding-left: 70px;
left:650px;
width: 293px;
height: 293px;
}
div[id="footer"]
{
width: 990px;
height: 72px;
margin-left: auto;
margin-right: auto;
background: url(images/bottom.jpg) no-repeat;
}
imput[type="text"]:focus
{
border:1px; solid red;
}
div[id="footer"] ul li
{
float: left;
}
div[id="footer"] ul li + li:before
{
content: url('images/fleur.png)';
}
div[id="bottom"] {
width: 990px;
height: 40px;
margin-left: auto;
margin-right: auto;
}
Code : Tout sélectionner
<!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]-->
<!-- HEADSUP GRID à supprimer -->
<link rel="stylesheet" type="text/css" href="HeadsUpGrid/hugrid.css" />
<script src="HeadsUpGrid/hugrid.js" /></script>
<script src="HeadsUpGrid/jquery-1.6.2.min.js" /></script>
<script type="text/javascript" />
$(document).ready(function() {
pageUnits = 'px';
colUnits = 'px';
pagewidth = 960;
columns = 6;
columnwidth = 140;
gutterwidth = 24;
pagetopmargin = 35;
rowheight = 20;
gridonload = 'off';
makehugrid();
setgridonload();
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="images/logo.png" alt="La magazine culinaire du quotidien" />
<ul>
<li><a href="entrees.php">Les entrées</a></li>
<li><a href="plats.php">Les plats</a></li>
<li><a href="desserts.php">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="50" size="50">
<input type="submit">
</form>
<form id="password" action="ident.php" methode="post" />
<p>Identifiez-vous… <a href="inscription.php"></a></p>
<label for="">Utilisateur</label>
<input type="text"><br>
<label for"">Mot de passe </label>
<input type="password"><br>
<input type="submit">Mot de asse oublié
</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="infos">
<table>
<tr>
<th>Préparation</th>
<tr>
</tr>
<th>Nbre de mangeurs</th>
<tr>
<th>Temps de cuisson</th>
</tr>
</table>
</div>
-->
<div id="cold">
<p>Pour <span class="t24b"> 4 </span>gros mangeurs</p>
<img src="images/fleur.png" /><h2>La préparation</h2>
<p>Dans une gamelle, faites revenir l’huile de moitié.<br />
Ca doit avoir l’air gluant et ça doit sentir le pneu.</p><br />
<p>Foutez ça dans un coin.</p>
<p>Faites ramollir les feuilles de canabis dans de la flotte froide.</p><br />
<p>Portez la crème à ébullition avec le sucre et le viandox.</p><br />
<p>Ajouter les feuilles de canabis essorées. Mélangez bien jusqu’à ce qu’elles soient dissoutes, c’est vachement important !</p><br />
<p>Versez la crème dans 4 écuelles ou verres en plastique.</p><br />
<p>Collez-ça au frigo au moins 3 bonnes heures.</p>
<p>Lavez et équeutez les fraises si vous en avez le courage.</p><br />
<p>Taillez-les en pièce.</p><br />
<p>Déposez les morceaux de fraises sur les panacottas et arrosez
comme y faut d’huille de vidange.</p><br />
<p>Décorez avec la menthe ou ce que vous avez sous la main.</p>
</div>
<div id="conseil">
<img src="images/cuisiniere.png" alt="Ursuline vous conseille" />
<h2>Ursuline vous conseille…</h2>
<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="note">
<img src="images/toque.png" alt="" />
<h2>La note des cuizineurs…</h2>
</div>
<div id="moe">
<img src="images/moe.png" alt="" />
<h2>Moe vous suggère…</h2>
<img src="images/vins.png" alt="" />
<p>Villageoise Cuvée Prestige 1988<span>*</span></p>
<p><span>*à</span> conserver avant que ça devienne illégal</p>
</div>
</div>
<div id="side">
<h2>Découvrez nos nouvelles recettes</h2>
<ul>
<li>
<h3>Gloubi-boulga</h3>
<img src="" alt"" />
<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. …lire la suite</p>
</li>
<li>
<h3>Texte</h3>
<img src="" alt"" />
<p>klhkhk…lire la suite</p>
</li>
<li>
<h3>Gâteau de restes</h3>
<img src="" alt"" />
<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…lire la suite</p>
</li>
</ul>
<!--<div id="pub">
<img src="pub" alt="" />
</div>
</div> -->
</div>
<hr class="clearb vh" />
<div id="footer">
<ul>
<li><a href="" alt="" /></a>Les entrées </li>
<li><a href="" alt="" /> Les plats </li>
<li><a href="" alt="" /> Les desserts </li>
<li><a href="" alt="" /> Partenaires </li>
<li><a href="" alt="" /> Contact </li>
<li><a href="" alt="" /> Mentions légales</li>
</ul>
</div>
<div id="bottom">
<p>2015- <a href="http://www.cuizine.com">Cuizine.com</a>, Design by Thierry Chabenat</p>
</div>
</div>
</body>
</html>
Modifié en dernier par chabgyver le 17 déc. 2015, 11:56, modifié 5 fois.
Évidemment, j'ai pas fini, mais j'avance doucement, cette façon de coder n'est pas habituel chez moi et chez persone d'aileurs puisque la très grande majorité des sites sont presque tous faits avec des DIV.
Cependant, la méthode que j'essaie d'apprendre tant bien que mal est normalement parfaitement en règle avec les spécifications W3C et c'est comme ça qu'il faudrait idéalement faire.
Cependant, la méthode que j'essaie d'apprendre tant bien que mal est normalement parfaitement en règle avec les spécifications W3C et c'est comme ça qu'il faudrait idéalement faire.
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 :
et le CSS :
Et voilà.
Si ça peut aider
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 : Tout sélectionner
<!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 : Tout sélectionner
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;
}
Si ça peut aider