faire un menu vertical avec des liens

Version imprimable

bonjour tout le monde, je voulais savoir comment faire un menu vertical, avec des liens hypertexte de façon à ce qu'il reste toujours visible par le visiteur, même si l'on descend dans la fenêtre.
pour l'instant j'ai fait ça en html, avec un tableau :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
<table name="tableau1.1.1" border=3 bordercolor="#CC0000">
 
 
			<tr><td align="center"><a href="http://azteques.xooit.fr/index.php" target=_blank><b>Forum</b></a></td></tr>
			<tr><td align="center"><a href="elfen.html"><b>Accueil</b></a></td></tr>
			<tr><td align="center"><a href="rp.html"><b>Rôle Play</b></td></tr>
			<tr><td align="center"><a href="http://chevalierkasza.free.fr/alliance_ogame/ogspy/OGSpy3_05/index.php" target=_blank><b>Cartographie</b></a></td><tr>
			<tr><td align="center"><a href="stats.html"><b>Progression</b></a></td></tr>
			<tr><td align="center"><a href="mailto:aaaaaaaa@gmail.com"><b>Me contacter</b></td></tr>
			<tr><td align="center"><a href="http://mines.webinpact.com/index.php" target=_blank><b>Mines</b></a></td></tr>
			<tr><td align="center"><a href="http://www.ogame-winner.com/convertisseur-rc-rapports-combat.html" target=_blank><b>Convertisseur de RC</b></a></td></tr>
			<tr><td align="center"><a href="http://www.ogame-winner.com/convertisseur-re-rapports-espionnage.html" target=_blank><b>Convertisseur de RE</b></a></td></Tr>
		</table>

07/02/2009, 19h47
Lenezir

Salut. ;)
Alors ça se fait par CSS ça.
Sur le div de ton menu, mets lui une classe CSS contenant "position : fixed;"
08/02/2009, 12h18
Kuchiki Byakuya

ba alors va faloir que je me mette au css car je n'y connais rien :P
tu pourrais me montrer un exemple de code que je pourrai appliquer pour ça hjistoire que ce soit fait le temps que j'apprenne :P
comme ça ça me fera un exemple

Oui c'est très simple.
Alors je pars du principe que tu as un DIV pour ton menu.
Donc pour un site basique ça devrait ressembler à ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <html> <head> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="menu">  </div> <div id="corps">  </div> </div id="footer">  </div> </body> </html>
Après ça tu te crée un fichier style.css et dedans tu mets :
Code:

1 2 3 4 5 #menu { position : fixed; /*Pour que le menu ne bouge pas*/ float : left; /* Pour que ton menu reste collé à gauche*/ }
Bonne chance. ;)

08/02/2009, 13h08
Kuchiki Byakuya

grand merci !!! une dernière petite question, pour apprendre le css, une connaissance basique du javascript suffit ou pas ?
08/02/2009, 13h10
Lenezir

Tu n'as pas du tout besoin du JavaScript pour apprendre le CSS. :)
08/02/2009, 13h17
Kuchiki Byakuya

super parce que ma connaissance du java script est un peu basique :D ba grand merci, problème résolu !!!
08/02/2009, 13h19
Lenezir

Bon courage. :king:

en fait re petit problème, j'ai essayé d'intégrer le code que tu m'a donné comme ceci :

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
28
29
30
31
32
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<title>La Horde Elfen</title>
<head  xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" ><h1 align="center"><img src="http://img3.xooimage.com/files/6/8/8/logotest2-a77ef6.png" /></h1>
       <link rel="stylesheet" media="screen" type="text/css" title="test" href="http://chevalierkasza.free.fralliance_ogame/elfen/site/css/test.css" />
</head>
<body background="fond.jpg" VLINK="#FF0000" LINK="#FF0000">
<h1 align="center"><img src="acceuil.jpg" alt="logo" /></h1>
<div id="menu"><Table name="tableau 1">
<tr><td width="15%">
	<table name="tableau1.1" border=3 bordercolor="#CC0000">
	<tr><td>	
		<tr><td align="center">
