Homepage | CSS-Tipps

CSS-Layout-Links

Permanente Scrollbalken

Layouts mit wenig Inhalt werden ohne vertikalen Scrollbalken dargestellt und springen um Scrollbalken-Breite nach links, sobald eine Seite mit viel Inhalt geladen wird. Das wirkt ziemlich unruhig.

Folgende zwei Zeilen Code in der CSS-Datei erzwingen einen permanenten Scrollbalken:

/* Scrollbalken erzwingen */
html {height: 100%}   
body {min-height: 101%}

Browserweichen: CSS-Ausnahmen für IE / Firefox

Häufig ist es der Internet-Explorer, für den die CSS-Datei der korrigiert werden muss, damit die Anzeige mit der in anderen Browsern übereinstimmt.

Dazu kann man entweder eine separate CSS-Datei für den Explorer in der HTML-Seite integrieren oder den Befehl in den Head-Bereich aufnehmen.

<head>    
<title>CSS-basiertes Layout</title>    
<link rel="stylesheet" type="text/css" href="basis.css">
<style type="text/css">@import url(modern_ohne_ie.css) all;</style>
<!--[if IE]><style type="text/css">@import url(ie.css);</style><![endif]-->
<!--[if IE 6]><style type="text/css">@import url(ie6.css);</style><![endif]-->
<!--[if lt IE 7]><style type="text/css">@import url(ie5-6.css);</style><![endif]-->      
<!--[if lte IE 5.5999]><style type="text/css">@import url(ie55-.css);</style><![endif]-->
<!--[if gte IE 5.5]><style type="text/css">@import url(ie55+.css);</style><![endif]-->
</head>

Erläuterungen:

[if IE]: alle Versionen (ab 5.0),
[if IE 6]: alle 6er-Versionen,
[if lt IE 7]: alle Version vor 7 (less-than = kleiner als),
[if lte IE 5.5999]: alle Version bis 5.5 (less-than or equal = kleiner oder gleich),
[if gte IE 5.5]: alle Version ab 5.5 (greater-than or equal = größer oder gleich).

mehr unter:

Browserweichen

Anleitungen

Homepage