Position div par rapport à une autre

**rodolphebrd** · 19/07/2013, 16h02

Je part de la suppostion que le contenu s'affiche après le dernier LI.

Sinon en CSS ce n'est pas possible en effet..

**Bisûnûrs** · 19/07/2013, 16h14

Je ne sais pas si par une manipulation des sélecteurs on peut arriver à avoir le tout dernier li de la liste, quelle que soit l'arbo.
Et toute façon, même si c'était le cas, si on veut afficher un contenu de niveau 4 et que le dernier li est de niveau inférieur, l'indentation ne sera pas bonne.

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

Envoyé par Bisûnûrs

si on veut afficher un contenu de niveau 4 et que le dernier li est de niveau inférieur, l'indentation ne sera pas bonne.

Pas compris

On reste toujours sur le principe de cibler le dernier li hein !

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
45
46
47
48
49
50
51
52
53
54
55
56
<!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
					  <ul>
					    <li>level 1</li>
 
					    <li>level 1.1
					      <ul>
					        <li>level 2.1</li>
					        <li>level 2.2
					          <ul>
					            <li>level 3.1</li>
					            <li style="float:left;">level 3.2</li>
				              </ul>
					        </li>
				          </ul>
				        </li>
				      </ul>
				    </li>
				</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, 16h38

Que se passe-t-il quand on clique sur Lien 1.2 pour en afficher le contenu ?

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<ul>
	<li>Lien 1
		<ul>
			<li>Lien 1.1</li>
			<li>Lien 1.2</li>
			<li>Lien 1.3</li>
		</ul>
	</li>
	<li>Lien 2</li>
	<li>Lien 3</li>
</ul>

Ici le last-child cible "Lien 1.3" et "Lien 3".

**rodolphebrd** · 19/07/2013, 16h43

Ok je comprends où tu veux en venir

Ce n'est pas possible si le li ciblé est aléatoire.

C'est réalisable si l'item ciblé est "lien3" (le dernier li de la liste)

**Ceddoc** · 19/07/2013, 16h46

@rodolphebrd: très intéressant, je rencontre quelques petits soucis à le mettre en place en conditions réelles mais ça fait exactement ce que je voulais sur les fichiers/codes que j'ai donné. Parfait ! En théorie je devrais me débrouiller.

@Bisûnûrs: si tu relis mon exemple "texte" les autres li disparaissent lorsqu'on en sélectionne un de même niveau :

racine

Lien 1

Lien 1.3

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

La c'est l'arborescence réelle, les autres liens ont bien disparus