faire un menu vertical avec des liens

**Kuchiki Byakuya** · 07/02/2009, 19h13

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 :

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

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>

**Lenezir** · 07/02/2009, 19h47

Salut.

Alors ça se fait par CSS ça.
Sur le div de ton menu, mets lui une classe CSS contenant "position : fixed;"

**Kuchiki Byakuya** · 08/02/2009, 12h18

ba alors va faloir que je me mette au css car je n'y connais rien

tu pourrais me montrer un exemple de code que je pourrai appliquer pour ça hjistoire que ce soit fait le temps que j'apprenne

comme ça ça me fera un exemple

**Lenezir** · 08/02/2009, 12h24

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 :

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
<html>
	<head>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	</head>
	<body>
		<div id="menu">
		<!-- Ton menu -->
		</div>
		<div id="corps">
		<!-- Le corps de ton site (la page principale quoi) -->
		</div>
		</div id="footer">
		<!-- Le pied de ton site -->
		</div>
	</body>
</html>

Après ça tu te crée un fichier style.css et dedans tu mets :

Code :

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

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.

**Kuchiki Byakuya** · 08/02/2009, 13h08

grand merci !!! une dernière petite question, pour apprendre le css, une connaissance basique du javascript suffit ou pas ?

**Lenezir** · 08/02/2009, 13h10

Tu n'as pas du tout besoin du JavaScript pour apprendre le CSS.

**Kuchiki Byakuya** · 08/02/2009, 13h17

super parce que ma connaissance du java script est un peu basique

ba grand merci, problème résolu !!!

**Lenezir** · 08/02/2009, 13h19

Bon courage.

**Kuchiki Byakuya** · 08/02/2009, 19h59

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

Code :

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 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ù ???

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

**Lenezir** · 08/02/2009, 20h10

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

Voici ton code présenté autrement :

Code :

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
<!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.

**Kuchiki Byakuya** · 08/02/2009, 20h21

merci je vais essayer

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

bon jvais essayer de cleaner ça et je vais finir ce tuto^^

faire un menu vertical avec des liens [HTML 5]

HTML

Discussions similaires

Partager

Partager