tiptom.ch Home
http://www.tiptom.ch/homepage/ - Homepage-Tips von Thomas Lüthi

FAQ zum Homepage-Erstellen

Alle Fragen und Antworten:

Wie kriege ich den Abstand zwischen Inhalt und Fensterrand weg?
(Wie mache ich, dass die Seite ganz oben links im Browserfenster klebt?)

Mit CSS:
body { margin:0; padding:0; }

Zudem muss der obere Aussenabstand des ersten Elements ggf. auf Null gesetzt werden:

CSS:
#element1 { margin-top:0; }
HTML:
<body>
  <table id="element1"> <!-- u.s.w. -->

(Gemäss der CSS-2.0-Spezifikation [1998] könnte man den CSS-Selektor "1. Kinds-Element von BODY" theoretisch auch so schreiben:
body>*:first-child { /*...*/ }
Dies funktioniert aber nur in moderneren Browsern, z.B. MS Internet Explorer ab Version 7 oder Firefox, wie diese Beispielseite zeigt.)

Wenn das erste Element immer die H1-Überschrift ist, geht es auch ohne ID bzw. Klasse:

CSS:
h1 { margin-top:0; }
HTML:
<body>
  <h1>Überschrift</h1>

So sieht's aus:

Nur dieser FAQ-Eintrag:
Wie kriege ich den Abstand zwischen Inhalt und Fensterrand weg?
(Wie mache ich, dass die Seite ganz oben links im Browserfenster klebt?)
http://www.tiptom.ch/homepage/faq.html?q=bodymargin

Wie kann ich eine Tabelle horizontal und vertikal zentrieren?

Das horizontale Zentrieren eines Block-Elements (z.B. einer Tabelle) ist mit CSS ziemlich einfach zu lösen: Das umgebende Element (z.B. body), erhält für veraltete Browser (z.B. Netscape 4, MS IE bis 5.5 sowie 6.0 im "Quirks" Modus) text-align:center;, das Element selbst erhält - falls notwendig - eine Breitenangabe (width), zum zentrieren in guten Browsern die Angaben margin-left:auto; margin-right:auto; sowie, um den Inhalt wieder linksbündig auszurichten, text-align:left;

body
  {
   text-align:center; /* fuer Netscape 4 und MS IE */
  }
table
  {
   width:30em;
   margin-left:auto; margin-right:auto;
      /* Fuer gute Browser */
   text-align:left;
      /* Text _in_ der Tabelle links ausrichten */
  }

Hinweis: Dieser Teil der Lösung steht auch in der dciwam-FAQ und im Artikel "Ausrichtung von Block-Level-Elementen" in SelfHTML

Etwas kniffliger ist es mit dem vertikalen Zentrieren.

Modernes, "sauberes" Beispiel ohne Tabellen

Mit zwei äusseren DIV-Elementen, von denen das äussere mit display:table und das innere mit display:table-cell ausgezeichnet wird, kann man auch vertical-align:middle anwenden und somit ein drittes, innerstes DIV-Element zentrieren. Alles ohne Tabellen.

html, body { width:100%; height:100%; margin:0; padding:0; }
div.aussentable
  { width:100%; height:100%; margin:0; padding:0; display:table; }
div.aussentd
  { width:100%; height:100%; margin:0; padding:0;
    display:table-cell; vertical-align:middle; }
div.innen
  { width:30em; margin-left:auto; margin-right:auto; text-align:left; }

<body>
  <div class="aussentable">

    <div class="aussentd">
      <div class="innen">
        <h1>Überschrift</h1>
        <p>Inhalt ...</p>
      </div>
    </div>
  </div>
</body>

So sieht's aus: Beispielseite.

Dieses Beispiel funktioniert nur in modernen Browsern, z.B. in Firefox, MS Internet Explorer 8 und 9 oder Mozilla, aber nicht in veralteten Browsern wie MS Internet Explorer (bis Version 7) oder Netscape 4.

Mit der gleichen Methode kann man ein Bild oder einen Link als einzigen Inhalt einer Seite zentriert anzeigen: zentriertes Bild, zentrierter Link.

Veraltetes, zuverlässiges Beispiel mit Tabellen

Eine veraltete, nicht sehr saubere und elegante, dafür recht "zuverlässige" Methode besteht darin, eine äussere Tabelle mit einer einzigen Zelle zu machen und den Inhalt dieser Zelle horizontal und vertikal zu zentrieren.

Wichtiger Hinweis: Dies ist ein "Missbrauch" von Tabellen zu Layout-Zwecken, verstösst gegen die Empfehlungen des World Wide Web Consortiums (W3C) und entspricht nicht der "reinen Lehre".