<a href="http://azteques.xooit.fr/index.php" target=_blank><b>Forum</b></a></td></tr>
		<tr><td align="center"><a href="banniere.html"><b>Bannière</b></a></td></tr>
		<tr><td align="center"><a href="rp.html"><b>Rôle Play</b></td></tr>
		<tr><td align="center"><a href="http://chevalierkasza.free.fr/alliance_ogame/ogspy/OGSpy3_05/index.php" target=_blank><b>Cartographie</b></a></td><tr>
		<tr><td align="center"><a href="stats.html"><b>Progression</b></a></td></tr>
		<tr><td align="center"><a href="mailto:aaaaaaaa@gmail.com"><b>Me contacter</b></td></tr>
		<tr><td align="center"><a href="http://mines.webinpact.com/index.php" target=_blank><b>Mines</b></a></td></tr>
		<tr><td align="center"><a href="http://www.ogame-winner.com/convertisseur-rc-rapports-combat.html" target=_blank><b>Convertisseur de RC</b></a></td></tr>
		<tr><td align="center"><a href="http://www.ogame-winner.com/convertisseur-re-rapports-espionnage.html" target=_blank><b>Convertisseur de RE</b></a></td></Tr>
		</td></tr>
 
</table></div>
<div id="corps">
</td><td width="33%"><img src="rp1.png" alt="début du rp de l'alliance"></td><td width="33%"><img src="rp2.png" alt="fin du rp de l'alliance"></td></tr>
</div>
</table>
</body>
 
</html>

et j'ai créé un fichier css nommé "test.css" avec ce code que tu m'a donné ( j'ai juste copier coller ton code sans rien d'autre dans notepad ).

et ça ne fonctionne pas malheureusement...
car je ne vois que le logo, le background et une image que j'ai appelé acceuil.jpg. j'ai du me tromper mais où ??? :oops:
voilà mon site : http://chevalierkasza.free.fr/allian...me/elfen/site/
sur le lien que j'ai envoyé le css n'est pas ds le bon chemin pour que tu puisses voir le résultat sans le bug et que tu vois ce menu que je veux rendre immobile :D

Bon je vais pas y aller par 4 chemins, va falloir revoir tout ça... :lol:

Voici ton code présenté autrement :

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
28
29
30
31
32
33
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
	<title>La Horde Elfen</title>
	<link rel="stylesheet" media="screen" type="text/css" title="test" href="http://chevalierkasza.free.fralliance_ogame/elfen/site/css/test.css" />
</head>
<body background="fond.jpg" VLINK="#FF0000" LINK="#FF0000">
	<h1 align="center"><img src="acceuil.jpg" alt="logo" /></h1>
	<h1 align="center"><img src="http://img3.xooimage.com/files/6/8/8/logotest2-a77ef6.png" /></h1>
	<div id="menu">
		<table name="tableau1">
			<tr><td width="15%">
				<table name="tableau1.1" border=3 bordercolor="#CC0000">
					<tr><td>
					<tr><td align="center"><a href="http://azteques.xooit.fr/index.php" target=_blank><b>Forum</b></a></td></tr>
					<tr><td align="center"><a href="banniere.html"><b>Bannière</b></a></td></tr>
					<tr><td align="center"><a href="rp.html"><b>Rôle Play</b></td></tr>
					<tr><td align="center"><a href="http://chevalierkasza.free.fr/alliance_ogame/ogspy/OGSpy3_05/index.php" target=_blank><b>Cartographie</b></a></td><tr>
					<tr><td align="center"><a href="stats.html"><b>Progression</b></a></td></tr>
					<tr><td align="center"><a href="mailto:aaaaaaaa@gmail.com"><b>Me contacter</b></td></tr>
					<tr><td align="center"><a href="http://mines.webinpact.com/index.php" target=_blank><b>Mines</b></a></td></tr>
					<tr><td align="center"><a href="http://www.ogame-winner.com/convertisseur-rc-rapports-combat.html" target=_blank><b>Convertisseur de RC</b></a></td></tr>
					<tr><td align="center"><a href="http://www.ogame-winner.com/convertisseur-re-rapports-espionnage.html" target=_blank><b>Convertisseur de RE</b></a></td></tr>
				</table>
			</td></tr>
	</div>
	<div id="corps">
			<table>
				<tr></tr><td width="33%"><img src="rp1.png" alt="début du rp de l'alliance"></td><td width="33%"><img src="rp2.png" alt="fin du rp de l'alliance"></td></tr>
			</table>
		</div>
	</body>
</html>

Le <title> doit être dans le <head>, les <h1> sont uniquement dans le <body>, tu as dû te tromper de chemin pour ton CSS et tu ne peux pas faire de tableaux imbriqués dans tous les sens comme ça (là j'ai pas trop cherché la signification de tes tableaux, j'ai juste corrigé quelques balises).
Après oblige toi à bien indenter ton code pour le rendre lisible.

08/02/2009, 20h21
Kuchiki Byakuya

merci je vais essayer :P son tuto jsuis en plein dedans xD
sinon pour les tableaux j'en ai fait plein car ne connaissant pas les css, je voulais essayer de faire une mise en page a peu pres correcte :D
bon jvais essayer de cleaner ça et je vais finir ce tuto^^