nicht angemeldet
position:relative;
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
-
Niemand - der sein css-wissen weitergeben möchte. :(
Nicht vom code abschrecken lassen, sind nur 4 zeilen.
Das problem muss doch lösbar sein?!Gruß Mathias
-
Hi Mathias,
Nicht vom code abschrecken lassen, sind nur 4 zeilen.
Vielleicht wäre es eine Idee, Deinen Code auf die relevanten Teile zu kürzen?
Viele Grüße
Mathias Bigge-
Vielleicht wäre es eine Idee, Deinen Code auf die relevanten Teile zu kürzen?
Naja - ich hatte eher gehofft, dass jememand der etwas von css versteht, sich den kompletten code kurz kopiert und mit einem html-editor (>Browser) mal kurz anschaut.
Wollte das prob damit anschaulicher machen, da es vielleicht nicht so verständlich beschrieben rüberkommt.
Darum auch die komplette htm-seite.Gruß Mathias
-
Hi,
Naja - ich hatte eher gehofft, dass jememand der etwas von css versteht, sich den kompletten code kurz kopiert und mit einem html-editor (>Browser) mal kurz anschaut.
tja, offensichtlich (bis jetzt) falsch gedacht. Einem Link auf eine Beispielseite wäre ich ja noch gefolgt...
freundliche Grüße
Ingo-
Hi Ingo,
Naja - ich hatte eher gehofft, dass jememand der etwas von css versteht, sich den kompletten code kurz kopiert und mit einem html-editor (>Browser) mal kurz anschaut.
tja, offensichtlich (bis jetzt) falsch gedacht. Einem Link auf eine Beispielseite wäre ich ja noch gefolgt...Sehe ich genauso, kein sauberer Code und die Frage nicht auf den Punkt gebracht.
Viele Grüße
Mathias Bigge
-
-
Hallo Mathias ,
Vielleicht wäre es eine Idee, Deinen Code auf die relevanten Teile zu kürzen?
Naja - ich hatte eher gehofft, dass jememand der etwas von css versteht, sich den kompletten code kurz kopiert und mit einem html-editor (>Browser) mal kurz anschaut.
Wollte das prob damit anschaulicher machen, da es vielleicht nicht so verständlich beschrieben rüberkommt.
Darum auch die komplette htm-seite.Na ja - bevor ich mir den Code genauer anschaue, ist zumindest Validität nötig - deshalb schicke Deine Datei bitte einmal durch diese Prüfung, korrigiere die Fehler, und melde Dich dann wieder hier in diesem Thread.
gruesse
rainer groth--
(--> einer der letzten bauhaeusler <--)
wer die FAQ nicht beachtet, bekommt von mir keine antwort - basta !
Self-Code: ie:{ fl:( br:> va:) ls:& fo:| rl:° n4:& ss:( de:] js:| ch:? mo:? zu:}
Self-Code-URL: http://emmanuel.dammerer.at/selfcode.html
-
-
-
-
Hallo,
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.So?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Menü</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
ul.submenu {width:140px; list-style-type:none; margin:0; padding:0;}
ul.submenu li {text-align:right; height:20px; background-color:#00AEAD;}
ul.submenu a,
ul.submenu a:link,
ul.submenu a:visited,
ul.submenu a:active,
ul.submenu a:focus {color:#000; text-decoration:none; display:block; width:100%;}
ul.submenu a:hover {background-color:#003031; color:#FFF;}
-->
</style>
</head>
<body>
<ul class="submenu">
<li><a href="#">SubMenu Link</a></li>
<li><a href="#">Bitte!</a></li>
</ul>
</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.
Nein. Die Eigenschaften position:absolute und position:relative sind _völlig_ unterschiedlich.
position:absolute
Die Werte der Eigenschaften left, right, top, bottom beziehen sich auf das umgebende Element, sind absolut zum umgebenden Element. Das ist das Element, innerhalb welchem das positionierte Element steht und welches selbst einen von position:static abweichenden Wert hat. Gibt es ein solches umgebendes Element nicht, dann ist der Anzeigebereich des Browserfensters das umgebende Element.position:relative
Die Werte der Eigenschaften left, right, top, bottom beziehen sich auf die static-Position des positionierten Elements selbst, sind relativ zur normalen Elementposition. Mit position:relative; top:10px; wird das Element also 10px tiefer dargestellt, als es sich aus dem normalen Elementfluss ergeben würde.http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning
http://www.w3.org/TR/CSS21/visuren.html#relative-positioning
viele Grüße
Axel