Objektorientiertes CSS Design ?

[Thomas]

Guten Morgen,

das Stylesheet unserer Seite wird immer größer und größer.
Es ist bereits sehr unübersichtlich.

Ist es möglich Elemente die in einem DIV Element sind irgendwie zu gruppieren oder zu vererben ?

So wie ich es auf SELFHTML verstanden habe ist das Vererben nur innerhalb der Tags möglich.

Angenommen ein DIV hat die id=event.

Jetzt sollen in dieser Box "event" folgendes sein:

Überschrift:
Datum:
Zeit:
Ort:

Wie kann ich gerade DIESE Überschrift, etc. nun in Verbindung mit diesem Div bringen? Ist es möglich es irgendwie zu kapseln, so dass ich die id ueberschrift in einer anderen Box anders verwenden kann?

Ich hoffe man versteht was gemeint ist.

Danke

Mit freundlichen Grüßen

Thomas

[Struppi]

Angenommen ein DIV hat die id=event.

Jetzt sollen in dieser Box "event" folgendes sein:

Überschrift:
Datum:
Zeit:
Ort:

Wie kann ich gerade DIESE Überschrift, etc. nun in Verbindung mit diesem Div bringen? Ist es möglich es irgendwie zu kapseln, so dass ich die id ueberschrift in einer anderen Box anders verwenden kann?

Nicht ganz eine ID muss immer eindeutig sein. Aber eine Überschrift kannst du überall verwenden.

#event H1
{
/* Überschrift in Event */
}

#andereID H1
{
/* Überschrift woanders */
}

Struppi.

[Thomas]

Hallo Struppi,

Nicht ganz eine ID muss immer eindeutig sein. Aber eine Überschrift kannst du überall verwenden.

Also ich habe mir die entsprechende Selfhtml Seite nochmals angeschaut.
Ich verstehe nicht was der Unterschied zwischen class und id ist.
Was heißt eindeutig?

Könntest Du das bitte noch einmal erläutern.
Gibt es eine Faustregel, wann welches zu verwenden ist?
Es gibt doch bestimmt ein wichtiges Kriterium.

Danke

[Thomas Luethi]

Hallo,

Ich verstehe nicht was der Unterschied zwischen class und id ist.
Was heißt eindeutig?

Eine ID darf in einem HTML-Dokument nur ein einziges Mal vorkommen.
Eine Klasse beliebig viele Male.

<h2 id="zwischentitel">Bla 1</h2>
<p>...</p>
<h2 id="zwischentitel">Fasel 2</h2>
<p>...</p>

waere also falsch.
Das sagt Dir uebrigens der Validator, wenn Du ihn
Deine Seiten checken laesst:
http://validator.w3.org/

Könntest Du das bitte noch einmal erläutern.
Gibt es eine Faustregel, wann welches zu verwenden ist?

Im Zweifelsfall: nimm Klassen.
Wenn Du bequem bist: nimm fuer alles Klassen.

Es gibt doch bestimmt ein wichtiges Kriterium.

Elemente, die _bei_Dir_ pro HTML-Dokument garantiert nur
einmal vorkommen, koennen eine ID kriegen. Zum Beispiel:

• Die aeusserste Layouttabelle:
    <table id="layouttabelle">
• Die Fusszeile:
    <div id="fusszeile">
• Das Logo:
    <p id="logo">
  u.s.w.

Gruesse,

Thomas

[Thomas]

Vielen Dank!!

Gruß Thomas

[Ingo Turski]

Hi,

eine ID kennzeichnet ein einziges Element, darf also auf einer seite nur einmal verwendet werden. Sie dient daher außer der formatierung auch zum ansprechen des elementes in html (z.b. anker) und javascript (getElementById). eine klasse dagegen ist für mehrfache verwendung gedacht.

in deinem fall hast du mehtrere möglichkeiten.
zunächst definierst du die überschrift mit z.b. <h1>.
du kannst nun alle <h1> auf allen seiten formatieren: h1 {}
und/oder für die überschrift im div spezielle formatierungen angeben: div#event h1 {}
du kannst auch für bestimmte formatierungen in verschiedenen elementen eine klasse definieren: .rot {color:rot}
und dann z.b. der überschrift diese klasse zusätzlich zuweisen: <h1 class="rot">
natürlich kannst du diese möglichkeiten auch kombinieren, wobei bei widersprüchlichen definitionen die spezifischeren selektoren verwendet werden; eine id ist spezifischer als eine klasse, div#event h1 ist spezifischer als h1 usw.

freundliche Grüße
Ingo

[Jeena Paradies]

Hallo,

Wie kann ich gerade DIESE Überschrift, etc. nun in Verbindung mit diesem Div bringen? Ist es möglich es irgendwie zu kapseln, so dass ich die id ueberschrift in einer anderen Box anders verwenden kann?
Ich hoffe man versteht was gemeint ist.

Also ich verstehe es nicht ganz, aber sind für das mehrmalige Verwenden nicht Klassen da?

Grüße
Jeena Paradies