Bonjour,
Je suis débutant en programmation web et pour l'instant, j’essaie d'intégrer un design que j'ai fait avec du HTML et du CSS.
J'ai travaillé dessus tout l'après midi et j'avoue que je sèche pas mal.
Je précise qu'il s'agit d'un exercice, pas d'un site réel.
J'aimerai un petit coup de main si c'est possible.
Peut-être pas de toute me faire, faut que j'apprenne mais une partie que je puisse étudier le code pour pouvoir le refaire.
Mon code et mes fichiers images sont trouvables là :
http://www.superbenefs.fr/cuizine.rar
Il y a un fichier capture-ecran.jpg qui montre le résultat final de ce que souhaiterai obtenir, à bien y réfléchir, j'ai peut-être été un peu ambitieux.
D'avance un grand merci.
la communauté d'entraide francophone dédiée au PHP
PB intégration design avec CSS
Merci pour ton aide, j'aurai du bien vérifier mon fichier. Je viens de me rendre compte que je l'avais mis à part.
http://www.sendbox.fr/48e7e1c8c5c4c651/maquette.jpg
En te souhaitant bonne réception
http://www.sendbox.fr/48e7e1c8c5c4c651/maquette.jpg
En te souhaitant bonne réception
http://www.google.fr/search?q=css+2+col ... aille+fixe
mais ce serait plus dans l'air du temp de faire un design qui va marcher sur grand écran, smartphone et tablette.
mais ce serait plus dans l'air du temp de faire un design qui va marcher sur grand écran, smartphone et tablette.
tien déjà une partie de faite :
et le css :
est je continue je te re-envoi les fichiers quand c'est fini mais déjà tu peut regarder sa 
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" />
<link rel="stylesheet" type="text/css" href="styles.css">
<title>CuiZine.com</title>
</head>
<body>
<div id="Menu">
<!-- (DEBUT) Les images !-->
<div class="Img1"><img src="images/logo.png"></div> <!-- Image "cuisine" !-->
<div class="Img2"><img src="images/header.png"></div> <!-- Image "header" autour du logo "cuisine" !-->
<div class="Img3"><img src="images/fond.jpg"></div> <!-- Image "fond" le fond da la page !-->
<div class="Img4"><img src="images/loupe.png"></div> <!-- Image "loupe" pour la barre de recherche !-->
<div class="Img5"><img src="panacotta.jpg"></div> <!-- Image "Panacotta" !-->
<!-- (FIN) Les images !-->
<!-- (DEBUT) Les lien entrées ... etc !-->
<div id="Liens1">
<ul>
<li><a href="entres.html">Les entrées</a></li>
<li><a href="plats.html">Les plats</a></li>
<li><a href="desserts.html">Les desserts</a></li>
</ul>
</div>
<!-- (FIN) Les lien entrées ... etc !-->
<!-- (DEBUT) Barre de recherche !-->
<input type="text" name="Recherche" id="B_Recherche" value="Vous chercher une recette ou quoi ?" />
<!-- (DEBUT) Barre de recherche !-->
<!-- (DEBUT) Bouton "ok" barre de recherche !-->
<input type="submit" name="BT_OK" id="BT_OK" value="Ok" />
<!-- (FIN) Bouton "ok" barre de recherche !-->
<!-- (DEBUT) Phrases !-->
<div id="P1"><p>Le magazine de la bouffe au quotidien</p></div>
<!-- (FIN) Phrases ! !-->
</div>
</body>
</html>
Code : Tout sélectionner
/* DEBUT LES IMAGES */
.Img1 /* Le logo cuisine */
{
margin-left: 300px; /* Mettre le logo + ou - vers la droite */
position: relative; /* Pour que le logo "cuisine" passe par dessu le header */
z-index: 2; /* Pour que le logo "cuisine" passe par dessu le header */
}
.Img2 /* Le header */
{
margin-top: -145px; /* Mettre l'image "header" + ou - vers le haut */
text-align: center; /* Alignez le header */
position: relative; /* Pour que le "header" passe par dessu le fond */
z-index: 1; /* Pour que le "header" passe par dessu le fond */
}
.Img3 /* L'image de fond */
{
margin-top: -129px; /* Mettre l'image "fond" + ou - vers le haut */
margin-left: -30px; /* Mettre l'image "fond" + ou - vers la gauche */
text-align: center; /* Pour centrer */
position: relative; /* Le type de position */
}
.Img4 /* La loupe */
{
position: absolute; /* Le type de position */
margin-top: -688px; /* Mettre l'image "loupe" + ou - vers le haut */
margin-left: 825px; /* Mettre l'image "loupe" + ou - vers la gauche */
z-index: 4; /* Pour que la loupe sois dessu la barre de recherche */
}
.Img5
{
text-align: center;
z-index: 10;
position: absolute;
}
/* FIN LES IMAGES */
/* DEBUT LIENS NAVIGATION (MENU) */
#Liens1 ul
{
list-style: none; /* Enlever la liste a puces */
border: 1px solid white; /* Pour mettre la bordure noir autour des liens */
border-top-left-radius: 45px; /* Pour arrondir les bordures du menu */
border-bottom-right-radius: 45px; /* Pour arrondir les bordures du menu */
background-color: white; /* Mettre la couleur de fond en blanche */
width: 430px; /* Pour que la bordure sois + ou - longue */
margin-top: -721px; /* Mettre les liens est la bordure + ou - vers le haut */
margin-left: 725px; /* Pour que les liens soient à droite automatiquement */
font-family: arial,italic; /* la forme de l'écriture des liens */
box-shadow: -1px -1px 1px 1px gray; /* L'effet 3d avec l'ombre en grise */
z-index: 3; /* Pour que les liens passe par dessu le fond */
position: absolute; /* La position */
}
#Liens1 li
{
display: inline-block; /* Pour alignez les liens un a coté des autres */
width: 140px; /* Espacé + ou - les liens entre eux */
}
#Liens1 a
{
color: black; /* Pour que les liens soient de couleur noir */
text-decoration: none; /* Pour enlever le soulignement */
}
/* FIN LIENS DE NAVIGATION (MENU) */
/* DEBUT BARRE DE RECHERCHE */
#B_Recherche
{
border: 1px solid black; /* Pour mettre la bordure noir autour de la barre de recherche */
border-radius: 20px; /* Pour mettre les bords arrondis */
height: 25px; /* Pour agrandir la barre de recherche ( en hauteur ) */
width: 255px; /* Pour aggrandir la barre de recherche (en largeur ) */
text-align: center; /* Pour centrer le texte dans la barre de recherche */
color:red; /* La couleur tu texte dans la barre de recherche */
background-color: #D8D8D8; /* La couleur de fond de la barre de recherche */
margin-top: -692px; /* Mettre la barre de recherche + ou - haut */
margin-left: 820px; /* Mettre la barre de recherche + ou - vers la gauche */
position: absolute; /* Le type de position */
}
#BT_OK
{
border: 1px solid black; /* Pour mettre la bordure noir autour du bouton ok */
border-radius: 20px; /* Mettre les arrondis du bouton ok */
text-align: center;
background-color: #D8D8D8;
height: 29px;
width: 45px;
margin-top: -692px;
margin-left: 1086px;
position: absolute;
}
/* FIN BARRE DE RECHERCHE */
/* DEBUT Phrases */
#P1
{
color: #006600; /* La couleur de l'écriture */
margin-top: -710px;
margin-left: 308px;
z-index: 6;
font-size: 13px;
position: absolute;
}
/* FIN Phrases */
derien mais là il y à juste le fond de mis je finit entièrement est je re-poste tout l'ensemble par contre est-ce que tu compte le mettre en ligne ou pas? si tu conte le mettre en ligne je re-organiserai le code css pour que sa sois bien propre tien moi au courant
Oui tu pourra mais la c'est qu'une maquette on va dire c'est un rendu mais si tu veut le mettre en ligne si tu veut plus tard je re-ferais le code css car la je l'ai fait rapidement donc le rendu est assez propre mais niveaux code non donc si tu veut je te le re-ferais en propre
Tien bientôt fini tu peut déjà voir le rendu bon par contre c'est pas parfait parfait donc si tu veut le mettre en ligne dit moi le que je le re-voient mais tien déjà sa :
Html :
et le css :
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" />
<link rel="stylesheet" type="text/css" href="styles.css">
<title>CuiZine.com</title>
</head>
<body>
<div id="Menu">
<!-- (DEBUT) Les images !-->
<div class="Img1"><img src="images/logo.png"></div> <!-- Image "cuisine" !-->
<div class="Img2"><img src="images/header.png"></div> <!-- Image "header" autour du logo "cuisine" !-->
<div class="Img3"><img src="images/fond.jpg"></div> <!-- Image "fond" le fond da la page !-->
<div class="Img4"><img src="images/loupe.png"></div> <!-- Image "loupe" pour la barre de recherche !-->
<div class="Img5"><img src="images/panacotta.jpg"></div> <!-- Image "Panacotta" !-->
<div class="Img6"><img src="images/ombre3.jpg"></div> <!-- Image "Ombre" !-->
<div class="Img7"><img src="images/fleur.png"></div> <!-- Image "fleur" !-->
<div class="Img8"><img src="images/fleur.png"></div> <!-- Image "fleur" !-->
<div class="Img9"><img src="images/cuisiniere.png"></div> <!-- Image "Cuisiniere" !-->
<div class="Img10"><img src="images/fleur.png"></div> <!-- Image "fleur" !-->
<!-- (FIN) Les images !-->
<!-- (DEBUT) Les lien entrées ... etc !-->
<div id="Liens1">
<ul>
<li><a href="entres.html">Les entrées</a></li>
<li><a href="plats.html">Les plats</a></li>
<li><a href="desserts.html">Les desserts</a></li>
</ul>
</div>
<!-- (FIN) Les lien entrées ... etc !-->
<!-- (DEBUT) Barre de recherche !-->
<input type="text" name="Recherche" id="B_Recherche" value="Vous chercher une recette ou quoi ?" />
<!-- (DEBUT) Barre de recherche !-->
<!-- (DEBUT) Bouton "ok" barre de recherche !-->
<input type="submit" name="BT_OK" id="BT_OK" value="Ok" />
<!-- (FIN) Bouton "ok" barre de recherche !-->
<!-- (DEBUT) Phrases !-->
<div id="P1"><p>Le magazine de la bouffe au quotidien</p></div>
<div id="P2"><p>Panacotta au viandox<br></div><div id="P3">& à l'huile de coude</p></div>
<div id="P4"><p>Recette de : <font color="green">Mr machin</font></p></div>
<div id="P5"><p>Pour <font size="15"><font color="red">4</font></font> goinfres </p></div>
<div id="P6"><p> Ingrédients ... </p></div>
<div id="P7"><p> _Viandox.............................<font color="red"> 300 g </font></p></div>
<div id="P8"><p> _Crème liquide légère..........<font color="red"> 50 cl </font></p></div>
<div id="P9"><p> _Feuilles de canabis..............<font color="red"> 6 </font></p></div>
<div id="P10"><p> _Sucre..................................<font color="red"> 150 g </font></p></div>
<div id="P11"><p> _Huile semi-synthèse ..........<font color="red"> 15 cl </font></p></div>
<div id="P12"><p> _Menthe ..............................<font color="red"> 4 brins </font></p></div>
<div id="P13"><p> Préparation....</p></div>
<div id="P14"><p>
Dans une gamelle, faites revenir<br> l’huile de moitié.<br><br>
Ca doit avoir l’air gluant et ça doit<br> sentir le pneu.<br><br>
Foutez ça dans un coin.<br><br>
Faites ramollir les feuilles de canabis<br> dans de la flotte froide.<br><br>
Portez la crème à ébullition avec le<br> sucre et le viandox.<br><br>
Ajouter les feuilles de canabis essorées.<br> Mélangez bien jusqu’à ce<br> qu’elles soient dissoutes, c’est vachement<br> important !<br><br>
Versez la crème dans 4 écuelles ou verres en<br> plastique.<br><br>
Collez-ça au frigo au moins 3 bonnes heures.<br>
Lavez et équeutez les fraises si vous en avez<br> le courage.<br><br>
Taillez-les en pièce.<br><br>
Déposez les morceaux de fraises sur les panacottas<br> et arrosez<br>
comme y faut d’huille de vidange.<br><br>
Décorez avec la menthe ou ce que vous<br> avez sous la main.
</p></div>
<div id="P15"><p>Ursuline vous conseille ...</p></div>
<div id="P16"><p> Si vous voulez que ça ai l'air mangeable, essayez de <br> démouller le panacotta en vous aidant d'un chasse pied. <br> Faites flamber avec du Wisky, ça déchire sa race!</p></div>
<!-- (FIN) Phrases ! !-->
</div>
</body>
</html>
et le css :
Code : Tout sélectionner
/* DEBUT LES IMAGES */
.Img1 /* Le logo cuisine */
{
margin-left: 300px; /* Mettre le logo + ou - vers la droite */
position: relative; /* Pour que le logo "cuisine" passe par dessu le header */
z-index: 2; /* Pour que le logo "cuisine" passe par dessu le header */
}
.Img2 /* Le header */
{
margin-top: -145px; /* Mettre l'image "header" + ou - vers le haut */
text-align: center; /* Alignez le header */
position: relative; /* Pour que le "header" passe par dessu le fond */
z-index: 1; /* Pour que le "header" passe par dessu le fond */
}
.Img3 /* L'image de fond */
{
margin-top: -129px; /* Mettre l'image "fond" + ou - vers le haut */
margin-left: -30px; /* Mettre l'image "fond" + ou - vers la gauche */
text-align: center; /* Pour centrer */
position: relative; /* Le type de position */
}
.Img4 /* La loupe */
{
position: absolute; /* Le type de position */
margin-top: -688px; /* Mettre l'image "loupe" + ou - vers le haut */
margin-left: 825px; /* Mettre l'image "loupe" + ou - vers la gauche */
z-index: 4; /* Pour que la loupe sois dessu la barre de recherche */
}
.Img5 /* Panacotta */
{
z-index: 6; /* Pour que l'image sois par dessu le fond */
position: absolute; /* Le type de position */
margin-top: -595px; /* Mettre l'image "loupe" + ou - vers le haut */
margin-left: 269px; /* Mettre l'image "loupe" + ou - vers la gauche */
}
.Img6 /* Ombre 3 */
{
position: absolute; /* Le type de position */
margin-left: 280px; /* Mettre l'image "Ombre3" + ou - vers la gauche */
margin-top: -70px; /* Mettre l'image "Ombre3" + ou - vers le haut */
}
.Img7 /* Fleur */
{
position: absolute; /* Le type de position */
margin-top: -350px; /* Mettre l'image "Fleur" + ou - vers le haut */
margin-left: 265px; /* Mettre l'image "Fleur" + ou - vers la gauche */
}
.Img8 /* Fleur */
{
position: absolute; /* Le type de position */
margin-top: -530px; /* Mettre l'image "Fleur" + ou - vers le haut */
margin-left: 500px; /* Mettre l'image "Fleur" + ou - vers la gauche */
z-index: 20;
}
.Img9 /* Cuisiniere */
{
position: absolute;
z-index: 20;
margin-left: 280px;
}
.Img10 /* Fleur */
{
position: absolute;
margin-top: 32px;
margin-left: 430px;
}
/* FIN LES IMAGES */
/* DEBUT LIENS NAVIGATION (MENU) */
#Liens1 ul
{
list-style: none; /* Enlever la liste a puces */
border: 1px solid white; /* Pour mettre la bordure noir autour des liens */
border-top-left-radius: 45px; /* Pour arrondir les bordures du menu */
border-bottom-right-radius: 45px; /* Pour arrondir les bordures du menu */
background-color: white; /* Mettre la couleur de fond en blanche */
width: 430px; /* Pour que la bordure sois + ou - longue */
margin-top: -721px; /* Mettre les liens est la bordure + ou - vers le haut */
margin-left: 725px; /* Pour que les liens soient à droite automatiquement */
font-family: arial,italic; /* la forme de l'écriture des liens */
box-shadow: -1px -1px 1px 1px gray; /* L'effet 3d avec l'ombre en grise */
z-index: 3; /* Pour que les liens passe par dessu le fond */
position: absolute; /* La position */
}
#Liens1 li
{
display: inline-block; /* Pour alignez les liens un a coté des autres */
width: 140px; /* Espacé + ou - les liens entre eux */
}
#Liens1 a
{
color: black; /* Pour que les liens soient de couleur noir */
text-decoration: none; /* Pour enlever le soulignement */
}
/* FIN LIENS DE NAVIGATION (MENU) */
/* DEBUT BARRE DE RECHERCHE */
#B_Recherche
{
border: 1px solid black; /* Pour mettre la bordure noir autour de la barre de recherche */
border-radius: 20px; /* Pour mettre les bords arrondis */
height: 25px; /* Pour agrandir la barre de recherche ( en hauteur ) */
width: 255px; /* Pour aggrandir la barre de recherche (en largeur ) */
text-align: center; /* Pour centrer le texte dans la barre de recherche */
color:red; /* La couleur tu texte dans la barre de recherche */
background-color: #D8D8D8; /* La couleur de fond de la barre de recherche */
margin-top: -692px; /* Mettre la barre de recherche + ou - haut */
margin-left: 820px; /* Mettre la barre de recherche + ou - vers la gauche */
position: absolute; /* Le type de position */
}
#BT_OK
{
border: 1px solid black; /* Pour mettre la bordure noir autour du bouton ok */
border-radius: 20px; /* Mettre les arrondis du bouton ok */
background-color: #D8D8D8; /* La couleur de fond */
height: 29px; /* + ou - grand ( en hauteur ) */
width: 45px; /* + ou - grand ( en longeur ) */
margin-top: -692px; /* Metre le bouton ok + ou - vers le haut */
margin-left: 1086px; /* Mettre le bouton ok + ou - vers la gauche */
position: absolute; /* La position pour qu'il passe par dessu le fond */
}
/* FIN BARRE DE RECHERCHE */
/* DEBUT Phrases */
#P1
{
color: #006600; /* La couleur de l'écriture */
margin-top: -710px; /* Metre le texte + ou - vers le haut */
margin-left: 308px; /* Mettre le texte + ou - vers la gauche */
z-index: 6; /* Pour qu'il passe par dessu le fond */
font-size: 13px; /* Aggrandir + ou - le texte */
position: absolute; /* La position pour qu'il passe par dessu le fond */
}
#P2
{
position: absolute; /* La position pour qu'il passe par dessu le fond */
color: #800000; /* La couleur de l'écriture */
margin-top: -680px; /* Metre le texte + ou - vers le haut */
margin-left: 255px; /* Mettre le texte + ou - vers la gauche */
font-size: 20px; /* Aggrandir + ou - le texte */
font-family: arial black; /* Le type d'écriture */
}
#P3
{
position: absolute; /* La position pour qu'il passe par dessu le fond */
margin-top: -635px; /* Metre le texte + ou - vers le haut */
margin-left: 305px; /* Mettre le texte + ou - vers la gauche */
z-index: 20; /* Pour qu'il passe par dessu le fond */
}
#P4
{
margin-top: -395px; /* Metre le texte + ou - vers le haut */
margin-left: 365px; /* Mettre le texte + ou - vers la gauche */
position: absolute; /* La position pour qu'il passe par dessu le fond */
font-size: 12px; /* Aggrandir + ou - le texte */
font-style: italic; /* Le type d'écriture */
}
#P5
{
position: relative; /* La position */
border: 1px solid #DDA0DD; /* La bordure */
width: 240px; /* La longueur */
height: 80px; /* La hauteur */
text-align: center; /* Centrer le texte */
background-color: #DDA0DD; /* La couleur de fond */
border-bottom-left-radius: 20px; /* Mettre le bord en bas a gauche arrondis */
margin-top: -650px; /* Metre le texte + ou - vers le haut */
margin-left: 530px; /* Mettre le texte + ou - vers la gauche */
font-family: arial; /* Le type d'écriture */
font-size: 30px; /* Aggrandir + ou - le texte */
padding-bottom: 10px; /* Aggrandir + ou - le background */
}
#P6
{
margin-top: 189px; /* Metre le texte + ou - vers le haut */
margin-left: 280px; /* Mettre le texte + ou - vers la gauche */
position: absolute; /* La position */
z-index: 20; /* Pour que sa passe par dessu le fond */
font-family: arial black; /* Le type d'écriture */
font-style: italic; /* Metre l'écriture penchée */
}
#P7
{
margin-top: 230px; /* Metre le texte + ou - vers le haut */
margin-left: 265px; /* Mettre le texte + ou - vers la gauche */
position: absolute; /* La position */
z-index: 200; /* Pour que sa passe par dessu le fond */
}
#P8
{
margin-top: 250px; /* Metre le texte + ou - vers le haut */
margin-left: 265px; /* Mettre le texte + ou - vers la gauche */
position: absolute; /* La position */
z-index: 200; /* Pour que sa passe par dessu le fond */
}
#P9
{
margin-top: 270px; /* Metre le texte + ou - vers le haut */
margin-left: 265px; /* Mettre le texte + ou - vers la gauche */
position: absolute; /* La position */
z-index: 200; /* Pour que sa passe par dessu le fond */
}
#P10
{
margin-top: 290px; /* Metre le texte + ou - vers le haut */
margin-left: 265px; /* Mettre le texte + ou - vers la gauche */
position: absolute; /* La position */
z-index: 200; /* Pour que sa passe par dessu le fond */
}
#P11
{
margin-top: 310px; /* Metre le texte + ou - vers le haut */
margin-left: 265px; /* Mettre le texte + ou - vers la gauche */
position: absolute; /* La position */
z-index: 200; /* Pour que sa passe par dessu le fond */
}
#P12
{
margin-top: 330px; /* Metre le texte + ou - vers le haut */
margin-left: 265px; /* Mettre le texte + ou - vers la gauche */
position: absolute; /* La position */
z-index: 200; /* Pour que sa passe par dessu le fond */
}
#P13
{
z-index: 20; /* Pour que sa passe par dessu le fond */
position: absolute; /* La position */
margin-top: 8px; /* Metre le texte + ou - vers le haut */
margin-left: 513px; /* Mettre le texte + ou - vers la gauche */
font-style: italic; /* Le style de l'écriture */
font-family: arial black; /* La police de l'écriture */
}
#P14
{
z-index: 20;
position: absolute;
margin-left: 505px;
margin-top: 50px;
font-family: arial black;
font-style: italic;
line-height: 12px;
font-size: 12px;
}
#P15
{
z-index: 20;
position: absolute;
margin-top: 578px;
margin-left: 445px;
font-family: arial black;
font-size: 13px;
}
#P16
{
border: 1px solid #DDA0DD;
background-color: #DDA0DD;
padding-left: 45px;
padding-right: 45px;
position: absolute;
margin-top: 618px;
margin-left: 365px;
font-family: arial black;
font-size: 13px;
}
/* FIN Phrases */