nicht angemeldet
Abstände Überschrift/Text
Langer Text - einfaches Problem
Da will ich immer tolle Sachen machen, hab aber als Anfänger immer wieder Probleme mit den einfachsten Dingen.(Danke an André Laugks für die Hilfe neulich).
Problem: zuerst kommt ein Text, dann eine
Überschrift (H3), dann wieder normaler Text. Laß ich das so stehn ist (zumindest im IE5 und NN4.52435x7) der Abstand über und unter der Überschrift gleich groß. Ich möchte aber gerne den Abstand zwischen Überschrift und nachfolgendem Text verringern. Ich könnte statt H3 beispielsweise SPAN verwenden und die Schrift per CSS entsprechend vergößern, dann bräuchte ich davor nur eine Absatzschaltung (P) machen, hinterher nur ein BR. Dann habe ich aber den Nachteil das
ältere Browser (NN3) die Überschrift in der selben Größe darstellen wie den Text. Extra mit FONT SIZE-Tag anrücken ist auch doof. Dann könnte man das ganze natürlich auch in eine blinde Tabelle verpacken und dadurch die Abstände definieren, das finde ich in diesem einfachen Fall aber irgendwie umständlich (okay - es würde gehen). Aber wozu gibt es schließlich MARGIN-TOP oder auch MARGIN-BOTTOM, denke ich mir und wende sie an, guten Gewissens das auch der NN3 das zumindest halbwegs okay darstellt. Aber egal ob ich MARGIN-BOTTOM:0px auf H3 oder MARGIN-TOP:0px auf den darauffolgenden Text anwende, oder auch beides, die Element kommen sich nicht näher (nur NN - IE kann‚s). Nur ein MARGIN-TOP:-20 bringt das gewünschte Ergebnisse. Okay werdet ihr sagen, dann ist es ja gut. Aber ich bin mir eben nicht so ganz sicher ob das dann bei allen so exakt funktioniert wie bei mir. Am Ende steht beim Betrachter der Text auf der Überschrift. Also zusammenfassend möchte ich eigentlich nur wissen: ist es legitim/zuverlässig, den Abstand zwischen Überschrift und nachfolgendem Text mit MARGIN-TOP:-20 festzulegen?
Danke im voraus an jeden der mir Antwortet.
Mane
-
ältere Browser (NN3) die Überschrift in der selben Größe darstellen wie den Text. Extra mit FONT SIZE-Tag anrücken ist auch doof. Dann könnte man das ganze natürlich auch in eine blinde Tabelle verpacken und dadurch die Abstände definieren, das finde ich in diesem einfachen Fall aber irgendwie umständlich (okay - es würde gehen). Aber wozu gibt es schließlich MARGIN-TOP oder auch MARGIN-BOTTOM, denke ich mir und wende sie an, guten Gewissens das auch der NN3 das zumindest halbwegs okay darstellt. Aber egal ob ich MARGIN-BOTTOM:0px auf H3 oder MARGIN-TOP:0px auf den darauffolgenden Text anwende, oder auch beides, die Element kommen sich nicht näher (nur NN - IE kann‚s). Nur ein MARGIN-TOP:-20 bringt das gewünschte Ergebnisse. Okay werdet ihr sagen, dann ist es ja gut. Aber ich bin mir eben nicht so ganz sicher ob das dann bei allen so exakt funktioniert wie bei mir. Am Ende steht beim Betrachter der Text auf der Überschrift. Also zusammenfassend möchte ich eigentlich nur wissen: ist es legitim/zuverlässig, den Abstand zwischen Überschrift und nachfolgendem Text mit MARGIN-TOP:-20 festzulegen?
margin-top:-20 hat in NN3 eine Wirkung???????
dann hast du irgendwo einen Tippfehler, denn NN3 kann keinen Fetzen CSS!
poste mal den Absatz (um eben diesen zu finden)NN4.52... ist das eine neue Version oder wo kommt die Nummer her???
Kai Lahmann
-
margin-top:-20 hat in NN3 eine Wirkung???????
dann hast du irgendwo einen Tippfehler, denn NN3 kann keinen Fetzen CSS!
poste mal den Absatz (um eben diesen zu finden)Da hast du was falsch verstanden, oder hab ich es mißverständlich ausgedrückt, egal. Ich wollte sagen, daß der NN3 zumindest die
H3 ordentlich darstellt, auch wenn meine CSS-Angaben zum Abstand nicht greifen. Nochmal meine Frage:<h3>Tolle Überschrift</h3>
<div style="margin-top:-20px">
Text der ganz nah an der Überschrift steht.
</div>-
Ist das so okay oder muß ich Darstellungsfehler (wie auch Thomas meint) befürchten?
-
Sollte ich lieber mit einer blinden Tabelle arbeiten?
-
Oder die Überschrift statt mit H3 mit FONT SIZE-Tag formatieren und einfach vorher eine Absatzschaltung mit P und nachher ein BR?
Ich komm mit allen 3 Möglichkeiten hin, aber ich bin auf der Suche nach dem guten Stil. Welche Lösung würde ein Profi verwenden?
NN4.52... ist das eine neue Version oder wo kommt die Nummer her???
Das war nur eine kleine ironische Bemerkung zum Versionen-fick-fuck der Browser.
Kai Lahmann
-
Da hast du was falsch verstanden, oder hab ich es mißverständlich ausgedrückt, egal. Ich wollte sagen, daß der NN3 zumindest die
H3 ordentlich darstellt, auch wenn meine CSS-Angaben zum Abstand nicht greifen. Nochmal meine Frage:<h3>Tolle Überschrift</h3>
<div style="margin-top:-20px">
Text der ganz nah an der Überschrift steht.
</div>- Ist das so okay oder muß ich Darstellungsfehler (wie auch Thomas meint) befürchten?
ach so, du willst wissen, ob es durch die CSS-Angabe in NN3 einen Darstellungfehler gibt!
Grundsätzlich gilt, was der Browser nicht kenn überließt er. So auch CSS. Daher stört ihn das nicht die Spur.
Zum besseren Stil: hier ist die CSS-Version auf jeden Fall besser, da durch das ganze mit <font>... die logische Struktur verloren geht!Kai Lahmann
-
Grundsätzlich gilt, was der Browser nicht kenn überließt er. So auch CSS. Daher stört ihn das nicht die Spur.
es sein,denn du hast einen litzkleinen fehler in deinem CSS, dann streikt de navi und irgnoriert alles.
Zum besseren Stil: hier ist die CSS-Version auf jeden Fall besser, da durch das ganze mit <font>... die logische Struktur verloren geht!
100% korrekt.
Mit <FONT="+3"> und DIVs Überschriften zu simulieren etc. ist mehr als unkorrekt.Klassisch wäre z.B. (mal ohne em's wg. ie3)
H3 { font-height: 16pt; line-height: 16pt; }
P {font-height: 10pt; line-height:12pt; }
.nachheadline {margin-top:-6pt; }<H3>Die olle Headline</H3>
<P class="nachheadline">Der erste nach ner H3-Überschrift</P>das wäre meiner Ansicht nach das Sicherste und berücksichtigt auch die Struktur des Docs.
Leider kennen die Browser noch nich die Angabe:
alle Ps nach H3s mach so und so, die anderen so.
Da werdenwir wohl noch etwas warten müssen...Viel Erfolg
CirTap
-
Danke für alle Antworten. Ich bin weiter.
Mane.
-
-
-
Moin,
also mit Pixeln als Maßeinheit für Zeilenabstände zu arbeiten ist mehr als gefährlich, wie in einem anderen Posting schon erwähnt, denn schließlich werden alle Schriftgrößen von Haus aus in Punkt angegeben und der hat mit Pixeln nunmal herzlich wenig zu tun.
Wenn der IE3 das "em" richtig verstehen würde, dann könntest du das nehmen, aber leider funktioniert das nur ab NS4, IE4+ und Opera 3.5x richtig.
Sogesehen sind "pt" als Einheit noch das Sicherste, wenngleich auch diese auf den verschiedenen System unterschiedlich dargestellt werden, aber die Relationen stimmen wenigstens.
Auf Mac und Linux/Unix kommen die meisten Schriften etwas kleiner raus als sie unter Windoof angezeigt werden, das kann bis zur Unkenntlichkeit gehen, abgesehen davon, daß Du in den seltensten Fällen auf allen Systemen die selben Schriften vorfinden wirst.Wenn Du hier auf Nummer Sicher gehen willst, bleibt Dir nichts anderes übrig, als für non-Windows ein eigenes StyleSheet zu machen, in dem die Punktgrößen etwas größer sind und eine ausreichende Liste an Alternativschriften angegeben ist, so daß das Layout im worst case deinem Originaldesign noch einigermaßen entspricht.
Da man davon ausgehen kann, daß ein CSS-Browser auch JavaScript kann, läßt sich über die Browserabfrage das entsprechende CSS ja reinschreiben; ggf. ja auch mehrere nacheinander:
<LINK src="schriften.css"...
if (ie3) document.write("<LINK src="IE3-Raender.css"...
if (ie4x) document.write("<LINK src="IE4-Raender.css"...
if (nx4x) document.write("<LINK src="NS-Raender.css"...etc.
in diesem Sinne
CirTap
-
-
Hallo Manfred!
Du meinst eher IE3 denn der NN3 kann kein CSS also es ist egal ob du <span> oder margin-top nimmst.
margin-bottom kann richtig nur der IE5.
<h3>text</h3>
<p style="margin-top:-20px;">...</p>geht zwar, aber da px bei jednem System was anderes heiist kann es sein, daß damit probleme gibt, sprich der absatzt rutscht in der Überschrift hinein.
Wenn du schon CSS nimmst kannst ja gleich
<span class="header3">text</span>
<p>.....</p>
nehmen.
dann kannst du im <head> die Angaben für
'header3' machen.Oder wenn du auf 3-er Browser rücksicht nehmen musst
<font size=X><b>text</b><font>
<p>....</p>Grüße
Thomas-
Wenn du schon CSS nimmst kannst ja gleich
<span class="header3">text</span>Dann ist diese Überschrift aber doch im NN3 nicht vom normalen Text zu unterscheiden. Wenn ich aber die H3-Überschrift ganz normal eingebe und im nachfolgendem Text margin-top:-20px anwende wird die Überschrift in jedem Fall sauber dargestellt, auch wenn die eher nebensächliche Abstandsangabe nicht greift.
<font size=X><b>text</b><font>
Ja klar, aber es heißt doch immer man soll den FONT-Tag vermeiden. ?!?
Mane
-
Hallo Mane!
<font size=X><b>text</b><font>
Ja klar, aber es heißt doch immer man soll den FONT-Tag vermeiden. ?!?»»
Es kommt immer darauf an was und wem die Seite bietet/gerichtet ist.
Macht du eine private Seite, ist CSS OK.
Machts du eine Seite im Auftrag, kommt darauf an was dein Auftraggeber als Publikum vorstellt.
Wenn er meint er will, daß möglichst viele die Seite sehen können, dann muss du noch eine Weile die 3-er berücksichtigen.Grüße
Thomas
-
-