Damit die äussere Tabelle die ganze Höhe und Breite des Browserfensters belegt, muss man die Höhe und Breite für die diese Tabelle sowie die Elemente HTML und BODY auf 100% setzen.
Für das innere, zentrierte Block-Level-Element muss man
margin-left:auto; margin-right:auto;
schreiben und ggf. eine Breitenangabe machen, z.B. wenn es sich um ein DIV-Element handelt, welches sonst die ganze zur Verfügung stehende Breite einnähme.

html, body { width:100%; height:100%; }
table.aussen { width:100%; height:100%; }
table.aussen td { text-align:center; vertical-align:middle; }

div.innen
{
margin-left:auto; margin-right:auto;
width:30em; text-align:left;
}

<body>
<table class="aussen"><tr><td>
<div class="innen">Zentrierter DIV</div>
</td></tr></table>
</body>

So sieht's aus: Beispielseite mit zentrierter Tabelle und Beispielseite mit zentriertem DIV-Block (beide veraltet, aber valide).

Diese Beispiele "funktionieren" in Mozilla, MS Internet Explorer 5 und 6, Opera und den meisten anderen modernen Browsern.

Wenn man innerhalb eines zentrierten DIV-Blocks weitere Elemente mit position:absolute; ausrichten will, kann man die Regel für DIV noch ergänzen:
div.innen { position:relative; /*...*/ }

So sieht's aus: Beispielseite mit zentriertem DIV-Block (zusätzlich mit position:relative). Der DIV-Block seinerseits enthält absolut positionierte Elemente. (Veraltet, aber valide).

Wenn man auch für den veralteten, sehr seltenen Browser Netscape 4.x ein vertikales Zentrieren erreichen will, muss man der äusseren Tabelle ein height-Attribut geben und hat somit nicht nur veralteten, sondern auch nicht standardkonformen HTML-Quellcode.

So sieht's aus: Beispielseite (veraltet, nicht valide!)

Weitere Ansätze

Eine Möglichkeit ist, der Tabelle, die zentriert werden soll, eine Höhenangabe in Prozent sowie eine Mindest-Höhe in einer anderen Einheit (z.B. em oder px) zu geben und den oberen und unteren Aussenabstand mit gleichen Prozent-Werten anzugeben.
table { height:60%; min-height:10em; margin-top:20%; margin-bottom:20%; }
(20 + 60 + 20 = 100).

Wenn der Inhalt der Tabelle bekannt ist, kann man die Höhe und die Breite in Einheiten wie em oder px angeben und nur den oberen und unteren Aussenabstand mit Prozentwerten, z.B. so:
table { height:10em; margin-top:20%; margin-bottom:20%; }

Vollständiges Beispiel:

body
  {
   margin:0; border:0 none; padding:0;
   text-align:center; /* fuer Netscape 4 und MS IE */
  }
table
  {
   height:60%; min-height:10em;
   width:30em;
   margin-left:auto; margin-right:auto;
      /* Fuer gute Browser */
   margin-top:20%; margin-bottom:20%;
   text-align:left; /* Text _in_ der Tabelle links ausrichten */
  }

So sieht's aus: Beispielseite.

Dieses Beispiel "funktioniert" vermutlich nicht richtig, und auch wenn die Tabelle schön in der Mitte des Browserfensterst steht, ist das vielleicht nur der Fall, weil das Fenster gerade die richtige Höhe hat.

Bei wpdfd.com gibt es ein weiteres Beispiel, wo eine "Box" mit (in Pixeln) festgelegter Grösse mit CSS (position) zentriert wird:
Beispielseite
http://www.wpdfd.com/editorial/thebox/deadcentre3.html
 - Erklärung dazu
http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Ebenfalls mit absoluter Positionierung arbeitet der Lösungsvorschlag im Beitrag Wie kann ich Inhalte genau in der Mitte des Anzeigefensters positionieren?
http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte
 in der FAQ zu SelfHTML

Im Artikel Horizontal und vertikal zentrieren mit XHTML und CSS
http://suit.rebell.at/artikel/horizontal-und-vertikal-zentrieren-mit-xhtml-und-css
 (Beispielseite) schlägt Sigfried Arnold (suit) vor, oben an der Box, die zentriert werden soll, einen leeren DIV zu plazieren, der die halbe Höhe des Browserfensters einnimmt und der unten einen negativen Abstand hat, der die Hälfte der Höhe der zu zentrierenden Box beträgt.

