Schriftart in separater CSS global formatieren

[Mario]

Hallo,

ich habe folgendes Problem:

Ich würde gerne über eine separate CSS-Datei dem Browser sagen, dass jeglicher Text in Verdana (falls vorhanden) angezeigt werden soll, da ich ein Problem mit einer Überschrift habe auf die ich aber später noch zu sprechen komme.

Ich arbeite mit dem "Layout7", das man sich hier bei selfhtml herunterladen kann und meine CSS sieht momentan folgendermaßen aus:

  
a:link { text-decoration: underline; color: #666666; }  
a:visited { text-decoration: none; color: #FF9933; }  
a:hover { text-decoration: underline; color: #92AEFD; }  
a:active { text-decoration: underline; color: #FF9933; }  
  
.text  
{  
font-size: 12px;  
color: #999999;  
line-height: 21px;  
font-family: Verdana,Arial,Helvetica;  
}  
  
.lesen  
{  
font-size: 14px;  
color: #666666;  
line-height: 18px;  
font-family: Verdana,Arial,Helvetica;  
}  
  
.head  
{  
font-size: 14px;  
color: #666666;  
line-height: 21px;  
font-family: Verdana,Arial,Helvetica;  
}  
  
  
.sb {scrollbar-3dlight-color:#666666;  
           scrollbar-arrow-color:#cc3300;  
           scrollbar-base-color:#ffffff;  
           scrollbar-darkshadow-color:#6666666;  
           scrollbar-face-color:#ffffff;  
           scrollbar-highlight-color:#ffffff;  
           scrollbar-shadow-color:}

Mein Problem besteht nun darin, die mitgelieferten Seiten HTML4.01 valide zu bekommen. Das funktioniert allerdings momentan nicht, weil ich (um eine Überschrift zu generieren) innerhalb eines Block-Level Elements ( in meinem Fall <span class="lesen">) ein inline Element (in meinem Fall <h3>) platziert habe.
Im Ganzen sieht das dann folgendermaßen aus:

<!--||| Anfang  Textspalte |||-->  
<td valign="top" width="800">  
<br>  
  
  
<p align="justify">  
<!--||| Hier Überschrift und gewünschten Text einfügen. |||-->  
<span class="lesen">  
<center>  
<a href="../index.htm">home</a> &middot; Kontakt    <br><br>  
</center>  
<h3>Für eine unkomplizierte Kontaktaufnahme</h3>  
<!--||| Ende Text |||--></span>

Mit diesem Code bekomme ich dann allerdings von W3.org gesagt, dass mein Code eben nicht valide ist...

"~~~html Line 59, Column 3: document type does not allow element "H3" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag.

<h3>Für eine unkomplizierte Kontaktaufnahme</h3><br><br>

✉

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>")."

Wie kann ich das ändern?  
Ich hoffe, ich habe mich halbwegs verständlich ausdrücken können... ;)  
Falls nicht, bitte einfach fragen!  
  
Danke schonmal  
  
Mario

[suit]

Ich arbeite mit dem "Layout7", das man sich hier bei selfhtml herunterladen kann und meine CSS sieht momentan folgendermaßen aus:

du brauchst die schriftart nicht auslagern in einer eigenen datei, eigne dir etwas grundkenntnisse in css an und du wirst feststellen, dass etwa die hälfte von deinem css überflüssig ist

* { font-family: Verdana, sans-serif; }
oder
body {   font-family: Verdana, sans-serif; }

reichen zb völlig aus, um jedem element bzw jedem element im body (sofern die vererbung richtig funktioniert) die entsprechende schriftart zuzuweisen - mit dem Stern-Selektor sollte man allerdings vorsichtig umgehen

[suit]

und zu deinem eigentlichen problem (du hast scheinbar noch einige mehr, du verwendest css nicht konsequent, du benutzt tabellen zum layouten usw)

<span><h3></h3></span>

<span /> ist ein generisches inline-element und darf demnach keine block-elemente (<h3 /> ist ein block-element) enthalten

ein paar grundlagen solltest du dir auch hier aneignen, bevor du weitermachst ;)

[Mario]

Ich arbeite mit dem "Layout7", das man sich hier bei selfhtml herunterladen kann und meine CSS sieht momentan folgendermaßen aus:
du brauchst die schriftart nicht auslagern in einer eigenen datei, eigne dir etwas grundkenntnisse in css an und du wirst feststellen, dass etwa die hälfte von deinem css überflüssig ist

* { font-family: Verdana, sans-serif; }
oder
body {   font-family: Verdana, sans-serif; }

reichen zb völlig aus, um jedem element bzw jedem element im body (sofern die vererbung richtig funktioniert) die entsprechende schriftart zuzuweisen - mit dem Stern-Selektor sollte man allerdings vorsichtig umgehen

Danke! Habe jetzt sämtliche Schriftformatierungen gelöscht und nur noch:

body {   font-family: Verdana,Arial,Helvetica;  
        font-size: 14px;  
         color: #666666; }

drin und so funktioniert es wunderbar :)

[suit]

body {   font-family: Verdana,Arial,Helvetica;

font-size: 14px;
         color: #666666; }

  
versuchs mit font-family: Verdana, Arial, Helvetica, sans-serif;  
  
sans-serif ist eine generische serifenlose schriftfamilie - sollten alle vorangegangen schriften nicht gefunden werden wird eine serifenlose schrift gewählt - ansonsten kanns passieren, dass die browser-default schrift eine serifenschrift ist (wie etwas times new roman) und das wollen wir doch nicht ;)

[ChrisB]

Hi,

Mein Problem besteht nun darin, die mitgelieferten Seiten HTML4.01 valide zu bekommen. Das funktioniert allerdings momentan nicht, weil ich (um eine Überschrift zu generieren) innerhalb eines Block-Level Elements ( in meinem Fall <span class="lesen">)

span ist kein block-Element, sondern inline.

ein inline Element (in meinem Fall <h3>) platziert habe.

h3 ist kein inline-Element, sondern block.

Mit diesem Code bekomme ich dann allerdings von W3.org gesagt, dass mein Code eben nicht valide ist...

Natuerlich, s.o.

Wie kann ich das ändern?

In dem du es unterlaesst, ein block-Element wie h3 in ein inline-Element wie span zu packen, was nicht erlaubt ist.

Und wo ist jetzt der Zusammenhang zur Thread-Ueberschrift bzw. zur Schriftart-Problematik - er scheint irgendwie durch Nichtexistenz zu glaenzen ...?

MfG ChrisB

[Cheatah]

Hi,

kleine Ergänzung, da sowas normalerweise "aber trotzdem"-Einwände provoziert:

In dem du es unterlaesst, ein block-Element wie h3 in ein inline-Element wie span zu packen, was nicht erlaubt ist.

Der Grundsatz "kein Block in Inline" ist eine Faustregel. Er stimmt *fast* immer und ist *kein* Gesetz.

Cheatah

[suit]

Der Grundsatz "kein Block in Inline" ist eine Faustregel. Er stimmt *fast* immer und ist *kein* Gesetz.

und noch eine anmerkung, wenn man trotzdem ein block-element in ein inline-element packen will, hilft dieses schindluder:
<h3 style="display: inline;"><span syle="display: block;">wakka wakka</span></h3>

[Cheatah]

Hi,

und noch eine anmerkung, wenn man trotzdem ein block-element in ein inline-element packen will, hilft dieses schindluder:

das ist kein Schindluder, sondern absolut korrekter und sinnbehafteter CSS-Code. Bezüglich der Validität: Es bleibt weiterhin und unverändert ein Inline-Element in ein Block-Element geschachtelt.

Cheatah

[suit]

das ist kein Schindluder, sondern absolut korrekter und sinnbehafteter CSS-Code. Bezüglich der Validität: Es bleibt weiterhin und unverändert ein Inline-Element in ein Block-Element geschachtelt.

mir ist klar, dass es absolut korrekt und sinnbehaftet ist bzw sein kann ;) valide ist es auch, darum hab ich es als beispiel betrachtet - aber ein block-element als inline-element zu stylen und umkehrt ist ggf etwas unwürdig, da es dafür meistens einen anderen weg gibt

http://de.wiktionary.org/wiki/Schindluder
[2] Umgangsprachlich: absichtlicher Mißbrauch oder eine absichtliche [...] unwürdige Anwendung von einem Gegenstand/Produkt/Namen.

[Cheatah]

Hi,

mir ist klar, dass es absolut korrekt und sinnbehaftet ist bzw sein kann ;) valide ist es auch, darum hab ich es als beispiel betrachtet - aber ein block-element als inline-element zu stylen und umkehrt ist ggf etwas unwürdig, da es dafür meistens einen anderen weg gibt

jo :-) Worum es mir geht ist der Umstand, dass irgendwelche CSS-Styles an den HTML-Begebenheiten nicht das geringste ändern. Ein Block-Element bleibt ein Block-Element, egal ob es mit display:inline versehen ist, display:table-row-group, display:none oder sonstwas.

Cheatah

[Mario]

Danke für die Belehrung, hatte da wohl was verwechselt.

Wie kann ich das ändern?

In dem du es unterlaesst, ein block-Element wie h3 in ein inline-Element wie span zu packen, was nicht erlaubt ist.

Diese Aussage strotzt ja geradzu vor Sinnigkeit...

Und wo ist jetzt der Zusammenhang zur Thread-Ueberschrift bzw. zur Schriftart-Problematik - er scheint irgendwie durch Nichtexistenz zu glaenzen ...?

Der Zusammenhang besteht darin, dass dort eine Überschrift in h3 hin soll (hat SEO-Gründe), aber nicht kann, wenn es valide sein soll. Also muss ich die Überschrift VOR besagtes inline-Element setzen, dann wiederum stimmt aber meine Schriftart nicht mehr.
Alles, was ich darüber hier bei selfHTML habe finden können, waren CSS-codes, die direkt in das HTML-Gerüst eingebaut werden. Das will ich ja aber nicht ;)

