Positionnement de "blocks"

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

Code :

<!DOCTYPE html>
<html>
<head>
<meta chartset="utf-8"/>
<link rel="stylesheet" href="style.css"/>
<title> nomdurestaurant - Restaurant - Gastronomie - Soulac / Mer </title>
<p>nomdurestaurant</p><br/>
<p>RESTAURANT</p>
</head>
<div id="navigateur2">
<div id="acceuil2"><a href="acceuil.html">ACCEUIL</a></div>
<div id="carte2"><a href="Carte.html">LA CARTE</a></div>
<div id="info2"><a href="Infos.html">INFOS PRATIQUES & CONTACT</a></div>
</div>
<body>
<div id="content-home">
<div id="colonne-1">
<h1> ABCD, un chef inspiré</h1>
<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-3">
<h1>Une bonne adresse</h1>
<p>Dans le centre ville, à deux pas de la plage, offrez-vous une pause gourmande à nomdurestaurant.</p>
</div>
<div id="colonne-2">
<h1>Une cuisine créative</h1>
<p>Une cuisine de marché vivante et savoureuse, changeant au fil des saisons et de l'inspiration du chef.</p>
</div>
</div>
</body>
</html>

mon code css (fichier style.css)

Code :

<head>
<meta chartset="utf-8"/>
<link rel=stylesheet" href="style.css"/>
#navigateur2{float:left;}
#acceuil2,#carte2,#info2{width:20%;}
#acceuil2{float:left;margin-left:20%;display:block;}
#carte2{margin-right:40%;margin-left:40%;display:block;}
#info2{float:right;margin-right:20%;display:block;}
#acceuil2,#carte2,#info2{border:2px black solid;}
#acceuil2,#carte2,#info2{height:50px;}
#acceuil2,#carte2,#info2{padding:10px 10px;}
#acceuil2,#carte2,#info2{text-align:center;}
#content-home{float:left;}
#colonne-1,#colonne-2,#colonne-3{width:28%;}
#colonne-1{float: left;margin-left:2%;display:block;}
#colonne-2{margin-left:35%;margin-right:35%;display:block;}
#colonne-3{float:right;margin-right:2%;display:block;}
#colonne-1,#colonne-2,#colonne-3{border:1px black solid;}
#colonne-1,#colonne-2,#colonne-3{text-align:justify;}
#colonne-1,#colonne-2,#colonne-3{height:150px;}
#colonne-1,#colonne-2,#colonne-3{padding:10px 10px;}

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

Reply

Marsh Posté le 24-01-2012 à 14:22:27

Reply

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>

<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> 
</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!

---------------
__Little Brunette aux pays des templates__

Reply

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.

Reply

Positionnement de "blocks"

Sujets relatifs:

Leave a Replay