[W3C] Menu arborescent fixe simple

Version imprimable

26/09/2006, 16h47
chillansky

[W3C] Menu arborescent fixe simple
bonjour, j'aimerais creer un menu arborscent simple et fixe comme ça:
Code:

1 2 3 4 5 6 7 8 9 10 11 TEST . .....Mission . .....Histoire . . . .....yopla . . . .....qwailà . .....monqizue
Je pourrais très bien le faire avec des tableau mais je préfererais essayer avec les css. Mais les dans mes recherches je ne trouve que des choses bien complique qui ne correspondent pas à ce que je cherche.

D'avance merci ^^
26/09/2006, 16h49
Bisûnûrs

Regarde du côté de la propriété CSS "display".
26/09/2006, 16h56
chillansky

ben oui mais ça ne m'aide pas.
A noter que la mise en page devra ressembler quasimenet à ça (avec des points et tout et tout).
Mais dans mes essais je butes sur la mise en place des points ainsi que ces saloperies de marges IE vs FF

Code:

1
2
<div id="id1" onclick="affich()">TEST</div>
<div id="id2" style="display:none">Mission</div>

Code:

1
2
3
4
5
<script language="javascript">
function affich(){
   document.getElementById("id2").style.display = "block";
}
</script>

Je te laisse adapter et compléter ce code à ta convenance.

26/09/2006, 17h13
chillansky

Argh je vois que je me suis fait mal comprendre ;)
Je n'ai pas besoin de cacher le menu ou de faire apparaitre des morceau quand on clique dessus.
Moi je veux juste un affichage comme celui-là. En utilisant des ul et des li imbriqués pour obtenir ce résultats.
Mais je n'y arrive pas notement pour mettre des "."

La mise en page ressemblera quasi trait pour trait à ça. Je veux juste optimiser la chose en évitant de devoir creer un tableau ou mettre des bêtes points dans le code html
26/09/2006, 17h33
Bisûnûrs

Oh, ok ! Au temps pour moi alors, j'avais mal compris, en effet.

Juste une chose : Les listes en CSS sont très chiantes, elles ne sont pas du tout interprétées de la même manière par IE et Firefox, notamment en ce qui concerne les margin et padding.
26/09/2006, 21h26
chillansky

Que faire alors ?
Un menu avec plein de   et des '.' alors ?
Ca ne me semble pas très esthétique...
26/09/2006, 23h38
croc14

imbriquer des listes dans une liste ca marche pas ?

Sinon tu defini un deuxieme style de puce qui sera plus décalé !!!

Salut, tu peux faire quelque chose de ce type

Code:

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
<html>
 
	<head>
 
	</head>
 
	<body>
 
		<ul>
			<li>
				TEST
				<ul>
					<li>Mission</li>
					<li>
						Histoire
						<ul>
							<li>yopla</li>
							<li>qwailà</li>
						</ul>
					</li>
					<li>monqizue</li>
				</ul>
			</li>
		</ul>
 
	</body>
</html>

Tu peux ensuite modifier le style, par exemple

Code:

1
2
3
ul {
	list-style-type: none;
}

pour enlever les puces

Bon développement ;)

27/09/2006, 00h02
ilood

Salut

Avec une petite recherche on trouve ceci aussi.
Il reste à changer le css pour afficher les bordures en pointillés.
27/09/2006, 09h38
chillansky

Les listes imbriquée ça marche, mais comme IE et FF interprête ça complétement différement, ya des décalages partout.
Vivement que le navigateur le plus utilisé du monde soit conforme aux validations w3c ...
Vu, mais j'avoue que tout ces hack et la longeur du css me laisse perplexe.
Je crois que je vais passer par ces bon vieux tableaux.
Merci quand mêm ;-)