✔ CSS-Style zuordnen - ohne <table>, <tr>, <td>, <div>

[Pinky]

Hallo Tutorials.de
hallo alle anderen

ich möchte einem Text eine gewisse CSS-Formatierung zuweisen. Dazu will ich aber keine der Folgenden Tags benützen

• <table>, <tr>, <td>
• <p>
• <div>

Dies aus dem Grund, weil ich nicht mehr mit Tabellen arbeiten möchte, sonder nur noch mit Positionierungen mittels CSS und weil ich dem Tag div beriets fixe CSS-Werte zugewisen haben. Der <div>- Tag sieht im CSS- File so aus:

* html div { width:600px; height:100%; }

Auch <p>- Tags kann ich dazu nicht verwenden, da es mir sonst die ganze Homepage gegen meinen Willen umstellt.

Also, um mal auf den Punkt zu kommen; Ich möchte ein Tag, der mir erlaubt, einem Text ein CSS- Style zuzuweisen, der aber keine Auswirkung auf die HTML Formatierung hat. Irgend ein Tag, der gleich funktioniert wie <div>. Ich versuchte es mit layer, doch das kappiert der InternetExplorer nicht.

Ich hoffe ihr versteht, was ich möchte und könnt mir helfen. Vielen Dank
Euer Pinky

 

[Julian Maicher]

Wie wäre es mit <span>?
Einen Tag für Überschriften sollte auch für Überschriften verwendet werden .. Stichwort: Semantik!

 

[Pinky]

Hallo & Danke

genau das habe ich gesucht. Hat sich soweit erledigt. Die CSS- Styles gebe ich mittels id="" weiter.

Vielen Dank für die schnelle Antwort.

 

[muhkuh]

Mmmh, wenn ich das richtig sehe, steuerst du jedesmal das Element über die gesamte Hierarchie hinweg an: * html div p { STYLE }, etc. Versuch das aber einfach mal ohne und steuer die Elemente ohne den Schwanz vorne dran an: p { STYLE }. Die Methode, die du da anwendest ist meiner meinung nach zwar sehr elegant, weil sie ohne Klassen- und ID-Zuweisungen auskommt, aber braucht nur dann angewendet werden, wo es sinnvoll ist. Kleines Beispiel: Website mit Header-, Menü- und Content-Bereich, wobei jeweils im Header- und Menü-Bereich ein Menü über eine Liste erstellt werden soll. Das Menü im Header ist horizontal, das im Menü-Bereich vertikal angeordnet.

/* HEADER */
div#header { STYLE }
div#header ul { STYLE }
div#header li { float: left; margin: 0 0 0 1px; }

/* MENU*/
div#menu { STYLE }
div#menu ul { STYLE }
div#menu li { margin: 0 0 1px 0; }

/* CONTENT */
div#content { STYLE }

/* TEXT */
p { STYLE }
h1, h2, h3, h4, h5, h6, h7 { STYLE }

Theoretisch wäre natürlich auch die Ansteuerung der Listen über eine Klassen- oder ID-Zuweisung möglich, da aber die der Header-, Menü- und Content-Bereiche eh schon vorhnden sind, kann man diese für seine Zwecke weiternutzen Was aus dem Beispiel außerdem ersichtlich wird, ist dass es auch nur dann Sinn macht diese Methode zu gebrauchen, wenn bestimmte Elemente anders formatiert in anderen Bereichen auftauchen. Ein <p>-Element, dass ohnehin überall gleich formatiert werden soll, kann man "global" definieren. Ebenso Überschriften (wie oben schon erwähnt sollte man möglichst auf die Semantik achten).

Für die ganze Seite geltende Formatierungen (Schriftart, -farbe, -größe, etc.) kann man einmal definieren. Dazu bietet sich der Body-Tag an, oder auch der HTML-Tag. Dann kann man sich diese dort festgelegten Formatierungen in den restlichen Tags sparen, oder man kann diese dann jeweilig anpassen.

html,body { STYLE }

PS: Bei Zuweisungen über eine ID muss man aber eben auch immer bedenken, dass diese maximal einmal pro Seite zugewiesen werden darf! Eine Seite mit Liste, deren Listen-Punkte immer die gleiche ID haben, kann also nicht mehr korrekt validiert werden!

 

[Maik]

Hi,

neben der von muhkuh gezeigten Möglichkeit der Kaskadierung bzw. Spezifität eines Selektors, könntest du auch mit Klassen- oder ID-Selektoren arbeiten, um so ein HTML-Element in einem Dokument mehrmals, aber mit unterschiedlichen CSS-Formatierungen einsetzen zu können.

Hierbei ist zu beachten, dass die ID in dem HTML-Dokument eindeutig sein muss, d.h. sie darf darin nur einmal vergeben werden, Klassen hingegen können in dem Dokument unendlich eingesetzt werden.

p.KlassenName { CSS-Formatierung }
div.KlassenName { CSS-Formatierung }

p#IDname  { CSS-Formatierung }
div#IDName  { CSS-Formatierung }

<p class="KlassenName">...</p>
<div class="KlassenName">...</div>

<p id="IDname">...</p>
<div id="IDname">...</div>