Nur dieser FAQ-Eintrag:
Wie kann ich eine Tabelle horizontal und vertikal zentrieren?
http://www.tiptom.ch/homepage/faq.html?q=tabzentriert

Warum hat es um die Bilder in Tabellenzellen Abstände?
Wie kriege ich sämtliche Rahmen und Abstände in einer Tabellenzelle weg?

  1. In HTML alle Leerzeilen und Zeilenumbrüche im Quelltext zwischen <td> und </td> entfernen:
    Statt so:
    <td> <img src="..." alt="..."> <td>
    oder so:
    <td>
     <img src="..." alt="...">
    <td>
    unbedingt so:
    <td><img src="..." alt="..."><td>

    Erklärung:
    Sobald in der Zelle ein Leerzeichen vorkommt, setzen viele Browser die Höhe auf den Wert einer Textzeile. (Dieser kann in CSS mit line-height explizit gesetzt werden, sonst nehmen die Browser meist die implizite Zeilenhöhe von ca. 1.20em.)
    Zeilenumbrüche im HTML-Quelltext wirken bei der Anzeige wie ein Leerzeichen.

  2. Mit CSS alle Rahmen und Abstände auf Null setzen sowie den Zelleninhalt nach unten ausrichten:

    table { border:0 none; border-spacing:0; border-collapse:collapse; }
    td { border:0 none; padding:0 none; }
    td img { display:block; /* und/oder */ vertical-align:bottom; }

    Erklärung für display:block siehe:
    Artikel "Images, Tables, and Mysterious Gaps" von Eric A. Meyer.
    https://meyerweb.com/eric/articles/devedge/img-table-gaps/

  3. Wenn uralte Browser und solche mit abgeschaltetem CSS auch berücksichtigt werden sollen, kann man in HTML zusätzlich noch die (veralteten) Attribute im TABLE-Tag angeben:
    <table border="0" cellspacing="0" cellpadding="0">

So sieht's aus: Beispielseite.

Nur dieser FAQ-Eintrag:
Warum hat es um die Bilder in Tabellenzellen Abstände?
Wie kriege ich sämtliche Rahmen und Abstände in einer Tabellenzelle weg?
http://www.tiptom.ch/homepage/faq.html?q=tdimg

Wie erreiche ich, dass eine Tabellenzelle bei MouseOver die Farbe wechselt bzw. ein klickbarer "Link" ist?

Gemäss der CSS 2.0 Spezifikation kann man die Pseudoklasse :hover für beliebige Elemente verwenden, also z.B. auch für eine Tabellenzelle, eine ganze Tabellenzeile oder auch für beliebige andere Block-Level- und Inline-Elemente.

Mozilla, Opera (ab Version 7) und andere moderne Browser ändern dann die Farben und anderen angegebenen Eigenschaften, wenn der Mauszeiger über der Tabellenzelle bzw. über dem betreffenden Element ist.

Der MS Internet Explorer kann das bis Version 6.0 leider nicht.

1. Mit CSS

a) Link in Tabellenzelle

Mit CSS kann man sagen, dass der Link die Tabellenzelle vollständig ausfüllen soll.

Eigentlich sollte dafür td a { display:block } reichen, aber für den MS Internet Explorer ist es oft zusätzlich notwendig, auch noch width:100%; hinzuzufügen.

Komplettes Beispiel:
HTML:
<td><a href="bla.html">Linktext</a></td>
CSS:
td a { display:block; width:100%; }

So sieht's aus: Beispiele.

b) Tabellenzelle ohne Link

Für moderne Browser (Mozilla, Opera 7) reicht für den Farbwechsel einer Tabellenzelle:
td:hover { color:#660000; background-color:#ffff66; }
Der MS Internet Explorer kann das bis Version 6.0 leider nicht.

So sieht's aus: Beispiele.

2. Mit JavaScript

a) Farbe bzw. Klasse einer Zelle oder Zeile wechseln

