CSS/html kleine Schriftgröße "fett" machen

[Klaus]

Hallo,

inzwischen kenne ich mich mit html, css und php ein wenig aus. aber trotzdem klingt meine frage zunächst ein bisschen simpel, aber ich bekomme es einfach nicht raus.
also ich habe eine datei, bei der ich eine ziemlich kleine Schriftgröße haben will. die frage soll "fett" sein, die antwort jedoch normal.

meine erste idee, war das meine Idee:
index.php
<p><table border="0"><tr><td><table border="0"><tr><td><h6><b>Position:</b>Tor</td></tr>

hier macht das <b> jedoch nichts aus. ich kann es schreiben oder weglassen, frage und antwort ist "fett".

meine zweite idee war dann:

index.php
<p><table border="0"><tr><td><table border="0"><tr><td><h6><b>Position:</b>Tor</td></tr>

css-Datei
h6 { font-size: 10px; line-height: 12px;}

auch hier ist das <b> egal, ich kann es schreiben oder weglassen. wenn ich aber font-size und line-height um ein pixel erhöhe. ist wieder frage und antwort "fett".

Nun meine Frage: Wie schaffe ich es, dass die "Frage" fett ist und die Antwort normal? Dabei soll die Schriftgröße (font-size) jedoch zwischen 10 und 13 pixel liegen.

Vielen Dank schon im vorraus....

Klaus

[suit]

Bestimmte Schriften können ab bestimmten Schriftgrößen nicht mehr Fett dargestellt werden - bzw. überhaupt nicht mehr Dargestellt werden. Dann werden sie durch Systemschriften ersetzt, die auch mit sehr kleinen Lettern noch lesbar sind.

[apsel]

Om nah hoo pez nyeetz,

index.php
<p><table border="0"><tr><td><table border="0"><tr><td><h6><b>Position:</b>Tor</td></tr>

hier macht das <b> jedoch nichts aus. ich kann es schreiben oder weglassen, frage und antwort ist "fett".

1. Hast du vergessen, das <h6> zu schließen und 2. wird es daran liegen, dass <h6> browserintern in  ormatierung für "Frage" und eine für "Antwort".

Außerdem solltest du dich damit auseindersetzen, ob eine Tabelle wirklich benötigt wird.

Matthias

[suit]

Außerdem solltest du dich damit auseindersetzen, ob eine Tabelle wirklich benötigt wird.

"Eine" ist gut :) den muss ich mir merken.

[Klaus]

Hallo,

der "quelltext" ist nur ein auschnitt und wenn man den ganzen quelltext sieht, dann merkt man, dass die tabellen doch ganz sinnvoll sind....

lg
Klaus

[suit]

der "quelltext" ist nur ein auschnitt und wenn man den ganzen quelltext sieht, dann merkt man, dass die tabellen doch ganz sinnvoll sind....

Du erlaubst: das Glaube ich jetzt pauschal nicht :)

[apsel]

Om nah hoo pez nyeetz,

1. Hast du vergessen, das <h6> zu schließen und 2. wird es daran liegen, dass <h6> browserintern in

einer fetten Formatierung gespeichert ist. Um das zu umgehen, musst du die Formatierung für <h6> ändern oder besser noch eine Formatierung für "Frage" und eine für "Antwort" machen.

Außerdem solltest du dich damit auseinandersetzen, ob eine Tabelle wirklich benötigt wird.

Matthias

[Klaus]

Hallo Matthias,

da hast du mir gerade einen guten tipp gegeben....

vielen Dank
Klaus

[Der Martin]

Hi,

inzwischen kenne ich mich mit html, css und php ein wenig aus.

deine HTML- und CSS-Beispiele lassen erkennen, dass es wirklich nur ein wenig ist.

<p><table border="0"><tr><td><table border="0"><tr><td><h6><b>Position:</b>Tor</td></tr>

Fehler: p darf kein table enthalten.
Fehler: Das h6-Element ist nicht geschlossen.
Redundanz: border="0" ist der Defaultwert und kann weggelassen werden.

Und eine Tabelle in einer Tabelle? Ich glaube nicht, dass das deine Dokumentstruktur passend beschreibt.
Ebensowenig halte ich eine Überschrift 6. Ordnung hier für angemessen - wer zum Geier verwendet 6 Gliederungsebenen? Aber wenn es schon eine Tabelle sein soll, bietet sich vielleicht eher ein th-Element an, anstatt ein td mit eingebautem h6.

hier macht das <b> jedoch nichts aus. ich kann es schreiben oder weglassen, frage und antwort ist "fett".

Das liegt vermutlich daran, dass font-weight:bold schon die Default-Formatierung des h6-Elements ist.

h6 { font-size: 10px; line-height: 12px;}
auch hier ist das <b> egal, ich kann es schreiben oder weglassen. wenn ich aber font-size und line-height um ein pixel erhöhe. ist wieder frage und antwort "fett".

Lass dich nicht täuschen: Je nachdem, wie groß eine Schrift am Bildschirm angezeigt wird, kann es sein, dass Normal- und Fettschrift nicht mehr unterscheidbar sind. Im Zweifelsfall vergrößere einfach mal die Anzeige im Browser z.B. auf 200%.
Oder verwende ein Werkzeug wie Firebug, dann siehst du direkt, welche Formatierungen wirklich für welches Element gelten, und woher sie kommen.

Nun meine Frage: Wie schaffe ich es, dass die "Frage" fett ist und die Antwort normal? Dabei soll die Schriftgröße (font-size) jedoch zwischen 10 und 13 pixel liegen.

