Mise en page

**ehben** · 11/10/2007, 00h43

Bonjour,

voilà qqchose de tout simple que je veux faire mais qui ne s'affiche pas comme il faut : "une entête en haut de la page, un menu à gauche de la fenetre, le contenu à droite et le pied de page en bas..."

IE m'affiche les différents cadres, les uns en dessous des autres (comme s'il ne tenait pas compte des 'float' ...)
J'ai un peu fouillé sur le site mais je ne comprends pas pquoi ce que j'ai fais ne fonctionne pas (j'utilise IE7).

Merci

code HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
<div id="HEADER">
  <p>TITLE GOES HERE</p>
</div>
 
<div id="CMENU">
 <ul>
  <li>lien 1</li> 
  <li>lien 2</li>
  <li>lien 3</li>
 </ul>
 
</div>
 
<div id="CMAIN">
  <p> ceci est la colonne principale </p>
</div>
 
 
<div id="FOOTER">
   <p> ceci est le pied </p>
</div>
 
</body>

code CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#HEADER {
background-color: #666;
}
 
#CMENU {
width: 20%
float: left;
background-color: white;
text-align : justify;
}
 
#CMAIN {
width: 80%
float: left;	  
background-color: white;
}
 
#FOOTER {
clear: both;
border-top: 1px solid #333;
text-align: center;
}

**pitxu** · 11/10/2007, 01h02

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#CMAIN {
width: 80%
float: right;	  
background-color: white;
}

enfin je crois

**LeXo** · 11/10/2007, 01h07

non c pas ça
mets de points virgules partout (auw width par exple)

montre la référence a ton css stp

**spitou_77** · 11/10/2007, 08h51

Mettre ton site dans un conteneur style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="wrapper">
<div id="HEADER">
  <p>TITLE GOES HERE</p>
</div>
 
<div id="CMENU">
 <ul>
  <li>lien 1</li> 
  <li>lien 2</li>
  <li>lien 3</li>
 </ul>
 
</div>
 
<div id="CMAIN">
  <p> ceci est la colonne principale </p>
</div>
 
 
<div id="FOOTER">
   <p> ceci est le pied </p>
</div>
</div>

et définir en css la taille et le type de position de ton conteneur:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#wrapper{
  width: 1000px;
  position: relative;
}

**ehben** · 11/10/2007, 12h01

Excellent

ça marche ...

J'ai mis les ";" et le div wrapper...

Merci à vous tous

Mise en page

CSS

Vue hybride

Discussions similaires

Partager

Partager