Ich würde mich ja für deine Hilfe bedanken, aber irgendwie glänzt diese genauso durch Nichtexistenz wie, deiner Meinung nach, der Zusammenhang meines Textes im Bezug auf die Thread-Überschrift ;)

[ChrisB]

Hi,

Wie kann ich das ändern?

In dem du es unterlaesst, ein block-Element wie h3 in ein inline-Element wie span zu packen, was nicht erlaubt ist.

Diese Aussage strotzt ja geradzu vor Sinnigkeit...

Ja, manche Dinge sind in der Tat so simpel ...

Und wo ist jetzt der Zusammenhang zur Thread-Ueberschrift bzw. zur Schriftart-Problematik - er scheint irgendwie durch Nichtexistenz zu glaenzen ...?

Der Zusammenhang besteht darin, dass dort eine Überschrift in h3 hin soll (hat SEO-Gründe), aber nicht kann, wenn es valide sein soll. Also muss ich die Überschrift VOR besagtes inline-Element setzen, dann wiederum stimmt aber meine Schriftart nicht mehr.

D'oh!

(So wenig Ahnung, und dann was von "SEO" faseln ...)

Alles, was ich darüber hier bei selfHTML habe finden können, waren CSS-codes, die direkt in das HTML-Gerüst eingebaut werden. Das will ich ja aber nicht ;)

Also hast du alles, was bspw. Selektoren in CSS angeht, komplett uebersehen?

Ich würde mich ja für deine Hilfe bedanken, aber irgendwie glänzt diese genauso durch Nichtexistenz wie, deiner Meinung nach, der Zusammenhang meines Textes im Bezug auf die Thread-Überschrift ;)

Leuten, die nicht in der Lage sind, ihr Problem sinnvoll zu beschreiben, ist im allgemeinen nicht zu helfen.

MfG ChrisB