nicht angemeldet
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