nicht angemeldet
Hallo Catwoman,
da habe ich genau das Richtige für Dich: XHTML - nur mit CSS realisiert.
Hier der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>Info-Navigation</title>
<style type="text/css">
a {
display:block;
text-decoration: none;
background-color: white;
color:#cc0000;
font-family:"courier new", "sans serif";
font-weight:bold;
width:auto;
height:16px;
font-size:14px;
border:1px solid white;
padding:5px;
}
div#navi {
width:125px;
border: 1px solid red;
}
div#navi a {
position: relative;
}
div#navi a:hover {
border:1px solid black;
}
div#navi a span {
display:none;
padding:5px;
width:100px;
background-color:white;
color: black;
border:1px solid #223344;
}
div#navi a:hover span {
display:block; /* damit die Info angezeigt wird */
position:absolute; /* Positionierung der Info */
left:135px;
top:0px;
}
</style>
</head>
<body>
<div id="navi">
<a href="#">Seite 1<span>Beschreibung von Link 1</span></a>
<a href="#">Seite 2<span>Beschreibung von Link 2</span></a>
<a href="#">Seite 3<span>Beschreibung von Link 3</span></a>
<a href="#">Seite 4<span>Beschreibung von Link 4</span></a>
<a href="#">Seite 5<span>Beschreibung von Link 5</span></a>
</div>
</body>
</html>
Liebe Grüsse
Alix
Gunnar Bittersmann