Exposition Graphique : ZeRTy Darki et 19 utilisateurs inconnus

 Mot :   Pseudo :  
 
Bas de page
Auteur
 Sujet :

[CSS] Problème sur un site extensible

 
n°3099
Zok
Profil : New Penguin
Avatar
profil
Posté le 06-12-2009 à 20:18:15  
 

J'ai un autre problème mon site...
En fait, je souhaiterai avoir ma barre de menu qui arrive ainsi :
http://img37.imageshack.us/img37/787/sanstitre1jd.th.jpg
 
Seulement, elle se place en haut du site comme ceci :
http://img707.imageshack.us/img707/212/sanstitre3v.th.jpg
 
Alors que dans Dreamweaver, avec mon code, elle se place correctement :
http://img109.imageshack.us/img109/4364/sanstitre2sy.th.jpg
 
En fait, je ne comprends pas pourquoi quand j'augmente le margin-top, tout le site se décale alors que c'est celui d'une balise à l'intérieur d'une autre balise div dont la hauteur est fixe.
 
Voici mon code :
CSS :

Code :
  1. body{
  2. width:100%;
  3.  background-color: #eeeeee;}
  4. .bloc1 {
  5.   height: 332px; 
  6.   width: 979px;
  7. background-image: url(image/haut.jpg);
  8.   background-repeat: no-repeat; 
  9.   margin-left: auto;
  10.   margin-right: auto;
  11. }
  12. .bloc2 {
  13.   width: 979px;
  14.   height: auto
  15.   background-image: url(image/milieu.jpg);
  16.   background-repeat: repeat-y;
  17.   margin-left: auto;
  18.   margin-right: auto;
  19. }
  20. .bloc3 {
  21.   height: 285px; 
  22.   width: 979px;
  23.   background-image: url(image/bas.jpg);
  24.   background-repeat: no-repeat;
  25. margin-left: auto;
  26. margin-right: auto;
  27. }
  28. .bloc4 {
  29. position: absolute;
  30. left: 214px;
  31. top: 165px;
  32. width: 594px;
  33. height: 309px;
  34. margin-left: auto;
  35. margin-right: auto;
  36. }
  37. .Texte2 {
  38. font-family: Georgia, "Times New Roman", Times, serif;
  39. font-size: 18px;
  40. font-style: normal;
  41. line-height: normal;
  42. font-weight: normal;
  43. font-variant: normal;
  44. text-transform: none;
  45. text-align: justify;
  46. margin-left: 20%;
  47. margin-right: 18%;
  48. padding-bottom: 1px;
  49. padding-top: 1px;
  50. }
  51. .Menu {
  52. text-align: center;
  53. height: 49px;
  54. width:  560px;
  55. margin-left: 23%;
  56. margin-right: 22%;
  57. padding-bottom: 1px;
  58. padding-top: 1px;
  59. background-repeat:no-repeat;
  60. background-image:url(image/menu.png);
  61. position:static;
  62. margin-top:20%;
  63. }


 
C'est le truc en gras qui fait tout décaler je crois...
 
XHTML :

Code :
  1. <body>
  2.  <div class="bloc1">
  3.        <div class="Menu"><a href="index.html"><img src="image/accueil.png" width="75" height="49" alt="Accueuil Cabinet Strauss - Expert Comptable" border="0" /></a><a href="contact.html"><img src="image/contact.png" width="82" height="49" border="0" alt"contact" /></a></div>
  4. </div>
  5.  <div class="bloc2">
  6.    <div class="Texte2">
  7.      <h2>M'illumina l'immenso
  8.               - Giuseppe Ungaretti - </h2>
  9.      <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sapien pede, malesuada ac, ultricies in, dignissim eget, mauris. Nullam varius diam ac ligula. Morbi mattis posuere odio. Ut mattis risus ac erat. Nam volutpat, nisl vitae venenatis mollis, ante erat tincidunt purus, nec ornare felis tellus sed purus. Phasellus orci.</p>
  10.           </div>
  11. </div>
  12.     <div class="bloc3"></div>
  13.     </div>
  14. </body>

answer
mood
GoogleAds
profil
Posté le 06-12-2009 à 20:18:15  
 

answer
n°3100
clemphenix
Profil : Penguin
Avatar
profil
Posté le 06-12-2009 à 21:28:45  
 

Essaye avec un overflow:auto; sur bloc1.

answer
n°3101
Zok
Profil : New Penguin
Avatar
profil
Posté le 06-12-2009 à 23:21:42  
 

Oh merci beaucoup !!

answer

Aller à :
Ajouter une réponse