nicht angemeldet
z-index bei position:static
Hola,
+---------+
| BLA |
+--+ +----------------------------+
| |
| <h3><span>BLA</span></h3> |
| <div class="part">.....</div> |
| |
+-----------------------------------------+
So etwas hätte ich gerne. Und habe ich auch bekommen. Nur
hat mir jetzt ein kleines Workaround für einen dummen IE-Bug das
Ganze im IE vermasselt.
Also, wie bereits der Inhalt der Box zeigt, haben wir hier eine
kleine Überschrift (dass das <span> im <h3> ist ist eigentlich
irrelevant), und darunter eine Box. Alles schön mir rähmelchen,
h3 ist ein inlineelement (display:inline). Das <div> mittels
negativem margin nach oben gezogen, sodass gerade der obere Rahmen
des <div>'s vom <h3> überdeckt wird (das hat keinen rahmen unten),
und schon sieht es aus, als ob das ein zusammenhängendes Achteck
sei.
Nun habe ich in dem <div> jetzt ein <ul>, in dem wiederum mehrere
<li>'s stecken, wo sich <a>'s drin befinden. Und wenn man über diese
formatierten <a>'s hovert, dann spielt(e) der IE ein bisschen ver-
rückt (rahmen verschwinden, usw. [Quirksmode, btw]). Das habe ich
jetzt mit einem kleinen Bug-Beheben, "line-height: 100%;" auf die
<div> beheben können, doch jetzt ist plötzlich die box oberhalb des
<h3>'s, das heißt, dass nicht mehr die <h3> die <div> abdeckt und
somit das ganze so erscheinen lässt, dass es zusammenhängend sei,
sondern das <div> die <h3> abdeckt und das ganze somit sinnlos ist.
z-index funktioniert ja seltsamerweise bei position:static nicht,
entsprechend habe ich keine Idee, wie ich das <h3> wieder dazu bringen
könnte, das <div> abzudecken. Auch das ganze mittels position:relative
brachte mich zu keinem ergebnis; z-index funktioniert anscheinend
leider nur ivbm. position:absolute.
Opera7 und Mozilla stellen das ganze übrigens richtig dar.
CSS:
h3 {
...
margin: 0 0 0 1.8em;
padding: 2pt 4pt 0 4pt;
border-top: 1px solid #C7C7C7;
border-right: 1px solid #C7C7C7;
border-left: 1px solid #C7C7C7;
display: inline;
font-size: 1em;
}
h3 span {
font: bold 8pt Tahoma,Arial,sans-serif;
}
div.part {
...
border: 1px solid #C7C7C7;
margin: -2px 0.5em 1.2em 1em;
padding: 2pt 4pt 3pt 4pt;
font: 8pt Tahoma;
line-height: 100%;
}
div.part ul {
margin: 0;
padding: 0;
list-style-type: none;
line-height: 11pt;
}
div.part a:link, div.part a:visited {
text-decoration: none;
color: #606060;
}
div.part a:hover {
text-decoration: underline;
color: #7878F8;
}
div.part a:active, div.part a:focus {
text-decoration: underline;
color: #0000FF;
}
Was kann ich machen, damit das <h3> über dem <div> steht?
Vielen Dank schon mal für's antworten,
derSven
-
z-index funktioniert ja seltsamerweise bei position:static nicht,
Was absolut normal ist, denn 'static' ist beduetet nichts anderes als den Normalen Elementenfluß. (sprich als ob du keine position:static verwendet hättest, es ist der Defaultwert.)
Und wenn die Boxen nacheinander normal dargestellt werden, braucht man keinen z-index, bzw. dieser ist immer ident mit dem z-index der umgebenden Box.Grüße
ThomasPS: bei solchen Fragen ist immer gut, wenn du die / eine Beispielseite verlinkst, wo man das Problem sehen kann.
-
Hallo Thomas,
z-index funktioniert ja seltsamerweise bei position:static nicht,
Was absolut normal ist, denn 'static' ist beduetet nichts anderes als den Normalen Elementenfluß. (sprich als ob du keine position:static verwendet hättest, es ist der Defaultwert.)ja, es ist normal - aber ich finde es nicht gut.
Und wenn die Boxen nacheinander normal dargestellt werden, braucht man keinen z-index, bzw. dieser ist immer ident mit dem z-index der umgebenden Box.
doch, z-index wäre auch bei position:static gar nicht schlecht. Denn man kann Boxen ja mittels negativem margin und so einem Zeugs dazu bewegen, sich zu überlappen. Und wenn man dann mal eine Box ganz oben im Quelltext dazu bewegen will, die ganz unten im Quelltext zu überdecken, hat man ohne z-index ein Problem.
PS: bei solchen Fragen ist immer gut, wenn du die / eine Beispielseite verlinkst, wo man das Problem sehen kann.
hm hm hm - ja. wäre in diesem Fall sogar auch wenig problematisch im Vergleich zu anderen Seiten, die sonst mache (die sind nämlich immer soooo serverseitig dynamisch ;).
Problem ist, dass es sich um minimale Pixels handelt (eigentlich hasse ich pixelgenaues irgendwas) - das es irgendwie nicht so anschaulich wird.
(5 Stunden später...)
soooo.... jetzt hab ich es fertig:
http://sveni.dnsalias.net/forum/z-index-problem/
bzw. http://sveni.dnsalias.net/forum/z-index-problem/frame.htm.Alles unnötige (bilder, scripts) ist weg, man sieht die Seite in Rohform. Während Mozilla und Opera7 diese scheinbar 2 Boxen entsprechend darstellen, zeigt der IE, wie es nicht aussehen sollte.
alles weitere siehe [pref:t=83321&m=486825]
Gruß,
derSven
-
Hallo,
z-index funktioniert ja seltsamerweise bei position:static nicht,
Was absolut normal ist, denn 'static' ist beduetet nichts anderes als den Normalen Elementenfluß. (sprich als ob du keine position:static verwendet hättest, es ist der Defaultwert.)ja, es ist normal - aber ich finde es nicht gut.
Sorry for you, aber damit muss du leben.
doch, z-index wäre auch bei position:static gar nicht schlecht. Denn man kann Boxen ja mittels negativem margin und so einem Zeugs dazu bewegen, sich zu überlappen. Und wenn man dann mal eine Box ganz oben im Quelltext dazu bewegen will, die ganz unten im Quelltext zu überdecken, hat man ohne z-index ein Problem.
Dazu gibt es position:relativ bzw. position:absolute.
hm hm hm - ja. wäre in diesem Fall sogar auch wenig problematisch im Vergleich zu anderen Seiten, die sonst mache (die sind nämlich immer soooo serverseitig dynamisch ;).
Die Browser bekommen trotzdem nur HTML und nicht die "Dynamik". ;-)
Problem ist, dass es sich um minimale Pixels handelt (eigentlich hasse ich pixelgenaues irgendwas) - das es irgendwie nicht so anschaulich wird.
Das Verhalten der IE beim a:hover ist wirklich seltsam ich konnte das jetzt so auf die schnelle auch nicht herausfinden woran es genau liegt.
Aber ich sehe das nicht so tragisch wie es jetzt ist:
<img src="http://www.meta-text.net/etc/svens.gif" border="0" alt="">Übrigens für div.part reicht ein margin: -1px 0.5em 1.2em 1em; (das ändert im IE zwar auch ncihts, aber dasfür ist die Darstellung im Mozilla und Opera besser (der Rahmen vom h3 ragte noch 1px ins div hinein.
Grüße
Thomas
-
-