Überschrift soll über dem Rahmen liegen
0 0 
Marian
Überschrift soll über dem Rahmen liegen
Hallöchen,
folgende Sache: zu sehen ist eine Überschrift h2 sowie ein paar Eingabefelder eines Formulars. Das alles wird von einem Rahmen umgrenzt. Nun soll die Überschrift aber nicht innerhalb des Rahmens liegen, sondern oben über der Linie.
Meine Überlegung war nun zunächst folgende:
<div style="border:1px solid #000; padding:10px; width:500px; heigth:300px; margin-left:auto; margin-right:auto; margin-top:50px;">
<h2 style="margin-top:-20px; width:200px; background-color:#fff;">Überschrift</h2>
</div>
Das Problem ist aber, das der IE die Überschrift in diesem Simpelbeispiel (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">) zwar nach oben schiebt, aber nicht über die Linie sondern untendrunter und dann den oberen Teil abschneidet, während er in der etwas komplizierteren eigentlichen Seite seltsamerweise gar nichts verschiebt.
Beides ist nicht toll, mal abgesehen davon, dass die Überschrift ja auch noch weiß hinterlegt werden und eine Breite zugewiesen bekommen muss, damit man nicht die Linie dahinter durchsieht und gleichzeitig aber nicht die gesamte Breite weiß hinterlegt wird. Das empfinde ich persönlich auch als etwas unsaubere Trickserei.
Hat jemand eine Idee für mich, wie man das Gewünschte umsetzen kann, oder geht das einfach nicht?
Gruß,
Conny
-
hy conny
weise deinem DIV-tag einmal einen Z-Index zu, damit kannst du die Ebene bestimmen. Je höher dieser Index ist, desto mehr ebene kannst du überlagern.
z.B.: <div z-index="4">blablablab</div> => damit kannst du 3 DIV-Ebenen überlagern.Das nächste was ich dir empfehlen würde ist, dass du sämtliche Styleattribute in ein CSS verpackst und extern abspeicherst.
Hilfreich sollten da klar definierte Klassen sein.Außerdem fehlen bei deinen Farbcodes jeweils 3 Stellen.
Weiß ist #ffffff und schwarz #ooooooHoffe ich konnte dir helfen, ich würde es zumindest einmal so probieren.
P.S.: IE ist manchmal wirklich hundsgemein, hab ein nämlich ein Problem mit Zellengrößen. Vielleicht hast du einen Lösungsvorschlag
Problem-
Hi!
Außerdem fehlen bei deinen Farbcodes jeweils 3 Stellen.
Weiß ist #ffffff und schwarz #ooooooDreistellige Farbwerte sind meines Wissens zulässig. Der W3 CSS-Validator meckert auch nicht.
Allerdings gibt es keine Eigenschaft namens "heigth"... das heißt "height".
mfG
--
sh:( fo:§ ch:{ rl:? br:> n4:# ie:} mo:? va:) de:µ zu:| fl:( ss:{ ls:~ js:)
"And all those exclamation marks, you notice? Five? A sure sign of someone who wears his underpants on his head."
(Terry Pratchett) -
Hallo,
Außerdem fehlen bei deinen Farbcodes jeweils 3 Stellen.
Weiß ist #ffffff und schwarz #ooooooNein. Die Kurzschreibweise #fff für #ffffff ist völlig korrekt. (siehe auch http://de.selfhtml.org/css/formate/wertzuweisung.htm#farben)
Gruss,
OhneName -
Hallo Chris,
weise deinem DIV-tag einmal einen Z-Index zu, damit kannst du die Ebene bestimmen.
Das hatte ich schon versucht - funktioniert nicht.
Das nächste was ich dir empfehlen würde ist, dass du sämtliche Styleattribute in ein CSS verpackst und extern abspeicherst.
Hilfreich sollten da klar definierte Klassen sein.Das ist eh der Fall. Die eigentliche Seite ist ja viel komplizierter - zentriert in der Mitte des Browserfensters, oben ein Bereich, ein Inhaltsbereich, daneben ein Menü und tonnenweise Spielereien. Ich wollte nur nicht den gesamten Quellcode anbieten (Den sich dann ja eh keiner durchliest :-)), sondern lediglich die Stelle mit dem Problem herauspicken, weswegen ich die vereinfachte Version hintippte. (Die dann das Problem mit dem Abschneiden aufwirft, was ich eigentlich auch erwartet hatte, weil mir das schon mal begegnete.)
Außerdem fehlen bei deinen Farbcodes jeweils 3 Stellen.
Weiß ist #ffffff und schwarz #ooooooDas ist nicht ganz richtig: die ersten beiden Stellen stehen ja für die rot-Töne, die nächsten beiden benennen die Werte für grün, die letzen beiden stehen für den Blauanteil einer Farbzusammensetzung. Wenn die einzelnen Paare nun jeweils aus der gleichen Ziffer bestehen, kannst du sie auch nur einmal notieren und sie wird vom Browser aber doppelt ausgelesen. #bb2200 kannst du also auch als #b20 schreiben.
Hoffe ich konnte dir helfen,
Leider nicht, aber danke für den Versuch. :-)
P.S.: IE ist manchmal wirklich hundsgemein, hab ein nämlich ein Problem mit Zellengrößen. Vielleicht hast du einen Lösungsvorschlag
ProblemIch habe momentan leider weder Zeit noch Kraft (Ich bin tierisch erkältet.), mich in einen anderen Webauftritt einzuarbeiten, aber eine Sache, an der es auch schon hängen könnte, fiel mir spontan auf: du hast im Head-Bereich ein = vergessen, und zwar: <meta name="description" content" statt content="
Ansonsten würde ich dir dringend raten, die Tabellenform aufzulösen und mit Ebenen zu arbeiten. Das ist für den Anfang zwar evtl. etwas anstrengender, aber du wirst im Laufe der Zeit den schlankeren Quelltext lieben. Insbesondere, wenn du öfter mal Dinge austauschen musst.
Gruß,
Conny -
Hi,
Außerdem fehlen bei deinen Farbcodes jeweils 3 Stellen.
Weiß ist #ffffff und schwarz #ooooooquark. Und #ooo gibts nicht, höchstens #000
Gruesse, Joachim
--
Am Ende wird alles gut.
-
-
Hallo Conny,
folgende Sache: zu sehen ist eine Überschrift h2 sowie ein paar Eingabefelder eines Formulars. Das alles wird von einem Rahmen umgrenzt. Nun soll die Überschrift aber nicht innerhalb des Rahmens liegen, sondern oben über der Linie.
Probiers doch mal mit fieldset (Überschrift in <caption>).
Viele Grüße aus Freiburg,
Marian--
Microsoft broke Volkswagen's world record: Volkswagen made only 22 million bugs!
<!--[if IE]><meta http-equiv="refresh" content="0; URL=http://www.getfirefox.com"><[endif]--> -