Position div par rapport à une autre

**Ceddoc** · 19/07/2013, 11h16

Bonjour,

J'ai schématisé ce que j'ai actuellement dans le fichier "test.html".

En gros j'aimerais arriver à un résultat qui ressemble à ce que j'ai dans "test2.html". Mais la taille du simili menu et sa profondeur n'est pas fixe. Je ne peux pas non plus mettre la div contentpage à l'intérieur de la liste. Je suis plus ou moins obligé de conservé la structure de page présentée dans "test.html"

Donc ma question est, comment positionner la div contentpage comme dans test2.html en ajoutant du css à test.html (juste la position je me fiche de la décoration de la liste)

merci d'avance.

edit : Suite au conseil je colle les codes à la suite :
Ce que j'ai

Code html :

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
32
 
 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>mon test</title>
 
</head>
    <body>
        <div id="menu">
			<div id="titre">
				<a href="/">Mon menu bidon</a>
			</div>
			<div id="menus">
				<ul>
					<li>test
					</li>
					<ul>
						<li>testons</li>
					</ul>
				</ul>
			</div>
		</div>
        <div id="body">
			<div id="contentpage">
				Contenu
			</div>
        </div>
    </body>
</html>

Ce dont je voudrais avoir l'apparence

Code html :

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
32
33
34
35
36
37
 
 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>mon test</title>
 
</head>
    <body>
        <div id="menu">
			<div id="titre">
				<a href="/">Mon menu bidon</a>
			</div>
			<div id="menus">
				<ul>
					<li>test
					</li>
					<ul>
						<li>testons</li>
						<ul>
							<li>
								<div id="contentpage">
									Contenu...
								</div>
							</li>
						</ul>
					</ul>
				</ul>
			</div>
		</div>
        <div id="body">
 
        </div>
    </body>
</html>

**rodolphebrd** · 19/07/2013, 11h26

Bonjour,

vu la longueur des codes vous pouvez utiliser la balise #code pour faciliter l'accès à ceux qui tenteront de vous aider.

Vous pouvez commencer par ça :

Code :

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

ul, li {padding: 0px;}

**Ceddoc** · 19/07/2013, 11h43

Je veux conserver l'aspect liste, justement, je veux que cette aspect "liste avec arborescence" aille jusqu'au contenu

**rodolphebrd** · 19/07/2013, 11h46

A partrir du code que je vous ai donné vous pouvez redonner un style à vos listes à condition qu'il n'y en ai pas une tonne.

Sinon en faisant cela :

Code :

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

1
2
3
4
#contentpage {
	position: relative;
	right: 100px;
}

**Bisûnûrs** · 19/07/2013, 12h15

Pourquoi ne pas laisser le contenu dans la liste ?

**Ceddoc** · 19/07/2013, 12h49

@Bisûnûrs: Parce-que mon menu est commun à toute mes pages je peux pas mettre le contenu dedans.

Position div par rapport à une autre

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager