[CSS] Pb d'alignement

**Badaboumpanpan** · 27/06/2006, 17h04

Bonjour,

Voilà ma page de test :

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
<html>
<head>
<style type="text/css">
	a:link { color:#5A7CBA ; text-decoration:none ; }
	a:visited { color:#5A7CBA ; text-decoration:none ; }
	a:current { color:#999999 ; text-decoration:none ; }
	a:hover { color:#333333 ; text-decoration:none ; }
</style>
<link rel="stylesheet" type="text/css" href="script/test.css">
</head>
<body>
<div id=menu><div id=top>
<div id=lien>
	<a href="test.html">TEST1</a>
	<a href="test.html">TEST2</a>
	<a href="test.html">TEST3</a>
	<a href="test.html">TEST4</a>
	<a href="test.html">TEST5</a>
</div>
</div></div>
</html>
</body>

Et ma feuille de style :

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
#menu {
	position: absolute;
	width: 650px;
	height: 50px;
	left: 50%; 
	margin-left: -320px;
	text-align: center;
	background-image: url(../images/image-bot.png);
	background-repeat: no-repeat;
	background-position: bottom;
	}
 
#menu #top {
	width : 650px;
	background-image : url(../images/image-top.png);
	background-repeat: no-repeat;
	background-position: top;
	}
 
#menu #top #lien {
	width: 600px;
	font-family: Tahoma;
	font-size: 10pt;
	text-align: center;
	vertical-align: bottom;
	}

Mais mes liens restent en haut... Pas moyen de les aligner en bas...

Quelqu'un aurait-il un tuyau ?

**gerald2545** · 27/06/2006, 17h19

tu as une page web de démo à laquelle on peut accéder STP?

**Tdeny** · 27/06/2006, 17h25

**Badaboumpanpan** · 27/06/2006, 17h29

Envoyé par Tdeny

Ca annihile les modifs de la feuille de style...

**masu** · 27/06/2006, 17h57

je ne connais pas le selecteur :current, j'ai suposé qu'il s'agissait d'un id qui te servirai plus tard.
si tu ne veu pas que tes liens soit dans le haut du menu, il faut peut-etre les enlever du div#top dans ton html.
ensuite j'ai utilise position plutot que vertical-align.

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
a:link, a:visited { color:#5A7CBA ; text-decoration:none ; }
a#current { color:#999999 ; text-decoration:none ; }
a:hover, a:active { color:#333333 ; text-decoration:none ; }
	
#menu {
	position: absolute;
	width: 650px;
	height: 50px;
	left: 50%; 
	margin-left: -320px;
	text-align: center;
	background-image: url(../images/image-bot.png);
	background-repeat: no-repeat;
	background-position: bottom;
}

#menu #top {
	background-image : url(../images/image-top.png);
	background-repeat: no-repeat;
	background-position: top;
}

#menu #lien {
	width:650px;
	font-family: Tahoma;
	font-size: 10pt;
	text-align: center;
	position:absolute;
	bottom:0px;
}

Code :

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

1
2
3
4
5
6
7
8
9
<div id="menu">
<div id="top">&nbsp;</div>
<div id="lien">
	<a href="test.html">TEST1</a>
	<a href="test.html">TEST2</a>
	<a href="test.html">TEST3</a>
	<a href="test.html">TEST4</a>
	<a href="test.html">TEST5</a>
</div>