Thomas Luethi: HILFE! "formate.css" wird nicht benutzt

Beitrag lesen

Hallo,

Ich habe aber mittlerweile den ganzen colgoup-tag rausgeschmissen und einfach <td width="480"> in die mittlere Spalte gecoded. Schlechter Stil?

Die ganze Tabelle an sich ist ueberfluessig und somit schlechter Stil.
(Ja, auch SelfHTML z.T. etwas veraltet... Einerseits ist ueber die Jahre
organisch gewachsen und enthaelt einige Altlasten, andererseits ist
auch die aktuelle Version 8.0 aus dem Jahr 2001...)

Momentan hast Du auf http://www.cyberfrunk.de/kapitel1.html etwa folgendes:

<table width="100%">
<td></td>
<td width="480">
  <p>Navigation</p>
  <h2>Ueberschrift</h2>
  <p>Viel viel viel Inhalt. Bla bla bla</p>
</td>
<td></td>
</table>

Du willst damit den gesamten Inhalt auf eine Breite von 480px zwingen.

Dass das an sich nicht optimal ist und dass - wenn schon -
max-width:480px
oder
max-width:30em
theoretisch besser waeren, habe ich ja schon gesagt
(und Viennemade hat mich sogar zitiert - welche Ehre! ;-)

Die fixe Breite kannst Du genausogut im CSS angeben.
Pack alles in einen DIV und gib diesem die Breite in CSS.
Mit margin:auto rechts und links kannst Du ihn zentrieren,
also links und rechts davon den gleichen Leerraum haben,
wenigstens fuer moderne Browser.
Um den DIV auch in kaputten und veralteten Browsern wie
dem MS IE bis 5.5 zu zentrieren, musst Du noch
text-align:center fuer BODY angeben.
(Oder allenfalls einen weiteren DIV darum packen und
fuer diesen text-align:center angeben, was ich allerdings
ueberfluessig finde.)

HTML:
<body>
<div class="layoutblock">
  <p>Navigation</p>
  <h2>Ueberschrift</h2>
  <p>Viel viel viel Inhalt. Bla bla bla</p>
</div>
</body>

CSS:
body { text-align:center; }
div.layoutblock { width:480px; margin-left:auto; margin-right:auto; text-align:left; }

Und ja, ich weiss, dass man statt einer Klasse auch eine ID nehmen koennte,
solange man nur einen einzigen DIV pro HTML-Seite hat, der diese
Eigenschaften haben soll.
HTML:
<div id="layoutblock">
Das CSS wuerde dann zu:
#layoutblock { ... }
oder
div#layoutblock { ... }
wobei die zweite Schreibweise des Selektors
AFAIK in gewissen Browsern nicht erkannt wird.
Fuer mich mithin ein Grund, keine IDs zu verwenden.

Zum Zentrieren von Block-Level-Elementen siehe auch:
http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/
http://www.netandmore.de/faq/fom-serve/cache/1239.html
http://www.tiptom.ch/homepage/faq.html?q=tabzentriert
(In den meisten Beispielen wird eine Tabelle zentriert, aber man
kann mit den gleichen Methoden auch andere Elemente zentrieren.)

Gruesse,

Thomas

--
Bitte keine Mails mit Fachfragen - dafuer gibt es das Forum!
Ich mag es, wenn URLs verlinkt sind (</faq/#Q-19>).
Oft gestellte PHP-Fragen beantwortet die dclp-FAQ bestens: http://www.dclp-faq.de/