[bacarni]

Hallo,
ich habe vor Wochen im Web mal eine schöne Tabelle (?) gesehen. Das besondere war die "Überschrift". Sie war in einem rechteckigen Kasten auf der oberen Tabellenlinie. Leider war ich nicht schlau genug, mir die Seite zu merken. Und jetzt wollte ich es mir auch so basteln. Leider fehlen mir die Anhaltspunkte. Keinen Plan!

Zum besseren Verständnis habe ich mal ein Bild angehängt.

Lol... Seht ihr die Tabelle, wo mein Anhang drin ist? Genau so soll es aussehen.

[Ben]

Du meinst ein fieldset mit legend?

robo47 hatte diesbzgl. auch mal einen Thread eröffnet
http://forum.developers-guide.net/showthread.php?t=402

Sofern ich dich richtig verstanden habe.

Grüße, Ben.

[Lars]

<h1 style="z-index: 0;">
    Überschrift
</h1>

<div style="margin-top: -10px;
            z-index:    1;">
    Inhalt
</div>

Prinzip dürfte klar sein. Der Container wird einfach ein paar Pixel nach oben geschoben und "verschwimmt" dadurch mit der Überschrift. Damit die Überschrift "über" dem Container, also auf der oberen Ebene liegt, wird ihr z-index auf 0 gesetzt (0 = erste Ebene, 1 = zweite Ebene, usw.).

Kann allerdings sein, dass der z-index von unten nach oben gezählt wird. 0 wäre dann die unterste Ebene. Einfach ausprobieren

[$traight-$hoota]

Zitat von Lars

Kann allerdings sein, dass der z-index von unten nach oben gezählt wird. 0 wäre dann die unterste Ebene. Einfach ausprobieren

je höher der z-index, desto höher die shicht, auf der ein element angezeigt wird...

ich würde es so machen...

<div style="border: 1px solid black; margin-bottom: -.5em; margin-left: 1em; float: left; background-color: #FFF;">Überschrift</div>
<div style="border: 1px solid black; clear: left; padding-top: 1em;">Lorem ipsum dolor...</div>

[Artemis]

@$traight-$hoota,
das ist dann nur kein semantisches HTML mehr.

@Lars,
deine z-indexe sind vertauscht. Außerdem ist es für die Darstellung am besten, wenn man dem margin-top einen relativen Wert zuweist. Am besten die Hälfte der font-size von der Überschrift.
Zusätzlich benötigt die Überschrift eine Hintergrundfarbe, da sonst der Rahmen der Tabelle durchscheint.

<h1 style="margin-bottom:0px; font-size:2em; border:1px solid #000; display:inline; background:#fff; margin-left:2em;">&Uuml;berschrift</h1>
<table style="border:1px solid #000; width:100%; height:100px; margin-top:-1em;">
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>

[bacarni]

Vielen Dank!

Jetzt hab ich genau das was ich wollte. Perfekt!

[Lars]

deine z-indexe sind vertauscht.

Hab ja gesagt, dass das durchaus sein kann

Generell sollte mein Code nur das Prinzip zeigen, wie man das dann genau löst, ist ja schnuppe.

[$traight-$hoota]

Zitat von Artemis

@$traight-$hoota,
das ist dann nur kein semantisches HTML mehr.

joa natürlich. das war ja jetzt nur so zum prinzip zeigen
natürlich sollte man ne überschrift und meinetwegen ne tabelle oder sonst was nehmen...

[JumperII]

Zitat von Artemis

@$traight-$hoota,
das ist dann nur kein semantisches HTML mehr.

Was hat Darstellungseigenschaften mit Semantik zu tun?

Gruß, Jumper, the II.

[Waq]

Zu semantischem HMTL gehört, dass nicht-semantische Dinge wie Darstellungseigenschaften woanders stehen, also dass CSS vorher definiert wird und nicht inline.

[JumperII]

semantisches HTML heißt für mich, dass die korrekten, auf den Inhalt abgestimmten Tags verwendet werden. Dass die Darstellung per CSS innerhalb der Tags statt einer ausgelagerten CSS erfolgt/e, kann für die vorliegende Erklärung einfacher sein, ist aber nicht schön. Ein Verstoß gegen die Semantik ist es aber, wenn ich statt css z.b. ein h2-Tag einbinde, um eine Schriftgröße oder -formatierung zu erhalten, obwohl keine Überschrift 2. Grades der Inhalt ist.

Gruß,
Jumper, the II.

[Waq]

Nunja.
Mit Inline-CSS kann HTML noch semantisch korrekt sein, aber nicht mehr rein semantisch.
Was "semantisches HTML" genau ist bedarf wohl einer genaueren Definition *g*

[JumperII]

Naja, wenn es danach geht, hat es W3C es bis jetzt nicht geschafft, ein reines semantisches HTML oder XHTML zu schaffen ...

Gruß,
Jumper, the II.