bulvuy
2010-08-04, 08:24:06
Hi zusammen, ich versuch momentan einen Hovereffekt zu erzeugen für eine Navigationsleiste. Die Leiste soll so aussehen, dass oben ein Bild und drunter der Text dazu steht. Den Block mit der Grafik und dem Hovereffekt habe ich fertig. Mein Problem ist, dass die Schrift immer oben steht. Ich weiss nicht wie ich sie am unteren Rand von dem Block positionieren kann. Fällt jemand hier dazu was ein? Hier der Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
#navigation {
position: absolute;
left: 0;
top: 0;
width: 125px;
background-color:red;
}
#navi1 {
float:left;
width: 125px;
padding: 0;
margin: 20px 0 0 10px;
color: #fff;
}
#navi1 a {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
border: 1px solid #fff;
width: 320px;
height: 320px;
color: #fff;
background: #257 url(grafics/buttonoff.png);
}
#navi1 a:hover {
color: #9ff;
background: #ccc url(grafics/buttonon.png);
}
</style>
</head>
<body>
<div id="menu">
<div id="navigation">
<div id="navi1">
<a href="#"><span style="vertical-align:bottom">Linktext unten</a>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
#navigation {
position: absolute;
left: 0;
top: 0;
width: 125px;
background-color:red;
}
#navi1 {
float:left;
width: 125px;
padding: 0;
margin: 20px 0 0 10px;
color: #fff;
}
#navi1 a {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
border: 1px solid #fff;
width: 320px;
height: 320px;
color: #fff;
background: #257 url(grafics/buttonoff.png);
}
#navi1 a:hover {
color: #9ff;
background: #ccc url(grafics/buttonon.png);
}
</style>
</head>
<body>
<div id="menu">
<div id="navigation">
<div id="navi1">
<a href="#"><span style="vertical-align:bottom">Linktext unten</a>
</div>
</div>
</div>
</body>
</html>