[CSS] Pb d'alignement

Version imprimable

Bonjour,

Voilà ma page de test :

Code:

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:

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 ?

27/06/2006, 17h19
gerald2545

tu as une page web de démo à laquelle on peut accéder STP?
27/06/2006, 17h25
Tdeny

<div id="#lien">
27/06/2006, 17h25
Badaboumpanpan

Test
27/06/2006, 17h29
Badaboumpanpan

Citation:

Envoyé par Tdeny

<div id="#lien">

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

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:

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:

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>

27/06/2006, 18h04
gerald2545

+1
27/06/2006, 19h03
Badaboumpanpan

Citation:

Envoyé par masu

je ne connais pas le selecteur :current, j'ai suposé qu'il s'agissait d'un id qui te servirai plus tard.

Yep, le a:current est un aide mémoire pour plus tard. ;)

Ok. Je vais tester tout ça !!
27/06/2006, 19h26
Badaboumpanpan

Nickel !! Merci !!!