Anfängerfragen zu HTML und CSS

[Klaus]

Hallo,
1. Wenn ich eine zweizeilige Überschrift habe (z.b. h2),
ist es dann besser

  
<h2>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h2>  
<h2>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h2>  

oder

  
<h2>aaaaaaaaaaaaaaaaaaaaaaaaaaa<br>  
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</h2>  

2. Wenn ich <div style="text-align:center"> benötige (möglicherweise nur an einer Stelle),
schreibe ich es so direkt in den HTML-Text oder lege ich dafür eine Klasse in meinem CSS-Dokument an?
Grüße
Klaus

[xasz]

Hallo,

zu  1. ich persöhnlich würde die 2te Methode nehmen, im Prinzip würd ich sagen ist es egal.

zu 2. mit <div style="text-align:center"> erstellt du direkt in deinem html body einen layer, den du auch mit </div> abschließen musst. da du für diesen div nun auch schon dein Style direkt implementiert hast brauchst du dafür auch keinen Eintrag im CSS-Dokument, außer du willst noch andere Regeln hinzufügen. wie z.B. das alle Divs einen Rahmen haben oder sowas.

grüße

Michael Schneider

[Gunnar Bittersmann]

@@Klaus :

nuqneH

1. Wenn ich eine zweizeilige Überschrift habe (z.b. h2),

Wenn du _eine_ Überschrift hast, dann gehört diese in _ein_ 'h2'-Element.

Ob nun 'br' darin Mittel der Wahl ist oder ob darin noch weiteres Markup ('span'-Elemente bspw.) enthalten ist, lässt sich ohne Kenntnis des Inhalts nicht genau sagen. Vermutlich eher zweites.

2. Wenn ich <div style="text-align:center"> benötige (möglicherweise nur an einer Stelle),
   schreibe ich es so direkt in den HTML-Text

Nein. _Alle_ Darstellungsangaben gehören ins Stylesheet.

oder lege ich dafür eine Klasse in meinem CSS-Dokument an?

Vielleicht ist das Element bereits mit einem Selektor ansprechbar, so dass es gar keiner Klasse bedarf?

Qapla'

[Klaus]

@Euch beide!
Erstmals danke und gleich eine weitere Frage:
Wenn ich einen Text habe mit gelegentlichen erzwungenen Zeilenwechseln,
wann wird <br> genommen und wann tags mit einer Margin-Definition in CSS?

[Der Martin]

Hallo,

Wenn ich einen Text habe mit gelegentlichen erzwungenen Zeilenwechseln, wann wird <br> genommen und wann tags mit einer Margin-Definition in CSS?

kommt drauf an, was du eigentlich willst.
Möchtest du einen Zeilenumbruch im Fließtext, nimmst du <br>.
Möchtest du eigentlich nur einen Abstand, nimmst du margin und/oder padding.

Ein <br> als erstes oder letztes Element in seinem Elternelement ist ein starkes Indiz dafür, dass es eigentlich "falsch" angewendet wird. Mehrere direkt aufeinanderfolgende <br> ebenfalls.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

oder lege ich dafür eine Klasse in meinem CSS-Dokument an?

Vielleicht ist das Element bereits mit einem Selektor ansprechbar, so dass es gar keiner Klasse bedarf?

Außerdem: wenn es sich um ein spezielles Element handelt, ist vermutlich nicht eine Klasse, sondern eine ID das Mittel der Wahl.

Qapla'

[Klaus]

Hi

Vielleicht ist das Element bereits mit einem Selektor ansprechbar, so dass es gar keiner Klasse bedarf?

Außerdem: wenn es sich um ein spezielles Element handelt, ist vermutlich nicht eine Klasse, sondern eine ID das Mittel der Wahl.

Sind dies nicht alles Empfehlungen, für Profi-Seiten, die man je nach Ausgabemedium anders gestalten will?
Wenn ich aber eine Homepage bastle ausschließlich für die Bildschirmanzeige,
warum soll ich dann in der CSS eine Klasse anlegen oder für den Einzelfall eine Id anstelle es gleich in die HTML reinzuschreiben?
Klaus

[Gunnar Bittersmann]

@@Klaus:

nuqneH

Sind dies nicht alles Empfehlungen, für Profi-Seiten, die man je nach Ausgabemedium anders gestalten will?

Nein. Es sind Empfehlungen für gute Wartbarkeit.

Wenn man später die Darstellung ändern möchte, möchte man nicht in HTML-Dateien rumsuchen, sondern die Änderung dort tätigen können, wo man sie vermutet: im Stylesheet.

Deshalb ist die strikte Trennung von Markup (HTML) und Darstellung (CSS) und auch Verhalten (JavaScript) immer empfehlenswert.

Qapla'

[Klaus]

