"Universaltag"
0 
MudGuard
0 0 0 Spezifi...
0 MudGuard
0 
Detlef G.
0 2 0
"Universaltag"
Hiho,
ich versuche gerade folgendes zu erreichen. Ich habe mir ein Layout aus mehreren divs gebastelt und möchte nun gerne in einem dieser divs den folgenden den folgenden Effekt erreichen:
Überschriften bekommen eine eigene Formatierung
Alles nach den Überschriften erhält eine andere (also andere Schriftgrösse, Schriftfarbe usw. durchgehend bis zum Ende)
Die Überschrift zu formatieren ist ja kein Problem, da weise ich einfach dem <h1>-Tag per CSS entsprechendes Aussehen zu. Aber in was packe ich am besten den Text danach. Ich habe zuerst gedacht es einfach in ein <p></p> zu packen. Das klappt zwar ganz gut, ist aber nicht valide wenn ich ein <form> in diesem Bereich verwenden will. Als zweites habe ich überlegt, das ganze in ein weiteres <div>-Tag zu packen. Dafür habe ich hier im Forum aber bereits eins auf dem Deckel bekommen mit dem Hinweis das mehrfach verschachtelte div-tags ganz böse wären.
In welchen Rahmen kann ich also den Inhalt packen, damit die Anweisungen für alles gelten und ich bei den (dynamisch erzeugten) Inhalten nicht mehr so stark darauf achten muss das jeder Textfetzen usw. extra irgend eine Klasse zugewiesen bekommt?
Grüsse
Marc
-
Hi,
Überschriften bekommen eine eigene Formatierung
Alles nach den Überschriften erhält eine andere (also andere Schriftgrösse, Schriftfarbe usw. durchgehend bis zum Ende)Die Überschrift zu formatieren ist ja kein Problem, da weise ich einfach dem <h1>-Tag per CSS entsprechendes Aussehen zu. Aber in was packe ich am besten den Text danach. Ich habe zuerst gedacht es einfach in ein <p></p> zu packen. Das klappt zwar ganz gut, ist aber nicht valide wenn ich ein <form> in diesem Bereich verwenden will. Als zweites habe ich überlegt, das ganze in ein weiteres <div>-Tag zu packen. Dafür habe ich hier im Forum aber bereits eins auf dem Deckel bekommen mit dem Hinweis das mehrfach verschachtelte div-tags ganz böse wären.
Wozu auch noch ein div?
Das Zeug befindet sich doch bereits in einem div (vermutlich mit ner ID) und ist damit über dieses div ansprechbar.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hiho,
hmm eigentlich hast du Recht :)
Aber noch eine kleine Anschlussfrage: Ist es eigentlich erlaubt mehr als eine CSS Datei für das selbe Ausgabemedium anzugeben? Ich würde nämlich gerne ein "Basis"-CSS erstellen und davon ausgehend für verschiedene Seiten dieses CSS in einer weiteren Datei erweitern oder auch teilweise überschreiben. Ist das erlaubt? Ich habe zwar gerade mal den Spass vom w3 validator checken lassen und es ging durch, würde mich aber trotzde noch mal versichern.
Falls ja, gibt es eine Vorschrift in welcher Reihenfolge der Browser dies zu interpretieren hat? Also wenn ich in css1 reinschreibe p { color:#ff0000;} und in css2 für einige seiten die Farbe auf schwarz ändern will und schreibe p {color:#000000;} müssen die dann in irgend einer speziellen Reihenfolge interpretiert werden?Ich will zwar vermeiden das soetwas vor kommt, aber wer weiss. Und es wäre unschön wenn ich doch mal ein Atribut überschreibe und dann irgend ein dahergelaufener Browser das ganze in der "falschen" reihenfolge interpretiert und statt rot mit schwarz zu überschreiben lieber erst schwarz nimmt und das dann in rot ändert.
Grüsse
Marc
-
Moin!
Falls ja, gibt es eine Vorschrift in welcher Reihenfolge der Browser dies zu interpretieren hat? Also wenn ich in css1 reinschreibe p { color:#ff0000;} und in css2 für einige seiten die Farbe auf schwarz ändern will und schreibe p {color:#000000;} müssen die dann in irgend einer speziellen Reihenfolge interpretiert werden?
Aber natürlich gibts eine Vorschrift. Ähnlich wie beim Fußball wird die Rangfolge, welche Formatierung Vorrang vor anderen hat, bestimmt durch den verwendeten Selektor (das Teil vor der geschweiften Klammer).
In Kurzform: Der Selektor mit den meisten Punkten in Kategorie A, B und C gewinnt setzt seine Formatierungen durch. Kategorie A ist die Zahl der IDs, Kategorie B ist die Zahl der Klassen, und Kategorie C ist die Zahl der HTML-Tags im Selektor.
#body #meta div#selected a.main:link span { color:red; }Dieser Selektor enthält drei IDs (#body, #meta, #selected), zwei Klassen (.main und :link, Pseudoklassen werden wie Klassen behandelt) und drei HTML-Tags (div, a und span). In Kategorien also: A=3, B=2, C=3.
span { color:white; background-color:black }Dieser Selektor enthält nur einen HTML-Tag, also A=0, B=0, C=1.
Die Formatierung, die auf das Span wirkt, welches vom oberen Selektor getroffen wird, richtet sich also primär nach dem oberen CSS - zumindest, was die color-Angabe angeht. Die Textfarbe wird also rot. Die Hintergrundfarbe ist dort aber nicht definiert, der zweite Selektor kommt zum Zuge.
Und bei Punktegleichstand gilt das, was zuletzt definiert wurde.
Ausführlicher stehts in http://de.selfhtml.org/css/formate/kaskade.htm.
- Sven Rautenberg
-
Hallo Sven,
Die Formatierung, die auf das Span wirkt, welches vom oberen Selektor getroffen wird, richtet sich also primär nach dem oberen CSS - zumindest, was die color-Angabe angeht. Die Textfarbe wird also rot. Die Hintergrundfarbe ist dort aber nicht definiert, der zweite Selektor kommt zum Zuge.
erklärt sich damit auch ansatzweise die Tatsache, (die mich bereits einmal halb in den Wahnsinn getrieben hat ;-)), daß
div#test {color:red;}
*nicht* von
#test {color:blue;}
überschrieben wird? Weil div#test eine höhere Spezifität als #test hat?
Gruß aus Köln-Ehrenfeld,
Elya
-
Hi,
erklärt sich damit auch ansatzweise die Tatsache, (die mich bereits einmal halb in den Wahnsinn getrieben hat ;-)), daß
*nicht* von überschrieben wird? Weil div#test eine höhere Spezifität als #test hat?Nein, nicht ansatzweise, sondern exakt dadurch.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
Hallo Marc
... Ich würde nämlich gerne ein "Basis"-CSS erstellen und davon ausgehend für verschiedene Seiten dieses CSS in einer weiteren Datei erweitern oder auch teilweise überschreiben.
Sind diese Änderungen bzw. Erweiterungen so umfangreich, dass sich dafür
ein zusätzliche CSS-Datei lohnt?Wenn es nicht zu umfangreiche Änderungen sind, würde ich dafür keine extra
CSS-Datei verwenden sondern dem body dieser Seiten eine id verpassen und
alle seitespezifischen Eigenschaften über diese id selektieren.... Also wenn ich in css1 reinschreibe p { color:#ff0000;} und in css2 für einige seiten die Farbe auf schwarz ändern will und schreibe p {color:#000000;} ...
p {color:#ff0000;} #bodyid p {color:#000000;}Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
Hallo Marc,
...] Als zweites habe ich überlegt, das ganze in ein weiteres <div>-Tag zu packen. Dafür habe ich hier im Forum aber bereits eins auf dem Deckel bekommen mit dem Hinweis das mehrfach verschachtelte div-tags ganz böse wären.
das geforderte "Universaltag" müßte tatsächlich das "div" -ggf. span-
sein, auch wenn dein Beispiel sich ("Alles nach den Überschriften..")
womöglich schon mit dem body oder dem von MudGuard erwähnten wohl
vorhandenen Div lösen liesse.So "ganz böse" können divs gar nicht sein, denn die meist geforderte
Trennung von Layout und Inhalt läßt sich oft nur mit zusätzlichen
divs verwirklichen."ganz böse" soll wohl eher der Verzicht auf richtiges HTML sein, und
da ist Text in p-Tags wie von dir schon überlegt naheliegend.
Möglich wäre vielleicht auch so etwas:
<h1></h1>
<p>
</p>
<form>
</form>
<p>
</p>
Wenn jetzt die Teilung des Textes in zwei p-Tags nicht sinnvoll sein
sollte weil es keine einzelnen Absätze sind bleibt eigentlich nur das
Div.Grüsse
Cyx23
-
Moin!
Ich habe zuerst gedacht es einfach in ein <p></p> zu packen. Das klappt zwar ganz gut, ist aber nicht valide wenn ich ein <form> in diesem Bereich verwenden will.
Doch, <p> ist die beste Methode. <form> darf nicht ins <p>, aber im <form> selbst muß irgendwas stehen, z.B. <p>. Die korrekte Form wäre also
<div>
<h1>...</h1>
<p>...</p>
<form>
<p>...</p>
</form>
</div>Inhalt im <form> ist in Transitional auch ohne <p> erlaubt, in Strict (und da wollen wir doch alle mal hin, oder? :) ) sind Inline-Elemente allerdings in ein passendes Block-Element zu kapseln. Falls <p> dir da nicht paßt, kann es natürlich auch <div> sein, oder <table>. Oder <ul>/<ol> z.B. (hab ich persönlich zwar noch nie ausprobiert, wäre aber möglich).
- Sven Rautenberg
-
Tach,
Falls <p> dir da nicht paßt, kann es natürlich auch <div> sein, oder <table>. Oder <ul>/<ol> z.B. (hab ich persönlich zwar noch nie ausprobiert, wäre aber möglich).
dl wäre noch zu erwähnen, passt meiner Meinung nach super in Formularen, da man häufig eine Zuordnung von Formularelement und Beschriftung hat.
mfg
Woodfighter
-
Hallo,
ich versuche gerade folgendes zu erreichen. Ich habe mir ein Layout aus mehreren divs gebastelt und möchte nun gerne in einem dieser divs den folgenden den folgenden Effekt erreichen:
Überschriften bekommen eine eigene Formatierung
Alles nach den Überschriften erhält eine andere (also andere Schriftgrösse, Schriftfarbe usw. durchgehend bis zum Ende)um mal konkret auf deine frage zu antworten:
#mein div * { ... }
oder eben div#meindiv * { ... } gilt für alles innerhab von <div id="meindiv">
_danach_ in der CSS:
#meindiv h1 { ... } gilt so für h1 innerhalb von <div id="meindiv">Grüße
Thomas-
Moin!
#mein div * { ... }
oder eben div#meindiv * { ... } gilt für alles innerhab von <div id="meindiv">Diese zwei Selektoren unterscheiden sich gravierend. :)
Der erste erfordert <XXX id="mein"><div><XXX>, der zweite erfordert <div id="meindiv"><XXX>.
- Sven Rautenberg
-
Moin!
#mein div * { ... }
oder eben div#meindiv * { ... } gilt für alles innerhab von <div id="meindiv">Diese zwei Selektoren unterscheiden sich gravierend. :)
Ah. Natürlich, du hast Recht. Ein "copy & paste" Fehler meinerseits.
Grüße
Thomas
-