Menü - div legt sich auf zwei andere divs drauf
Firefox
- css
0 0x7F8000000 Firefox0 bleicher
Moin,
Neues Menü, neues Problem..
Das Problem welches ich habe ist das sich das div mit der id "nächstesthema" auf die beiden divs "navbox1" und "navbox2" drauf legt obwohl es unter ihnen erscheinen sollte.
Dieser Fehler wird mir im Firefox 3.0.1 angezeigt.
Im IE7 wird jedoch alles so angezeigt wie es sein sollte.
Ich bitte um Hilfe da ich selbst zu keiner Lösung komme..
Grüße
Firefox
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
background-color: #e4e4e4;
font-family: Verdana;
font-size: 12px;
color: #00012F;
width: 771px;
margin: 10px;
padding: 10px;
border: 1px solid;
}
a.letztesthema {
display: block;
width: 130px;
font-size: 10px;
color: #e4e4e4;
font-family: Verdana;
text-decoration: none;
padding: 2px;
border: 3px solid;
text-decoration: blink;
}
a.letztesthema:hover {
text-decoration: none;
}
#letztesthema {
display: block;
width: 140px;
text-align: center;
position:relative;
margin: 0px auto;
border: 1px;
border-color: #00012F;
border-style: ridge;
background-color: #CC0500;
}
#letztesthema:hover {
}
a.navlink1 {
display: block;
width: 130px;
font-size: 10px;
color: #e4e4e4;
font-family: Verdana;
text-decoration: none;
padding: 2px;
border: 3px solid;
text-decoration: blink;
}
a.navlink1:hover {
text-decoration: none;
}
a.navlink2 {
display: block;
width: 130px;
font-size: 10px;
color: #e4e4e4;
font-family: Verdana;
text-decoration: none;
padding: 2px;
border: 3px solid;
text-decoration: blink;
}
a.navlink2:hover {
text-decoration: none;
}
#container {
position: relative;
margin: 0px auto;
width: 285px;
}
#navbox1 {
display: block;
float: right;
width: 140px;
text-align: center;
position:relative;
margin: 0px auto;
border: 1px;
border-color: #00012F;
border-style: ridge;
background-color: #CC0500;
}
#navbox1:hover {
text-align: right;
}
#navbox2 {
display: block;
float: right;
width: 140px;
text-align: center;
position:relative;
margin: 0px auto;
border: 1px;
border-color: #00012F;
border-style: ridge;
background-color: #CC0500;
}
#navbox2:hover {
text-align: right;
}
a.nächstesthema {
display: block;
width: 130px;
font-size: 10px;
color: #e4e4e4;
font-family: Verdana;
text-decoration: none;
padding: 2px;
border: 3px solid;
text-decoration: blink;
}
a.nächstesthema:hover {
text-decoration: none;
}
#nächstesthema {
display: block;
width: 140px;
text-align: center;
position:relative;
margin: 0px auto;
border: 1px;
border-color: #00012F;
border-style: ridge;
background-color: #CC0500;
}
#nächstesthema:hover {
}
-->
</style></head>
<body>
<div id="letztesthema">
<a class="letztesthema" href="" target="_self">Letztes Thema</a>
</div>
<div id="container">
<div id="navbox1">
<a class="navlink1" href="" target="_self">>> Weiter >></a></div>
<div id="navbox2">
<a class="navlink2" href="" target="_self"><< Zurück <<</a></div>
</div>
<div id="nächstesthema">
<a class="nächstesthema" href="" target="_self">Nächstes Thema</a>
</div>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
</body>
</html>
Hi.
Also, ich hab jetzt vergeblich nach der Eigenschaft "z-index" in deinem CSS gesucht, wie wird denn geregelt, was bei überlappungen passieren soll?
greetz. 0x7F800000
Hi.
Also, ich hab jetzt vergeblich nach der Eigenschaft "z-index" in deinem CSS gesucht, wie wird denn geregelt, was bei überlappungen passieren soll?
greetz. 0x7F800000
Moin,
Ähm.. ich habe mit dem div "nächstesthema" eine neue Zeile gemacht, daher sollte dieses div eigentlich auch unter den divs "navbox1" und "navbox2" erscheinen oder versteh ich da noch irgendetwas falsch?
Mit z-index arbeitet man doch wenn man etwas absichtlich überlappen will oder irre ich mich?
Grüße
Firefox
Grüße,
2)War es wirklich nötig den ganzen CSS zu posten? Ich stütze mich mal auf die Aussage des Firefox, da ich null lust habe mich durch die Jungel deines codes zu schlachten.
Ähm.. ich habe mit dem div "nächstesthema" eine neue Zeile gemacht, daher sollte dieses div eigentlich auch unter den divs "navbox1" und "navbox2" erscheinen oder versteh ich da noch irgendetwas falsch?
Fall sich dich nicht missverstehe -
ist es eben andersrum - "by default" erscheint der div, der in der Codezeilenordnung weiter unten liegt ÜBER denen, die ihm vorausgehen.
also Notation der Form
<div 1>
<div 3>
<div 2>
würde bedeuten, dass 1 ganz unten liegt, drüber 3, ganz oben 2.
Willst du es ändern - muss z-index her, der hat aber eigene Tücken - sodaß ich eine simple umstellung der Divrheinfolge im COde empfehle..
MFG
bleicher
ist es eben andersrum - "by default" erscheint der div, der in der Codezeilenordnung weiter unten liegt ÜBER denen, die ihm vorausgehen.
tatsächlich! hab mir das gar nicht so genau angeschaut, schließlich hat Firefox ja angegeben, es würde in anderen Browsern erwartungsgemäß funktionieren... Dann muss es aber heissen dass IE7 sich äußerst merkwürdig verhält?
@Bleicher
Da du mich eben vollkommen verwirrt und mein Verständnis von divs zerstört hast schlafe ich besser mal eine Nacht darüber und sehe mir das morgen nochmal an.
Ich hege jedoch die Vermutung das sich mir die Logik auch morgen noch nicht erschließen wird.. aber die Hoffnung stirbt ja bekanntllich zuletzt ^^
Ich danke erstmal für die kompetenten Antworten
gn8
Firefox
Grüße,
Ich hege jedoch die Vermutung das sich mir die Logik auch morgen noch nicht erschließen wird.. aber die Hoffnung stirbt ja bekanntllich zuletzt ^^
das ist gaaanz einfach - wie mit spielkarten - was zuerst deklariert wird - wird auf den tisch gelegt, was danach deklariert wird - wird drauf gelegt.
von ganz hinten nach vorne ist die rheinfolge :) auch magazinprinzip genannt "first-in-last-out"
MFG
bleicher