nicht angemeldet
Guten Tag,
ich schlage mich schon seit stunden mit einem css-problem herum u. hoffe nun, dass Ihr mir weiterhelfen könnt.
Folgendes problem:
Ich möchte gerne ein submenue auf der linken seite meiner hp erstellen. (mehrere links untereinander)
Die einzelnen links sollten beim hover-effekt nach links (in spaltenbreite!) farblich unterlegt werden.
Um es einfacher zu machen, hätte ich gerne die sich ändernden links in einer tabelle mit gleicher classe definert.
Bsp.HTM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<meta name="author" content="Mathias">
<meta name="generator" content="HTML Studio">
<style type="text/css">
<!--
.subLinkrel1 {
position:relative;
width:120px;
height:20px;
border-top-width:1px;
border-top-color:#C1C1C1;
border-top-style:solid;
padding-top:3px;
padding-left:0px;
padding-right:0px;
padding-bottom:3px;
color: #000000;
font-family:arial;
font-weight:bold;
font-size:10px;
text-decoration:none;
letter-spacing:1px;
}
.subLinkrel1:Hover {
position:relative;
width:120px;
height:20px;
background-color:#C1C1C1;
border-top-width:1px;
border-top-color:#C1C1C1;
border-top-style:solid;
padding-top:3px;
padding-left:0px;
padding-right:0px;
padding-bottom:3px;
color: #ffffff;
font-family:arial;
font-weight:bold;
font-size:10px;
text-decoration:none;
letter-spacing:1px;
}
.subLinkabs1 {
position:absolute;
width:140px;
height: 18px;
left:0px;
border-top-width:1px;
border-top-color:#000000;
border-top-style:solid;
padding-top:3px;
padding-left:0px;
padding-right:0px;
padding-bottom:1px;
color:#000000;
font-family:arial;
font-weight:bold;
font-size:10px;
text-decoration:none;
letter-spacing:1px;
}
.subLinkabs1:Hover {
position:absolute;
width:140px;
height:18px;
left:0px;
background-color:#000000;
border-top-width:1px;
border-top-color:#000000;
border-top-style:solid;
padding-top:3px;
padding-left:0px;
padding-right:0px;
padding-bottom:1px;
color: #ffffff;
font-family:arial;
font-weight:bold;
font-size:10px;
text-decoration:none;
letter-spacing:1px;
}
.subLinkabs2 {
position:absolute;
width:140px;
height: 18px;
top:20px;
left:0px;
border-top-width:1px;
border-top-color:#000000;
border-top-style:solid;
padding-top:3px;
padding-left:0px;
padding-right:0px;
padding-bottom:1px;
color:#000000;
font-family:arial;
font-weight:bold;
font-size:10px;
text-decoration:none;
letter-spacing:1px;
}
.subLinkabs2:Hover {
position:absolute;
width:140px;
height:18px;
top:20px
left:0px;
background-color:#000000;
border-top-width:1px;
border-top-color:#000000;
border-top-style:solid;
padding-top:3px;
padding-left:0px;
padding-right:0px;
padding-bottom:1px;
color: #ffffff;
font-family:arial;
font-weight:bold;
font-size:10px;
text-decoration:none;
letter-spacing:1px;
}
#div { background-color:#C1C1C1; }
-->
</style>
</head>
<body>
<div style="position:absolute; left:0px; top:120px; width:140px;" align="right">
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td height="20" width="140" align="right">
<a href="about:blank" class="subLinkrel1" target="_self"> SubMenue relative</a>
</td>
</tr>
<tr>
<td height="20" width="140" align="right">
<a href="about:blank" class="subLinkrel1" target="_self"> Danke ;)</a>
</td>
</tr>
</table>
</div>
<div id="div" style="position:absolute; left:0px; top:200px; width:140px; height:40px;" align="right">
<a href="about:blank" target="main" class="subLinkabs1"> SubMenue absolute</a>
<a href="about:blank" target="main" class="subLinkabs2"> Danke ;)</a>
</div>
</body>
</html>
Beim position:absolute; funktioniert es ja - aber leider bekomme ich es mit *relative; nicht hin. Obwohl sich hier doch nur das elternelement (tabelle) ändert.
Da sich das submenue ständig ändert (Linkanzahl) und einige links erhalten bleiben sollen, wäre es für mich einfacher, wenn ich nur eine classe definieren müsste und diese den links in einer tabelle zuordnen könnte.
Bei position:absolute; müsste ich ja jedesmal die position neu definieren.
Gruss Mathias