Hallo,
und weiter gehts - ich hoffe ich nerve nicht, aber Antworten auf Fragen "Was ist besser" sind in Google oft schwer zu erhalten.
Ich habe in Selfhtml gesehen, welche Angaben z.B. bei line-hight möglich sind.
Dort steht unter "Numerische Angaben":
pt, px, ... und %
Über die Suchmaschine habe ich jetzt aber zahlreiche Treffer gefunden, wo nur stand line-height:1.5 ohne weitere Maßangabe.
Sind dies fehlerhafte Angaben oder was bedeutet diese Angabe?
Wenn ich dies angebe, habe ich den Eindruck, dass damit das 1,5-fache meiner Zeichenhöhe angezeigt wird.

Grüße
Klaus

[Gunnar Bittersmann]

@@Klaus:

nuqneH

Ich habe in Selfhtml gesehen, welche Angaben z.B. bei line-hight möglich sind.
Dort steht unter "Numerische Angaben":
pt, px, ... und %

Immer diese zweifelhafte Sekundärliteratur! ;-)

Über die Suchmaschine habe ich jetzt aber zahlreiche Treffer gefunden, wo nur stand line-height:1.5 ohne weitere Maßangabe.
Sind dies fehlerhafte Angaben oder was bedeutet diese Angabe?

Im Zweifelsfall im Original nachschauen. [CSS21 §10.8.1]

Hier sollte es auch 2.0 tun, was es auch auf deutsch gibt. [CSS2 §10.8.1]

Qapla'

[Klaus]

Ups!

Ich habe in Selfhtml gesehen, welche Angaben z.B. bei line-hight möglich sind.

Immer diese zweifelhafte Sekundärliteratur! ;-)

Ich habe angenommen, SELFHTML und dieses Forum kommen aus dem gleichen (guten) "Stall"!

Jetzt habe ich mich ein wenig mit
margin-top, -bottom, padding-top, -bottom beschäftigt.
Ich habe diese Attribute einem p-Selector verpasst und in den p-Bereich(?)
jeweils eine Zeile Text geschrieben.
In manchen Fällen ist der Text zwischen den beiden Textzeilen gleich, egal ob
margin-... oder padding-... angab.
Aber als ich jeweils margin-top:20px   u n d    margin-bottom:20px
bzw. padding-top:20px   u n d    padding-bottom:20px, gab es einen großen Unterschied.
Im Falle margin, lagen die Zeilen nicht wie vermutet 40px auseinander sondern nur 20.
Woran liegt dies?
Gibt es eine für den Anfänger leicht verständliche Erläuterung - insbesondere wann im Falle von <p> margin bzw. padding genommen wird.

[Gunnar Bittersmann]

@@Klaus:

nuqneH

Im Falle margin, lagen die Zeilen nicht wie vermutet 40px auseinander sondern nur 20.
Woran liegt dies?

Die CSS-Spezifikation hatte ich dir verlinkt. Darin wirst du auch etwas über zusammenfallender Ränder (collapsing margins) finden.

Qapla'

[Der Martin]

Hallo,

Ich habe in Selfhtml gesehen, welche Angaben z.B. bei line-hight möglich sind.
Immer diese zweifelhafte Sekundärliteratur! ;-)
Ich habe angenommen, SELFHTML und dieses Forum kommen aus dem gleichen (guten) "Stall"!

natürlich, aber es bleibt dennoch eine Sekundärquelle - maßgeblich sind die offiziellen Standards.

Jetzt habe ich mich ein wenig mit margin-top, -bottom, padding-top, -bottom beschäftigt. Ich habe diese Attribute einem p-Selector verpasst und in den p-Bereich(?) jeweils eine Zeile Text geschrieben.
In manchen Fällen ist der Text zwischen den beiden Textzeilen gleich, egal ob margin-... oder padding-... angab.

Ja, padding und margin *können* zum gleichen Ergebnis führen, solange du keine Rahmen oder Hintergrundfarben verwendest. Vereinfacht: Abstand durch padding liegt innerhalb des Rahmens und der Hintergrundfarbe bzw. des Hintergrundbilds, margin außerhalb davon.

Aber als ich jeweils margin-top:20px   u n d    margin-bottom:20px bzw. padding-top:20px   u n d    padding-bottom:20px, gab es einen großen Unterschied.
Im Falle margin, lagen die Zeilen nicht wie vermutet 40px auseinander sondern nur 20.
Woran liegt dies?

Collapsing Margins. Top- oder bottom-margins von aufeinanderfolgenden oder ineinanderliegenden Elementen fallen unter bestimmten Umständen zusammen, so dass nur noch der größere der beiden Beiträge zählt. Für padding gilt das nicht.
Ich habe inzwischen akzeptiert, dass es das gibt, halte es aber immer noch für Humbug. Es widerspricht für mich jeglicher Intuition.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Ich habe inzwischen akzeptiert, dass es das gibt, halte es aber immer noch für Humbug.

Ich habe inzwischen akzeptiert, dass du das immer noch für Humbug hältst, halte es aber immer noch für fortgeschrittene geistige Umnachtung. ;-)

Qapla'

[Klaus]

