[résolu] Structure page WEB

DARDI · Message par **DARDI** » 04 avr. 2008, 09:00

Bonjour,

cela fait plusieurs jours que j'essaye, en vain, de mettre à la même hauteur un menu et le corps.

le code suivant fonctionne bien avec IE, mais pas avec Mozilla.

si quelqu'un peut-il me dire ce qui cloche, ce serait sympa.

voici le xhtml :

<body>
<div id="EnTete">

</div>
<div id="Menus">
<div>
<h3>Menus</h3>
</div>
</div>
<div id="Corps">
<div>
<h1>Corps</h1>
</div>
</div>
</body>

et le CSS :

body
{width:760px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
background-color:#f0f8ff;}

#EnTete
{width:760px;
height:100px;
background-image:url(Test.gif);
background-repeat:no-repeat;
margin-bottom:20px;}

#Menus
{float:left;
width:120px;}

h3
{border:1px solid #000000;
background-color:#ffebcd;
color:#0000ff;
padding:10px 10px 10px 10px;
font-family:"Times New Roman";
text-align:center;}

#Corps
{border:1px solid #000000;
background-color:#ffebcd;
color:#00008b;
margin-left:140px;
margin-bottom:20px;
padding:5px;}

#Corps h1
{color:#0000ff;
text-align:center;
font-family:"Times New Roman";}

Merci.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

Message par **jpj** » 04 avr. 2008, 09:46

Bonjour,

Je déplace dans "Développement web".

Message par **chinon37** » 04 avr. 2008, 09:49

Bonjour,

1- ce message aurait dû être posté plutôt dans le forum "devlpt web". J'en demande le déplacement
2- Merci de mettre le code entre les balise [code*] et [/code*] (sans le*)
3- je regarde ce code et je reviens.... peut-être

[edit] mince, grillé

[/edit]

DARDI · Message par **DARDI** » 04 avr. 2008, 09:55

désolé, je suis allé un peu vite et je n'ai pas vu qu'il y avait un forum développement web.

et en allant trop vite j'ai aussi oublié les balises.

toutes mes excuses.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

Message par **chinon37** » 04 avr. 2008, 10:45

Il y a un truc qui m'échappe, mais le code ci-dessous donne un affichage identique pour IE et FF: (créé avec KompoZer)

Code : Tout sélectionner

<style type="text/css">
body {
    margin-right: auto;
    margin-left: auto;
    width: 760px;
    text-align: center;
    }
    #entete {
    background-color: #ffffcc;
    height: 100px;
    margin-top: 20px;
    margin-bottom: 20px;
    }
    #menu {
    background-color: #cccccc;
    width: 120px;
    float: left;
    }
    #corps {
    background-color: #999999;
    margin-left: 140px;
    margin-bottom: 20px;
    }

    </style>
  </head>
  <body>
    <div id="entete">
      entete
    </div>
    <div id="menu">
      menu
    </div>
    <div id="corps">
      corpsLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
      <br>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br>
      <br>
      Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </div>
  </body>

Il ne reste plus qu'à remplir les div...

DARDI · Message par **DARDI** » 04 avr. 2008, 11:23

merci chinon37,

en grattant avec ton code, j'ai trouvé ce qui clochait.

par défaut, IE met margin-top à 0, alors que FF met par défaut une valeur...

donc en rajoutant "margin-top : 0;" dans la balise h3 de mon code, j'arrive à avoir le menu à la même auteur du corps.

bonne journée.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

Geckozone

[résolu] Structure page WEB

[résolu] Structure page WEB

Qui est en ligne ?