HTML:
<td class="normal" onmouseover="this.className='spezial';" onmouseout="this.className='normal';">Text</td>
bzw.
<tr class="normal" onmouseover="this.className='spezial';" onmouseout="this.className='normal';"> <td>Text1</td> <td>Text2</td> </tr>
CSS:
.normal { color:#000000; background-color:#ffffff; }
.spezial { color:#660000; background-color:#ffff66; }

Erklärung:
Mit onmouseover="this.className='spezial';" wechselt man die Klasse der Zelle bzw. Zeile, solange der Mauszeiger sich über der Zelle/Zeile befindet.
Mit onmouseout="this.className='normal';" setzt man wieder die ursprüngliche Klasse, sobald die Maus die Zelle/Zeile verlässt.

a) Farbe bzw. Klasse einer Zelle oder Zeile wechseln sowie ganze Zelle/Zeile zu einem klickbaren Link machen:

HTML:
<td class="normal" onmouseover="this.className='spezial';" onmouseout="this.className='normal';" onclick="window.location.href='http://www.example.com/';">Text</td>
bzw.
<tr class="normal" onmouseover="this.className='spezial';" onmouseout="this.className='normal';" onclick="window.location.href='http://www.example.com/';"> <td>Text1</td> <td>Text2</td> </tr>
CSS:
.normal { color:#000000; background-color:#ffffff; }
.spezial { color:#660000; background-color:#ffff66; cursor:pointer; }

Erklärung:
Mit onclick="window.location.href='http://www.example.com/';" wird die ganze Zelle bzw. Zeile zu einem "Link", d.h. wenn der Benutzer irgendwo auf die Zelle/Zeile klickt, wird die Ziel-URL im gleichen Fenster geladen.

Mit der CSS-Angabe cursor:pointer sagt man dem Browser, dass er als Cursor das Symbol nehmen soll, das er auch bei normalen Links anzeigt (oft eine Art "Händchen").
MS Internet Explorer kennt cursor:pointer erst ab Version 6.0; für ältere Versionen müsste man proprietären, nicht validen CSS-Quellcode verwenden: cursor:hand
Um sowohl anständige Browser als auch MS Internet Explorer 5.x zu bedienen, muss man offenbar folgendes schreiben:
{ cursor: pointer; cursor: hand; }
Siehe auch: Quirksmode.org - Cursor styles
http://www.quirksmode.org/css/cursor.html#pointer

Wichtig: Sorgen Sie dafür, dass alle Inhalte auch ohne CSS und JavaScript erreichbar sind! Bieten Sie auch ganz normale Links an, und verwenden Sie obige JavaScript-Spielereien (klickbare Zellen als "Link") nur in Ergänzung zu einer normalen Navigation.

So sieht's aus: Beispiele.

Nur dieser FAQ-Eintrag:
Wie erreiche ich, dass eine Tabellenzelle bei MouseOver die Farbe wechselt bzw. ein klickbarer "Link" ist?
http://www.tiptom.ch/homepage/faq.html?q=zellelink

Wie kann ich bei Tabellen die Attribute border, cellspacing, cellpadding durch CSS ersetzen?

Durch Anwendung der CSS-Eigenschaften border, padding, border-spacing und border-collapse auf die Elemente table und td/th.

table { border: ... }
bestimmt den Aussenrahmen der ganzen Tabelle, ersetzt also (teilweise) das HTML-Attribut border.
table { border-collapse: ... border-spacing: ... }
bestimmt den Abstand zwischen den Rahmen der einzelnen Tabellenzellen und auch zwischen diesen Rahmen und dem Aussenrahmen der ganzen Tabelle, ersetzt also das HTML-Attribut cellspacing.
Zusammenfallende Rahmen (kein Abstand):
table { border-collapse:collapse; border-spacing:0; }
Getrennte Rahmen:
table { border-collapse:separate; border-spacing:10px; }
Hinweis: MS IE 6.0 kennt border-spacing noch nicht.
td, th { border: ... }
bestimmt den Rahmen der einzelnen Tabellenzellen, ersetzt also (teilweise) das HTML-Attribut border.
td, th { padding: ...}
bestimmt den Innenabstand der Tabellenzellen zu ihrem Inhalt, ersetzt also das HTML-Attribut cellpadding.

So sieht's aus: Beispielseite mit verschiedenen Tabellen.

Links:

Hinweis: Tabellenzellen (td, th) haben keinen margin (siehe CSS 2 Specification).

Nur dieser FAQ-Eintrag:
Wie kann ich bei Tabellen die Attribute border, cellspacing, cellpadding durch CSS ersetzen?
http://www.tiptom.ch/homepage/faq.html?q=tableborder

Wie kann ich CSS vor Netscape Navigator 4.x verstecken?

Viele Wege führen zum Ziel:

Im STYLE-Bereich im HEAD der HTML-Datei und in externen Stylesheet-Dateien:
@media screen { /* versteckte CSS-Anweisungen */ }

Beim Einbinden von externen Stylesheet-Dateien:

Link: Allgemeines zum Verstecken von CSS:

Nur dieser FAQ-Eintrag:
Wie kann ich CSS vor Netscape Navigator 4.x verstecken?
http://www.tiptom.ch/homepage/faq.html?q=nn4keincss

Wie wird ein Zeilenumbruch codiert?

Zeilenumbrüche in verschiedenen Betriebssystemen

Betriebssystem Name ASCII dezimal hexadezimal oktal PHP
Windows CR LF (Carriage Return, Line Feed) 13 10 0D 0A 15 12 \r\n
Mac Classic (bis OS 9) CR (Carriage Return) 13 0D 15 \r
Unix, Linux, Mac ab OS X LF (Line Feed) 10 0A 12 \n

Zeilenumbruch in HTML und XHTML

Ein Zeilenumbruch im HTML-Quellcode wird bei der Anzeige normalerweise wie ein Leerzeichen behandelt und erzeugt somit keinen sichtbaren Zeilenumbruch. Mehrere Zeilenumbrüche und Leerzeichen werden normalerweise zu einem einzigen Leerzeichen zusammengefasst.
Das ist so definiert in der HTML-4.01-Specification im Abschnitt zu White Space
http://www.w3.org/TR/html401/struct/text.html#whitespace
(Nur zwischen <pre> und </pre> gelten andere Regeln - die meisten Browser verhalten sich dort so: Alle Leerzeichen werden angezeigt, umgebrochen wird nur dort, wo auch im HTML-Quelltext ein Zeilenumbruch steht, und alle Buchstaben sind gleich breit.)

Um einen sichtbaren Zeilenumbruch zu kriegen, schreibt man
in HTML: <br>
in XHTML: <br />

Zeilenumbruch erzeugen in PHP

Die Zuordnung in obiger Tabelle ("\n" <=> LF, "\r" <=> CR) steht so im PHP-Manual, Abschnitt zu Strings
http://www.php.net/manual/de/language.types.string.php#language.types.string.syntax.double

Diese Angaben betreffen vermutlich nur den (üblichen) Fall, dass man mit einem PHP-Skript Text erzeugt (z.B. HTML-Quelltext), der direkt an den Browser ausgegeben wird.
In dem Fall reicht es normalerweise, "\n" zu schreiben
(N.B. Es müssen doppelte Anführungszeichen sein.)

Anders sieht es aus, wenn man mit einem PHP-Skript Dateien liest und schreibt. Dann kann PHP den String "\n" je nach Konfiguration auch in den Zeilenumbruch des betreffenden Betriebssystems umwandeln.
Detaillierte Informationen siehe PHP-Manual zu fopen()
http://www.php.net/manual/en/function.fopen.php

Wenn man also sicher sein will, dass ein Zeilenumbruch z.B. im Windows-Format "CR LF" gespeichert wird, muss man ihn über die numerischen Codes beschreiben, z.B. mit chr(13).chr(10), hexadezimal als "\x0D\x0A" oder oktal als "\15\12".

In PHP gibt es die praktische Funktion nl2br() (new line to break), die alle Vorkommen von "\n" durch "<br />\n" ersetzt.

Zeilenumbruch erzeugen in JavaScript

Um in JavaScript-Ausgaben - z.B. bei alert() - einen Zeilenumbruch zu erzeugen, reicht meistens "Backslash n":
"\n"

Zeilenumbruch erzeugen in Perl

Auch in Perl bewirkt "\n" offenbar unter Umständen, dass ein Zeilenumbruch im Stil des jeweiligen Betriebssystems erzeugt wird. Das kann also "CR LF", "CR" oder "LF" sein.

Wenn man mit Perl Dateien bearbeitet und sicher sein will, dass diese auf einem bestimmten Betriebssystem lesbar sind, ist es demzufolge - wie bei PHP - am sichersten, die Zeilenumbrüche mit ihren numerischen Codes zu codieren.

Im Februar 2004 gab es im Forum zu SelfHTML eine Diskussion zum Thema:
"(PROGRAMMIERTECHNIK) \r, \n oder \r\n ?"
http://forum.de.selfhtml.org/archiv/2004/2/71954/

Nur dieser FAQ-Eintrag:
Wie wird ein Zeilenumbruch codiert?
http://www.tiptom.ch/homepage/faq.html?q=zeilenumbruch

Druckversion anzeigen!

(nach oben) Zum Seitenanfang

Alle Rechte beim Autor: Thomas Lüthi.
E-Mail: info@tomogramm.ch (Bitte keine Werbung zusenden)

Zuletzt bearbeitet am 10.01.2020

URL dieser Seite: http://www.tiptom.ch/homepage/faqs.html

Normalversion dieser Seite