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.

**Bisûnûrs** · 19/07/2013, 14h09

Ah, c'est le contenu du site, pas d'un élément de la liste ...
Punaise, je vois vraiment pas quel genre de design tu veux alors, ni comment il doit réagir.

**Ceddoc** · 19/07/2013, 14h38

J'avoue que je trouve ça bidon mais c'est imposé pour essayer d'expliquer autrement le but c'est de conserver l'aspect hierarchique un truc du genre :

racine

Lien 1

Lien 2

Lien 3

Puis quand on clique sur lien 1

racine

Lien 1

Lien 1.1

Lien 1.2

Lien 1.3

Puis sur clic lien 1.3

racine

Lien 1

Lien 1.3

Contenu lien 1.3 sur toute la page mais avec l'indentatin alignement comme ici.

**rodolphebrd** · 19/07/2013, 14h52

Qu'est ce que ça donne la position relative ?

**Ceddoc** · 19/07/2013, 14h54

Pas grand chose vu que l'espace à gauche est variable (suivant la profondeur dans l'arborescence) ou alors je vois pas trop comment tu veux que je m'en serve.

Au plus j'essaie des solutions au plus je me dis qu'il n'y aura pas de solutions simple en css.

**Bisûnûrs** · 19/07/2013, 14h56

Vu comme tu as présenté la liste et son contenu, le contenu à mon avis devrait directement être intégré dans la liste (comme ton exemple 1), vu que ce n'est pas un menu avec rafraichissement de page.

**Ceddoc** · 19/07/2013, 15h00

Je ne peux pas faire ça avec la techno que j'utilise (c# mvc layout) l'idée serait vraiment d'aligner via CSS ou autre.

Je peux rajouter des divs etc par contre

**Bisûnûrs** · 19/07/2013, 15h06

Je ne vois pas en quoi utiliser un langage serveur t'empêche de faire cette structure.
Il est clair qu'en CSS seul, tu n'y arriveras pas, il faut au minimum passer par du Javascript si tu restes sur une structure boiteuse.

**rodolphebrd** · 19/07/2013, 15h06

Si on prend pour référence le DIV "menus" on peut faire ça :

Code :

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

1
2
3
4
5
6
7
#menus {
	position: relative;
}
#contentpage {
	position: absolute;
	left: 0;
}

**Ceddoc** · 19/07/2013, 15h23

@Bisûnûrs: en fait j'ai un module "menu" et d'un autre côté un module "contenu" mixer les deux ça va être encore plus sale et je sais même pas si ça va être réalisable.

@rodolphebrd : ça change rien, la div contenu reste en bas ça gauche en dessous du menu

**rodolphebrd** · 19/07/2013, 15h29

J'ai fait une confusion avec les 2 fichiers.

**Bisûnûrs** · 19/07/2013, 15h33

Envoyé par Ceddoc

@Bisûnûrs: en fait j'ai un module "menu" et d'un autre côté un module "contenu" mixer les deux ça va être encore plus sale et je sais même pas si ça va être réalisable.

Pas moyen d'appeler le module contenu dans le module menu en fonction d'une variable ?

Sinon il te reste ça :

Envoyé par Bisûnûrs

Il est clair qu'en CSS seul, tu n'y arriveras pas, il faut au minimum passer par du Javascript

**Ceddoc** · 19/07/2013, 15h37

@rodolphebrd : D'un côté ça me rassure un peu

@Bisûnûrs : j'ai peur que je doive en arriver à une manip comme ça malheureusement. J'avais espoir que quelqu'un ai une idée avec quelques divs bien placées/imbriquées mais bon...

**rodolphebrd** · 19/07/2013, 15h38

Et ça :

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
38
39
40
41
42
43
44
<!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>
 
<style type="text/css">
 
#menus li:last-child{
        float:left;
}
#contentpage {
        width:600px;
        float:left;
}
</style>
</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">
								  <p>Duis aute irure dolor quis nostrud exercitation excepteur sint occaecat. Ullamco laboris nisi sunt in culpa cupidatat non proident. Eu fugiat nulla pariatur. In reprehenderit in voluptate ut labore et dolore magna aliqua.</p>
                  <p>Lorem ipsum dolor sit amet, excepteur sint occaecat quis nostrud exercitation. Qui officia deserunt in reprehenderit in voluptate velit esse cillum dolore. Eu fugiat nulla pariatur.</p>
                  <p>Ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, quis nostrud exercitation sed do eiusmod tempor incididunt. Ut labore et dolore magna aliqua.</p>
                  <p>Ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, in reprehenderit in voluptate excepteur sint occaecat. Qui officia deserunt quis nostrud exercitation ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt in reprehenderit in voluptate consectetur adipisicing elit. Cupidatat non proident, sunt in culpa velit esse cillum dolore.</p>
                  <p>Velit esse cillum dolore in reprehenderit in voluptate duis aute irure dolor. Ut enim ad minim veniam, quis nostrud exercitation sunt in culpa. Sed do eiusmod tempor incididunt qui officia deserunt ullamco laboris nisi.</p>
            </div>
        </div>
    </body>
</html>

**Bisûnûrs** · 19/07/2013, 15h46

@rodolphebrd : Vu que c'est du dépliage, si tu rajoutes un ou deux autres li au même niveau que test mais en-dessous de celui déplié, ça ne fonctionne plus.

Code html :

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

1
2
3
4
5
6
7
8
<ul>
	<li>test</li>
	<ul>
		<li>testons</li>
	</ul>
	<li>test</li>
	<li>test</li>
</ul>

(d'ailleurs il fout quoi cet ul en dehors d'un li ?)

Position div par rapport à une autre

Positionnement en CSS

Discussions similaires

Partager

Partager