Positionnement de "blocks"

Positionnement de "blocks" - HTML/CSS - Programmation

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 :
  1. <!DOCTYPE html>
  2. <html>
  3. <!-- L'en tete -->
  4. <head>
  5. <meta chartset="utf-8"/>
  6. <link rel="stylesheet" href="style.css"/>
  7. <title> nomdurestaurant - Restaurant - Gastronomie - Soulac / Mer </title>
  8. <p>nomdurestaurant</p><br/>
  9. <p>RESTAURANT</p>
  10. </head>
  11. <div id="navigateur2">
  12. <div id="acceuil2"><a href="acceuil.html">ACCEUIL</a></div>
  13. <div id="carte2"><a href="Carte.html">LA CARTE</a></div>
  14. <div id="info2"><a href="Infos.html">INFOS PRATIQUES & CONTACT</a></div>
  15. </div><!-- end #navigateur2 -->
  16. <body>
  17. <div id="content-home">
  18. <div id="colonne-1">
  19. <h1> ABCD, un chef inspiré</h1>
  20. <p>Dix ans d’expérience professionnelle reconnue sur la région et une excellente maîtrise de son métier.<br/>
  21. Sa passion: susciter l'envie et apporter du bonheur.</p>
  22. </div>
  23. <div id="colonne-3">
  24. <h1>Une bonne adresse</h1>
  25. <p>Dans le centre ville, à deux pas de la plage, offrez-vous une pause gourmande à nomdurestaurant.</p>
  26. </div>
  27. <div id="colonne-2">
  28. <h1>Une cuisine créative</h1>
  29. <p>Une cuisine de marché vivante et savoureuse, changeant au fil des saisons et de l'inspiration du chef.</p>
  30. </div> 
  31. </div> <!-- end #content-home -->
  32. </body>
  33. </html>


 
mon code css (fichier style.css)

Code :
  1. <head>
  2. <meta chartset="utf-8"/>
  3. <link rel=stylesheet" href="style.css"/>
  4. <!-- Le navigateur2 -->
  5. #navigateur2{float:left;}
  6. #acceuil2,#carte2,#info2{width:20%;}
  7. #acceuil2{float:left;margin-left:20%;display:block;}
  8. #carte2{margin-right:40%;margin-left:40%;display:block;}
  9. #info2{float:right;margin-right:20%;display:block;}
  10. #acceuil2,#carte2,#info2{border:2px black solid;}
  11. #acceuil2,#carte2,#info2{height:50px;}
  12. #acceuil2,#carte2,#info2{padding:10px 10px;}
  13. #acceuil2,#carte2,#info2{text-align:center;}
  14. <!-- Les 3 blocs de la page acceuil -->
  15. #content-home{float:left;}
  16. #colonne-1,#colonne-2,#colonne-3{width:28%;}
  17. #colonne-1{float: left;margin-left:2%;display:block;}
  18. #colonne-2{margin-left:35%;margin-right:35%;display:block;}
  19. #colonne-3{float:right;margin-right:2%;display:block;}
  20. #colonne-1,#colonne-2,#colonne-3{border:1px black solid;}
  21. #colonne-1,#colonne-2,#colonne-3{text-align:justify;}
  22. #colonne-1,#colonne-2,#colonne-3{height:150px;}
  23. #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><!-- 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!  
 


---------------
__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

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed