Positionnement de "blocks" - HTML/CSS - Programmation
Marsh Posté le 25-01-2012 à 10:44:57
hello,
essaie ça :
---- HTML ------
<body>
<div class="content">
<h1>nomdurestaurant</h1>
<br/>
<h2>RESTAURANT</h2>
<div id="navigateur2">
<ul>
<li id="acceuil2"><a href="acceuil.html">ACCEUIL</a></li>
<li id="carte2"><a href="Carte.html">LA CARTE</a></li>
<li id="info2"><a href="Infos.html">INFOS PRATIQUES & CONTACT</a></li>
<li class="clear"></li>
</ul>
</div><!-- end #navigateur2 -->
<div id="content-home">
<div id="colonne-1">
<h3> ABCD, un chef inspiré</h3>
<p>Dix ans d'expérience professionnelle reconnue sur la région et une excellente maîtrise de son métier.<br/>
Sa passion: susciter l'envie et apporter du bonheur.</p>
</div>
<div id="colonne-2">
<h3>Une bonne adresse</h3>
<p>Dans le centre ville, à deux pas de la plage, offrez-vous une pause gourmande à nomdurestaurant.</p>
</div>
<div id="colonne-3">
<h3>Une cuisine créative</h3>
<p>Une cuisine de marché vivante et savoureuse, changeant au fil des saisons et de l'inspiration du chef.</p>
</div>
<div class="clear"></div>
</div> <!-- end #content-home -->
</div>
</body>
---- CSS ------
li {list-style:none;}
ul {padding:0;}
.content {margin:0 auto;width:980px;}
#navigateur2{margin:0 20% 20px;}
#acceuil2,#carte2,#info2{width:29%;float:left;border:2px black solid;height:50px;padding:10px 10px;text-align:center;}
.clear{ clear: both;}
#content-home {margin:0 2%;}
#colonne-1,#colonne-2,#colonne-3{width:30%;float:left;border:1px black solid;text-align:justify;height:150px;padding:10px 10px;}
---- EXPLICATIONS ------
Les titres
Une seule balise <h1> : pour le titre le plus important de ta page.
Utilise les balises <h2> et <h3>... pour les niveaux de titres moins importants
la structure
- Mettre les 3 blocs dans l'ordre : 1-2-3.
- Aucun élément du contenu ne doit être dans la balise <HEAD>, tout est dans le <BODY>
- Pour le menu : Utilise des listes <ul><li></li></ul>
la css
- Si un élément a plusieurs valeurs, regroupe le tout au lieu de répéter à chaque fois les mêmes éléments.
- les colonnes 1 2 et 3 ont toutes des float left et pas de margin
- les margins 20% et 2% sont appliqués sur la boite qui les entoure
- quand on utilise des floats, il faut toujours que l'élément d'après annule ces floats (j'ai rajouté des balises avec le style "clear:none;". Si tu ne comprends pas, essaie de les enlever et regarde ce que ça fait.)
- pas la peine de mettre des display block sur une DIV car cette valeur est appliquée nativement pour cette balise.
- rajoute une div qui entoure le tout (ici j'ai mis : <div class="content">.....</div> ), ca te servira à mettre une taille fixe sur tout le contenu et fixer les margins à droite et à gauche.
Voila, bon courage pour la suite!
Marsh Posté le 25-01-2012 à 14:41:24
pinkette,
merci pour ta réponse j'essai des que je rentre.
et surtout pour les explications
je serais moins con ce soir
à l'occasion regarde mes autres postes stp
je suis surpris qu'il n'y ai pas de réponse.
Marsh Posté le 24-01-2012 à 14:22:27
Bon j'avance sur mon site mais la je suis bloqué sur le positionnement de mes "blocs"
voici ce que je souhaite réalisé
[img]Imageacceuil.jpg[/img]
edit: http://cjoint.com/?BAyoEnh2D2s
mon code html (fichier acceuil.html
mon code css (fichier style.css)
et voici ce que j'obtiens
[img]ImageCequeLobtiens.jpg[/img]
edit http://cjoint.com/?BAyoAhaeWqc
Quelqu'un saurait il ce qu'il faut modifié sur le code pour obtenir le naviageur2 aligné ainsi que les colonne-1;2;3 alignées ?
Merci
Message édité par 86vomito33 le 24-01-2012 à 14:31:36