Das ist, wie ich oben angedeutet habe, bei so kleinen Schriften manchmal problematisch. Bei sehr kleiner Schrift würde ich empfehlen, auf Fettdruck zu verzichten und den Effekt stattdessen über unterschiedliche Farben zu realisieren - also z.B. tiefschwarz (#000) anstatt fett, und ein etwas leichteres Grau (#666) für normale Schrift (jedenfalls für die Bildschirmdarstellung).

Vielen Dank schon im vorraus....

Wo bitte?

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

<p><table border="0"><tr><td><table border="0"><tr><td><h6><b>Position:</b>Tor</td></tr>

Fehler: p darf kein table enthalten.

Tut es auch nicht. Das End-Tag vom 'p'-Elementtyp ist in HTML 4.01 optional. Das 'p'-Element wird mit dem Start-Tag des ersten Elements, das nicht in ihm vorkommen darf, implizit geschlossen.

Also kein Fehler. Aber natürlich eine Unschönheit (die aber bei den vielen anderen nicht weiter auffällt).

Fehler: Das h6-Element ist nicht geschlossen.

Hier hast du recht.

Und eine Tabelle in einer Tabelle? Ich glaube nicht, dass das deine Dokumentstruktur passend beschreibt.

Und hier auch. Meine Glaskugel sagt, dass "Position:"/"Tor" nicht das einzige „Frage-Antwort“-Paar ist. Das Markup könnte so aussehen:

<dl>  
  <dt>Position:</dt>  
  <dd>Tor</dd>  
  ⋮  
</dl>

Oder "Position" ohne Doppelpunkt; dieser wird mittels CSS dargestellt:
dt:after { content: ":" }

Qapla'

[Der Martin]

Hallo Gunnar,

<p><table border="0"><tr><td><table border="0"><tr><td><h6><b>Position:</b>Tor</td></tr>
Fehler: p darf kein table enthalten.
Tut es auch nicht.

das siehst du so, der Validator auch, die Spezifikation auch.
Klaus auch?

Im Lauf der Zeit entwickelt man eine gewisse Übung in der Mustererkennung. Wenn man beispielsweise so etwas sieht:

text text text<p>
   foo bar<p>
   noch mehr text<p>

dann ist die Wahrscheinlichkeit groß, dass der Autor eigentlich

<p>text text text</p>
   <p>foo bar</p>
   <p>noch mehr text</p>

gemeint hat. Ebenso bin ich nahezu sicher, dass der Autor gemeint hat, sein table-Element stünde *innerhalb* eines Absatzes, wenn er die öffnenden p- und table-Tags unmittelbar hintereinander notiert. Also weise ich ihn auf seinen Denkfehler hin.

Das End-Tag vom 'p'-Elementtyp ist in HTML 4.01 optional. Das 'p'-Element wird mit dem Start-Tag des ersten Elements, das nicht in ihm vorkommen darf, implizit geschlossen.

Ein validierender Parser macht das so. Ein ordentlicher Browser auch. Ein IE? Hmm, kein Kommentar. Der macht so einiges ...

Und eine Tabelle in einer Tabelle? Ich glaube nicht, dass das deine Dokumentstruktur passend beschreibt.

Und hier auch. Meine Glaskugel sagt, dass "Position:"/"Tor" nicht das einzige „Frage-Antwort“-Paar ist. Das Markup könnte so aussehen:

<dl>

<dt>Position:</dt>
  <dd>Tor</dd>
  ⋮
</dl>

  
Könnte es. In diesem Fall halte ich aber auch die Tabelle (Singular!) für berechtigt. Allerdings nicht noch eine zweite außenrum.  
  
Ciao,  
 Martin  

-- 
Alleine sind wir stark ...  
gemeinsam sind wir unausstehlich!  

[Beat]

<p><table border="0"><tr><td><table border="0"><tr><td><h6><b>Position:</b>Tor</td></tr>
Fehler: p darf kein table enthalten.
Tut es auch nicht.

das siehst du so, der Validator auch, die Spezifikation auch.
Klaus auch?

Das nikolaust dich aber nicht dazu, irreführende Hinweise zu geben.

Ebenso bin ich nahezu sicher, dass der Autor gemeint hat, sein table-Element stünde *innerhalb* eines Absatzes, wenn er die öffnenden p- und table-Tags unmittelbar hintereinander notiert.

Ach ich glaube viel eher, er hat das bischen default-margin zweckentfremdet.

mfg Beat

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Wenn man beispielsweise so etwas sieht:
   text text text<p>
   foo bar<p>
   noch mehr text<p>

Als ich vor etwa 15 Jahren mit HTML in Berührung kam, dachte ich tatsächlich, '<p>' stünde für Absatzumbruch (Zeilenumbruch mit etwas Abstand).

Und meine ersten Quelltexte sahen genau so aus.

dann ist die Wahrscheinlichkeit groß, dass der Autor eigentlich
   <p>text text text</p>
   <p>foo bar</p>
   <p>noch mehr text</p>

Ich hab mich gebessert.

Qapla'

[suit]

Und meine ersten Quelltexte sahen genau so aus.

Lass mich raten: Später hast du festgestellt, dass man mit folgendem Markup noch viel größere Zeilenabstände erreichen kann.

text text text<p>&nbsp;</p>
foo bar<p>&nbsp;</p>
noch mehr text<p>&nbsp;</p>

SCNR

[apsel]

Om nah hoo pez nyeetz,

Redundanz: border="0" ist der Defaultwert und kann weggelassen werden.

Ist aber ein schönes Instrument zur Fehlersuche, wenn man denn Tabellen als Gestelle missbraucht.

Matthias