<DIV> : Menu fixe mais contenu variable

**Hell** · 02/12/2005, 20h16

Bonjour
J'essaye de créer une page avec une partie menu et une partie contenu à l'aide de <div>.
J'aimerai que seule la partie contenu s'adapte à la résolution, je n'ai pas envie de me retrouver avec un menu plus grand que nécessaire.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div style="width:210px; float:left;">
mon menu
...
...
...
</div>
<div style="width:100%; float:left;">
mon contenu
...
...
...
</div>

Le problème est que ma partie contenu passe en dessous du menu... Par contre si je lui mets une taille fixe tout va bien.

Comment faire pour que ma partie contenu se place correctement et s'adapte à la résolution?

Merci d'avance

**francis m** · 02/12/2005, 21h09

pour le contenu : width:auto;

**Hell** · 02/12/2005, 21h27

malheureusement ça fait pareil, le contenu se place sous le menu (sauf sous ie)

**balu** · 03/12/2005, 02h33

Ce que tu veux obtenir devrait ressembler à ça :

page.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
25
26
27
28
29
30
31
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<title>MENU et CONTENU</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<link href="page.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div id="global">
	<div id="menu">
		<h3>MENU</h3>
		<ul>
			<li><a href="#">Lien #1</a></li>
			<li><a href="#">Lien #2</a></li>
			<li><a href="#">Lien #3</a></li>
			<li><a href="#">Lien #4</a></li>
			<li><a href="#">Lien #5</a></li>
		</ul>
	</div>
	<div id="contenu">
		<h3>CONTENU</h3>
                <p>wdfysugdfugsubfjs afhi bsdbahj asbdddddfsdhbfsb jbfhhj fdsbhj sf hsbfsdbdbfdhbfh bhjdsjfidjfi idfi fjidfidjf ijdf fid ifj ijidf jfijidjfdjififjdij fid if ifjidjfid jif idfjidj fij dif idjfidijf idjfi idfjid jfidif idfj</p>
                <p>fjgijfidjg ij digjdi jgidf jgidf igdfjig idgij gjdfijgodjgfio ifdojg iodfjgiodjg iodgjiod giodfjiogjdi jgiodgj kodj giojdiogjdioj giogfiojd iogjdfioj gpskdofg ndhu9dugdo uiodf g djgudfhgui dfhugdfugnidfngjdn jdfj jignju dfnguid iug difgn dufjgn difngjdgn </p>
	</div>
</div>
 
</body>
</html>

page.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
23
24
25
26
27
28
29
30
body {
	margin: 0;
	padding: 0;
	text-align: center;
}
 
#global {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	text-align: left;
	background: #E6E6FA;
}
 
#menu {
	width: 210px;
	float: left;
	background: #E6E6FA;
}
 
#contenu {
	background: #FFFFF0;
	margin-left: 210px;
	padding: 0 10px 0 10px;
}
 
h3 {
	margin: 0;
}

J'ai ajouté un conteneur global pour la page. Ça fonctionne bien dans Firefox et Internet Explorer.

**Hell** · 03/12/2005, 11h19

Merci beaucoup c'est exactement ça que je cherchais 8)

<DIV> : Menu fixe mais contenu variable

HTML

Discussions similaires

Partager

Partager