Hi,
egal ob Humbug oder nicht,
logisch ist es nicht.
Ich meine, eine Angabe sollte einigermaßen selbsterklärend sein und unabhängig von anderen Einflüssen. Ich bin mir sicher, dass auf diese spezielle Eigenschaft fast jeder Neuling hereinfällt, es sei denn er liest erst INTENSIV ein komplettes Handbuch, was auf diese Spezialfälle eingeht, was sicher nur in wenigen Werken der Fall ist, und fängt erst dann an zu realisieren.
Danke für Eure Hilfe, ich werde gerne darauf zurückkommen - aber für heute bin ich geschafft (nicht ich habe ...)!

[Matthias Apsel]

Om nah hoo pez nyeetz, Klaus!

..., es sei denn er liest erst INTENSIV ein komplettes Handbuch, was auf diese Spezialfälle eingeht, was sicher nur in wenigen Werken der Fall ist,

so speziell sind diese Spezialfälle gar nicht, wie du selbst festgestellt hast. Zwar kein komplettes Handbuch, aber das Wiki ist auch eine Möglichkeit, Sekundärliteratur zu nutzen.

Im Forum gab es auch schon interessante Diskussionen unter Verwendung von Voyager und Delta-Flyer sowie Laborwänden ....

Matthias

[molily]

Collapsing Margins. (...)
Ich habe inzwischen akzeptiert, dass es das gibt, halte es aber immer noch für Humbug. Es widerspricht für mich jeglicher Intuition.

Das ist durchaus intuitiv: Wenn ich dich auf einem Abstand von mindestens 20 Meter von mir fern halte, du mich auf einem Abstand von mindestens 30 Meter von dir fern hältst, wieso sollten wir da auf 50 Meter Abstand kommen? Wir würden uns bei 30 Metern einpendeln. Es sei denn, dein Abstand bedeutet für dich, auf meinen Mindestabstand deinen zu addieren. Aber wieso sollte er?

Mathias

[Der Martin]

Hallo,

Collapsing Margins. (...) widerspricht für mich jeglicher Intuition.
Das ist durchaus intuitiv: Wenn ich dich auf einem Abstand von mindestens 20 Meter von mir fern halte, du mich auf einem Abstand von mindestens 30 Meter von dir fern hältst, wieso sollten wir da auf 50 Meter Abstand kommen? Wir würden uns bei 30 Metern einpendeln. Es sei denn, dein Abstand bedeutet für dich, auf meinen Mindestabstand deinen zu addieren. Aber wieso sollte er?

auch Gunnar hat schon einige Analogien angebracht, in denen das Zusammenfallen der Ränder/Abstände sinnvoll ist. Ich halte es aber dennoch für einen konstruierten Sonderfall, und daher für eine schlechte Idee, diesen Sonderfall als Regel in die Spezifikation aufzunehmen.

Wenn ich für zwei aufeinanderfolgende Elemente sowohl margin-bottom fürs obere als auch margin-top fürs untere angebe, finde ich es überhaupt nicht einleuchtend, dass einer der beiden Beiträge an der Stoßkante nicht mehr berücksichtigt wird (noch viel weniger bei verschachtelten Elementen). Ich gebe die Werte ja nicht einfach aus Spaß explizit an. Zumal ich aus der Textverarbeitung (Beispiel MS Word) auch gewöhnt bin, dass Abstände sich addieren.

Wenn also eine Überschrift ein margin-bottom von 4px haben soll, der nachfolgende Absatz ein margin-top von 6px, dann erwarte ich einen resultierenden Abstand von 10px *zwischen* den Elementen.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

[…] finde ich es überhaupt nicht einleuchtend […]

Collapsing Margin ⇒ Collapsing Martin

Qapla'

[Klaus]

Hi,
jetzt suche ich nach einer Übersicht über die zulässigen Attribute eines tags, so daß ich zum Beispiel schnell finden kann, wo und wie ich den Abstand der Zeilen einer Aufzählung angeben kann (in ul oder in li, mit "height" oder "line-height" oder ....)
Gruß
Klaus

[Gunnar Bittersmann]

@@Klaus:

nuqneH

jetzt suche ich nach einer Übersicht über die zulässigen Attribute eines tags,

Du meinst: eines _Elements_.

so daß ich zum Beispiel schnell finden kann, wo und wie ich den Abstand der Zeilen einer Aufzählung angeben kann

HMTL-Attribute zur Angabe der Darstellung? Nein!

(in ul oder in li, mit "height" oder "line-height" oder ....)

Ah, du meinst gar nicht Attribute, sondern CSS-_Eigenschaften_.

Du kannst für jedes Element jede CSS-Eigenschaft angeben. Allerdings sind nicht alle wirksam. Ob eine Eigenschaft bei einem bestimmten Element wirkt, steht in der CSS-Spec bei der Beschreibung der jeweiligen Eigenschaft.

Möchtest du wirklich den Abstand der _Zeilen_ einer Aufzählung angeben? Das betrifft dann auch den Abstand zwischen den Zeilen _eines_ Listeitems, wenn dieses mehrzeilig ist. Dann ist 'line-height' dein Freund.

Oder möchtest du den Abstand zwischen den _Listitems_ angeben? Dann ist 'margin' dein Freund.

Qapla'