Bonjour à tous.
Je suis nouveau sur le forum et surtout débutant en HTML et css.
Je suis entrain de programmer une page, et j'ai un souci avec mon menu sur écran tactile.
Il ne se replie pas, et ayant parcouru le forum et le NET, j'ai décidé de m'inscrire pour solliciter votre aide.
Merci par avance.
ma page HTML
Je suis nouveau sur le forum et surtout débutant en HTML et css.
Je suis entrain de programmer une page, et j'ai un souci avec mon menu sur écran tactile.
Il ne se replie pas, et ayant parcouru le forum et le NET, j'ai décidé de m'inscrire pour solliciter votre aide.
Merci par avance.
ma page HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<link href="style.css" rel="stylesheet" type="text/css"/>
<link rel="icon" type="image/png" href="favicon.png" />
<meta name="robots" content="noindex">
<title>Mes recettes.</title>
<meta name="description" content="Pain, pain, miche, croute, campagne, boule, bon, un bon pain maison, pain maison, Salade de pâtes froides aux crudités, Tarte à la tomate, Purée Maison, Purée patate Maison, Purée pome de terre Maison, Tofailles vosgiennes, La purée de carotte, Pommes de terre rôties au four à la suédoise, Pommes de terres sautées, Poulet au four à la moutarde, Pain perdu, Crème brûlée, Tuile, Cookies au muesli, Galette jambon oeuf fromage, Pot-au-feu traditionnel" />
<style type="text/css">
* { box-sizing: border-box; }
*, *:before, *:after { box-sizing: border-box; }
/* -----------------Mise en forme de ma Page----------------------------------- */
body{
width: 980px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: #e1dfce;
background-image: url("images/fond.png");
background-repeat: no-repeat;
}
/* ---------------------------------------------------- */
/* -----------------Retour haut de page----------------------------------- */
.flechehaut { width:0px; border:20px solid transparent; border-bottom:20px solid #9c7c58; position:fixed; bottom:75px; left:690px; }
/* ---------------------------------------------------- */
/* ------------------Mon En-tete de page---------------------------------- */
/* L'en-tête */
#en_tete{
width: 980px;
height: 120px;
background-image: url("frame/bnr2.png");
background-repeat: no-repeat;
margin-bottom: 10px;
margin-left: 10px;
}
/* ---------------------------------------------------- */
/* --------------------Couleur de mes liens-------------------------------- */
/* Couleur Lien */
a{
color: red;
}
/* ---------------------------------------------------- */
/* ---------------------Mise en forme de mon texte------------------------------- */
h1 {
text-align : center;
text-shadow : 5px 5px 5px #6f6f6f;
color : black;
}
h2{
color: black;
text-shadow : 5px 5px 5px #6f6f6f;
padding-left: 140px;
font-family: "Comic Sans MS", Arial, "Arial Black", "Times New Roman", Times, serif;
}
h3, h4{
color: black;
text-align: justify;
text-shadow : 5px 5px 5px #6f6f6f;
font-family: "Comic Sans MS", Arial, "Arial Black", "Times New Roman", Times, serif;
}
p{ padding-left: 40px; }
hr{ width:100%; }
/* ---------------------------------------------------- */
/* ------------------Mise en Forme de mon Menu---------------------------------- */
#menu{
position: fixed;
z-index:10;
width: 600px;
height:200px;
background-color:transparent;
margin:0 0 0 200px;
text-align: center;
}
.navigation, .navigation ul {
margin: 0;
padding: 0;
list-style: none;
}
.navigation li {
padding: 10px;
display: inline-block;
position: relative;
font-size: 12px;
border : #9c7c58 ridge 1px;
background-color: #CBBCA8;
}
.navigation a {
display: inline-block;
vertical-align: top;
width: 190px;
height: auto;
text-align: center;
font-size : 2.0em;
background: transparent;
}
.navigation ul {
display: none;
position: absolute;
background: #cab9a5;
z-index : 33;
}
.navigation li:hover > ul {
display: block;
left: 0;
}
.navigation li li:hover > ul {
left: 150px;
top: 0;
}
.navigation li li {
font-size : 0.7em;
background-color: #E1DFCE;
}
.navigation a:hover {
color: #bd0303;
background: #fcda0f;
}
a {
text-decoration: none;
color: #472701;
}
/* ---------------------------------------------------- */
/* ---------------------------------------------------- */
</style>
</head>
<body id="hautpage">
<h1>Mes Recettes courantes</h1>
<div id="menu">
<ul class="navigation">
<!-- Debut Menu -->
<li><h3 class="titre">Entrée</h3>
<ul class="nav">
<li> <a href="#saladepate">Salade de pâtes froides aux crudités</a> </li>
<li> <a href="#tartetomate">Tarte à la tomate</a> </li>
<li> <a href="#painperdusale">Tartine Vosgienne</a> </li>
<li> <a href="#PateLorrain">Pâté Lorrain</a> </li>
<li> <a href="#Veloutechampignons">Velouté champignons</a> </li>
</ul>
</li>
<li><h3 class="titre">Plat Chaud</h3>
<ul class="nav">
<li> <a href="#pureepatate">Purée Maison</a> </li>
<li> <a href="#tofaille">Tofailles vosgiennes</a> </li>
<li> <a href="#pureecarotte">Purée de carotte</a> </li>
<li> <a href="#patatefour">Pommes de terre rôties au four à la suédoise</a> </li>
<li> <a href="#patatesautee">Pommes de terres sautées</a> </li>
<li> <a href="#pouletmoutarde">Poulet au four à la moutarde</a> </li>
<li> <a href="#potaufeu">Pot-au-feu traditionnel</a> </li>
<li> <a href="#Chili">Chili con carne express</a> </li>
<li> <a href="#Rosti">Les Rostis</a> </li>
<li> <a href="#pureepois">Purée de pois cassé</a> </li>
<li> <a href="#Saumonmediterranee">Saumon au four à la méditerranéenne</a> </li>
<li> <a href="#Saumoncroute">Saumon en croûte</a> </li>
<li> <a href="#Mouleschorizo">Moules au chorizo</a> </li>
</ul>
</li>
<li><h3 class="titre">Dessert</h3>
<ul class="nav">
<li> <a href="#painperdu">Pain perdu</a> </li>
<li> <a href="#cremebrulee">Crème brûlée</a> </li>
<li> <a href="#tuile">Tuile</a> </li>
<li> <a href="#cookiesmuesli">Cookies au muesli</a> </li>
<li> <a href="#clafouti">Clafouti de saison</a> </li>
<li> <a href="#Flognarde">Flognarde aux pommes</a> </li>
<li> <a href="#Pancakes">Pancakes Canadien</a> </li>
</ul>
</li>
<li><h3 class="titre">Divers</h3>
<ul class="nav">
<li> <a href="#pain2">Le Pain Amérindien</a> </li>
<li> <a href="#pain">Recette du pain</a> </li>
<li> <a href="#crepejambonoeuf">Galette jambon oeuf fromage</a> </li>
<li> <a href="#popcorn">Pop corn au micro-onde</a> </li>
</ul>
</li>
<li><h3 class="titre">Survie</h3>
<ul class="nav">
<li> <a href="#Ouka">L'Ouka</a> </li>
<li> <a href="#pain">Soupe d'ortie</a> </li>
</ul>
</li>
<li><h3 class="titre">Boisson</h3>
<ul class="nav">
<li> <a href="#Ouka">Boisson aux Fruits</a> </li>
<li> <a href="#pain">Vin Chaud</a> </li>
</ul>
</li>
</ul>
</div>
<!-- Debut Menu -->
<!-- Debut Haut de page -->
<div id="footer"><a href="#hautpage" class="flechehaut"></a></div>
<!-- Fin Haut de page -->
<!-- Debut Corps de page -->
<p id="pain"><br /><br /><br /></p>
<br />
<hr />
<br />
<h1>Recette du pain</h1>
<p>
<strong><em>
500 gr de farine à pain "Francine",<br />
325 ml d'eau tiède,<br />
1 cuillère à café et demie de sel,<br />
2 sachets de levure boulangère.<br />
</em></strong>
</p>
<p>
- Dans un saladier, mélanger la farine et le sel, puis faire un puits.<br />
</p>
<p>
- Ajouter la levure et l'eau.<br />
- Pétrir avec une cuillère en bois ou au robot afin d'obtenir une pâte lisse.<br />
- Je donne la forme d'une boule à la pâte et la dépose sur la plaque de cuisson avec un film Téflon pour éviter que cela colle.<br />
- Recouvrir d'un saladier puis laisser reposer la nuit.<br />
</p>
<p>
- Préchauffer le four à 240° "Th8", pendant ce temps avec un couteau bien aiguisé ou une lame de rasoir, <br />
j'effectue plusieurs entailles croisées et saupoudre de farine.<br />
</p>
<p>
- Pendant la cuisson, déposer un ramequin d'eau chaude sur la plaque de cuisson et faire cuire à 210° "Th7" pendant 35mn, <br />
jusqu'à ce que la croute soit dorée.<br />
</p>
<p>
<img style="width: 75%; height: 40%;" src="picture/100_0723.jpg" alt="Un bon pain maison" title="Cela ma l'air bien bon !!!" />
</p>
<br />
<hr />
<br />
<p id="painperdu"><br /><br /><br /></p>
<br />
<hr />
<br />
<h1>Pain perdu <em>(pour 3 personnes environ ½ baguette)</em></h1>
<p>
1 œuf + 1 jaune<br />
80 g de sucre en poudre<br />
2 cuillères à soupe de crème<br />
33cl de lait <br />
Du pain Sec (si possible pas de l'industriel!!!).<br />
</p>
<p>
- Porter à ébullition 33cl de lait<br />
</p>
<p>
- délayer jusqu'à obtention d'un mélange blanc:<br />
- 1 œuf + 1 jaune + 80 g de sucre en poudre<br />
- 2 cuillères à soupe de crème<br />
</p>
<p>
Incorporez le lait à la migaine.
</p>
<p>
- <strong><em>tremper le pain dans la migaine et le brunir à la poêle des deux côtés </em></strong>
</p>
<br />
<hr />
<br />
<p id="cremebrulee"><br /><br /><br /></p>
<br />
<hr />
<br />
<h1>Crème brûlée</h1>
<p>
6 jaunes d'œufs<br />
80 g de sucre dont 1 sachet de sucre vanillé<br />
70g de lait 1/2 écrémé<br />
50 cl de crème Fleurette<br />
</p>
<p>
Mélanger avec 6 jaunes d’œufs les 80 g de sucre dont 1 sachet de sucre vanillé
</p>
<p>
Ajouter 70g de lait 1/2 écrémé et les 50 cl de crème Fleurette<br />
</p>
<p>
<strong>- <em>Cuire à 150°c pendant 1H00</em></strong>
</p>
<br />
<hr />
<br />
</body>
</html>