Seitengestaltung mit CSS
Bevor man sich an das Gestalten einer Webseite begibt, sollte man sich zuerst einmal überlegen, was die Webseite überhaupt beinhalten soll. Abhängig vom Inhalt des gesamten Webauftritts kann das Layout gewählt werden. Beispielsweise sind Musik- oder Filmseiten eher stark grafisch aufbereitet, während Firmenpräsentationen vielleicht eher nüchtern daher kommen. Trotzdem kann man das Layout im begrenzten Maß strukturieren.
Zen Garden
Der gleiche Inhalt mit den unterschiedlichsten CSS Layouts gestaltet.
Trennung von Inhalt und Layout
Es ist äußerst wichtig, Inhalt und Layout voneinander zu trennen. So muss es in jeder Seite, unabhängig davon, wie diese aussehen mag, möglich sein, das Layout allein durch CSS darzustellen. Zen Garden ist dazu das Beispiel schlechthin. Man kann, wenn man gut genug ist, sein eigenes Stylesheet dort vorstellen; es wird dann dort entschieden, ob es auf der Seite veröffentlicht wird. Inzwischen gibt es dort hunderte von Layouts, welche den exakt gleichen Inhalt darstellen und trotzdem völlig unterschiedlich aussehen. Ich werde die Trennung von Inhalt und Layout z.B. dazu nutzen, um bei veralteten Browsern trotzdem die Seite lesbar darzustellen. Auch gibt es die Möglichkeit, spezielle Layouts (mit gleichem Inhalt) für Drucker oder auch für webfähige Handys zu erzeugen.
Wie geht man vor?
Da die Trennung von Code und Layout ungewohnt ist und schwierig zu realisieren erscheint, sollte man sich selbst zuerst einmal Disziplin auferlegen:
- In der HTML-Datei gibt es kein CSS. Alle CSS-Formatierungen sind in einem getrennten Stylesheet.
- Ohne Stylesheet muss die Seite bequem lesbar sein. Schalten Sie während der Entwicklung von Zeit zu Zeit einmal das Stylesheet aus und sehen Sie sich die Seite an.
- Tabellen werden nicht benutzt, um Layouts zu erzeugen. Layouts werden mit CSS gemacht, Tabellen mit Tabellen.
Prinzipieller Aufbau einer Webseite
Eine Webseite kann fast beliebig aufgebaut sein. Ich habe sie bestehend aus einem Kopfbereich (Header), einem linken Bereich, einem rechten Bereich, einem Mittelteil und einem Fußbereich (Footer) definiert. Damit hat man die wesentlichen Bereiche der Webseite erfasst und kann nun seine eigene Seite gestalten, indem man die nicht benötigten Teile weglässt. Beispiel: Bei einer Seite mit Header, linker Seite und Mittelteil lässt man die rechte Seite und Footer weg. Ich werde später dazu Beispiele zeigen. Die verbleibenden Bereiche haben unterschiedliche Funktionen und können mittels CSS unterschiedlich dargestellt werden.
Header
Der Header hat die Funktion, der Webseite eine Identität zu geben. Typischerweise enthält der Header ein Logo, vielleicht ein Hintergrundbild, einen Seitentitel, und möglicherweise noch ein Menü. Der Header kann feststehend am oberen Rand des Browsers sein, wobei der Rest der Seite scrollen kann; er kann aber auch mitscrollen. Der Header und damit auch die ganze Seite kann eine feste Breite haben, er kann sich aber auch auf die Breite des Browserfensters ausdehnen.
Footer
Dem Footer wird oft die Funktion gegeben, Impressum, Kontakte und das sogenannte Kleingedruckte darzustellen. Es ist nicht zwingend notwendig, einen Footer zu haben; ich empfehle es aber. Der Footer kann feststehend am unteren Ende des Browserfensters positioniert sein; er kann aber auch mit der Seite mitscrollen.
Linker Bereich
In vielen Seiten wird die Navigation als ein- oder mehrstufiges Menü im linken Bereich der Webseite positioniert. Auch dieser Bereich kann unabhängig vom Mittelteil (= Inhalt) gescrollt werden oder auch nicht - je nach Geschmack. Bitte nochmals bedenken: das wird mittels CSS realisiert, und nicht mit HTML! Es gibt auch Seiten ohne diesen linken Bereich - er kann also weggelassen werden.
Rechter Bereich
Der rechte Bereich wird, wenn er benutzt wird, oftmals mit zusätzlichen Links, Boxen, oder auch Menüs versehen. Auch hier gibt es wie im linken Bereich das unabhängige Scrollen, falls es gewünscht wird.
Der Mittelteil
Der Mittelteil stellt die eigentliche Information der Webseite dar. Er kann wie alle anderen Komponenten feststehen oder unabhängig vom Rest scrollen. Der Mittelteil kann einspaltig, oder wie z.B. in Zeitungen, mehrspaltig ausgelegt sein.
HTML-Gerüst einer Webseite
Der folgende Code stellt den Aufbau einer Webseite dar.
Ich habe ihn bestehend aus einem Header, einem linken Bereich, einem
rechten Bereich, einem Mittelteil und einem Footer definiert. Damit hat
man alles, was man brauchen könnte. Die Bereiche, die man nicht benötigt,
lässt man einfach weg.
Beispiel: Seite mit Header, linker Seite und Mittelteil.
Ich habe in der Download-Version 2 Stylesheets beigelegt, welche die Seiten unterschiedlich darstellen.
- fixedStyle.css: Header feststehend am oberen Rand des Browserfensters. Footer feststehend am unteren Rand des Browserfensters. Linke Seite feststehend an der linken Seite des Browserfensters. Rechte Seite feststehend an der rechten Seite des Browserfensters. Mittelteil scrollt. Die Seiten Scrollen, wenn der Inhalt größer ist als das Browserfenster.
- relativeStyle.css: Die gesamte Seite scrollt mit. der Header ist oben. Die Höhe von linker Seite, rechter Seite und Mittelteil richtet sich nach der Höhe des größten Teils. Unter den 3 Teilen befindet sich der Footer.
Ich werde zuerst einmal das HTML-Markup der Seite beschreiben. Danach gehe ich auf die Stylesheets ein. Im Codebeispiel wird die Seite zuerst einmal ohne Stylesheets angezeigt. Ich stelle die Layouts dann später dar.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="language" content="deutsch, de" />
<meta name="keywords" content="Natur, Blumen, Grtner, Wald, Wiese, Feld" />
<meta name="description" content="Ihre Beschreibung" />
<meta name="author" content="Ihr Name" />
<meta name="robots" content="index,follow" />
<meta name="revisit-after" content="14 days" />
<meta name="page-topic" content="Dienstleistung" />
<meta name="copyright" content=" (c) Ihr Name/Ihre Firma" />
<title>Standardseite</title>
<style type="text/css" media="screen">
@import url("keinStyle.css");
</style>
<style type="text/css" media="print">
<!--
@import url("keinPrintStyle.css");
-->
</style>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<!-- Header -->
<div id="header">Das ist der Header
<div id="header_logo">Logo</div>
<div id="header_login">Ein Login-Bereich</div>
<div id="header_suche">Ein Such-Bereich</div>
<div id="links">Links</div>
<div id="sitemap">Eine Sitemap</div>
<div id="header_menu">Ein Menü</div>
</div>
<!-- wird benoetigt fuer festes Layout -->
<div id="page_outer">
<div id="page_inner">
<!-- linke Seite -->
<div id="left_container">Das ist die linke Seite
<div id="left_login">Ein Login-Bereich</div>
<div id="left_search">Ein Such-Bereich</div>
<div id="left_menu">Ein Menü</div>
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
asdfsa<br />
</div>
<!-- rechte Seite -->
<div id="right_container">Das ist die rechte Seite
<div id="right_login">Ein Login-Bereich</div>
<div id="right_search">Ein Such-Bereich</div>
<div id="right_links">Links</div>
<div id="right_menu">Ein Menü</div>
</div>
<!-- Mitte-Inhalt -->
<div id="content">
<p>Anfang Content</p>
<p>Love's not time's fool, though rosy lips and cheeks whose worth's unknown,
although his height be taken. That looks on tempests and is never shaken;
it is the star to every wand'ring bark, which alters when it alteration
finds. But bears it out even to the edge of doom. Or bends with the remover
to remove. Love's not time's fool, though rosy lips and cheeks let me
not to the marriage of true minds whose worth's unknown, although his height
be taken.</p>
<p>I never writ, nor no man ever loved. Which alters when it alteration finds,
or bends with the remover to remove. Love alters not with his brief hours
and weeks.</p>
<p>Let me not to the marriage of true minds or bends with the remover to
remove. Love alters not with his brief hours and weeks, that looks on tempests
and is never shaken; oh, no, it is an ever fixed mark. Which alters when
it alteration finds, admit impediments; love is not love whose worth's
unknown, although his height be taken. I never writ, nor no man ever loved.
Love's not time's fool, though rosy lips and cheeks if this be error and
upon me proved, oh, no, it is an ever fixed mark.</p>
<p>Or bends with the remover to remove. Which alters when it alteration finds.
Whose worth's unknown, although his height be taken. Or bends with the
remover to remove.</p>
<p>Love's not time's fool, though rosy lips and cheeks admit impediments;
love is not love which alters when it alteration finds. Love alters not
with his brief hours and weeks, let me not to the marriage of true minds
or bends with the remover to remove. Within his bending sickle's compass
come; it is the star to every wand'ring bark, which alters when it alteration
finds.</p>
<p>I never writ, nor no man ever loved. But bears it out even to the edge
of doom. Admit impediments; love is not love.</p>
<p>Whose worth's unknown, although his height be taken. Admit impediments;
love is not love love alters not with his brief hours and weeks, that
looks on tempests and is never shaken;. Love's not time's fool, though
rosy lips and cheeks I never writ, nor no man ever loved.</p>
<p>Whose worth's unknown, although his height be taken. If this be error
and upon me proved, within his bending sickle's compass come; it is the
star to every wand'ring bark. But bears it out even to the edge of doom.
Which alters when it alteration finds, whose worth's unknown, although
his height be taken. Let me not to the marriage of true minds.</p>
<p>Love's not time's fool, though rosy lips and cheeks whose worth's unknown,
although his height be taken. Which alters when it alteration finds,
it is the star to every wand'ring bark, admit impediments; love is not
love. Within his bending sickle's compass come; oh, no, it is an ever fixed
mark let me not to the marriage of true minds. Whose worth's unknown, although
his height be taken.</p>
<p>Or bends with the remover to remove. Which alters when it alteration finds,
that looks on tempests and is never shaken; admit impediments; love is
not love. But bears it out even to the edge of doom. Or bends with the
remover to remove.</p>
<p>It is the star to every wand'ring bark, love alters not with his brief
hours and weeks, oh, no, it is an ever fixed mark. Love's not time's
fool, though rosy lips and cheeks but bears it out even to the edge of
doom. Within his bending sickle's compass come; it is the star to every
wand'ring bark, I never writ, nor no man ever loved.</p>
<p>Which alters when it alteration finds, that looks on tempests and is
never shaken; let me not to the marriage of true minds. Or bends with
the remover to remove. Love alters not with his brief hours and weeks.
It is the star to every wand'ring bark, which alters when it alteration
finds, love's not time's fool, though rosy lips and cheeks. That looks
on tempests and is never shaken; or bends with the remover to remove.</p>
<p>Whose worth's unknown, although his height be taken. Admit impediments;
love is not love oh, no, it is an ever fixed mark love's not time's fool,
though rosy lips and cheeks. Which alters when it alteration finds, I
never writ, nor no man ever loved. Within his bending sickle's compass
come; admit impediments; love is not love whose worth's unknown, although
his height be taken. That looks on tempests and is never shaken; or bends
with the remover to remove.</p>
<p>It is the star to every wand'ring bark, but bears it out even to the edge
of doom. Whose worth's unknown, although his height be taken. Within
his bending sickle's compass come; admit impediments; love is not love
which alters when it alteration finds.</p>
<p>It is the star to every wand'ring bark, let me not to the marriage of
true minds love alters not with his brief hours and weeks. Or bends with
the remover to remove. Oh, no, it is an ever fixed mark if this be error
and upon me proved. Admit impediments; love is not love it is the star
to every wand'ring bark, let me not to the marriage of true minds. Within
his bending sickle's compass come; if this be error and upon me proved,
love's not time's fool, though rosy lips and cheeks.</p>
<p>Love alters not with his brief hours and weeks, which alters when it alteration
finds, admit impediments; love is not love. Whose worth's unknown, although
his height be taken. Oh, no, it is an ever fixed mark if this be error
and upon me proved, love's not time's fool, though rosy lips and cheeks.
I never writ, nor no man ever loved. Let me not to the marriage of true
minds it is the star to every wand'ring bark, which alters when it alteration
finds.</p>
<p>Whose worth's unknown, although his height be taken. If this be error
and upon me proved, admit impediments; love is not love within his bending
sickle's compass come;. Love alters not with his brief hours and weeks,
but bears it out even to the edge of doom. Let me not to the marriage
of true minds oh, no, it is an ever fixed mark if this be error and upon
me proved.</p>
<p>It is the star to every wand'ring bark, admit impediments; love is not
love. Oh, no, it is an ever fixed mark which alters when it alteration
finds, love's not time's fool, though rosy lips and cheeks. Admit impediments;
love is not love whose worth's unknown, although his height be taken.
Love alters not with his brief hours and weeks, if this be error and
upon me proved, it is the star to every wand'ring bark.</p>
<p>Love's not time's fool, though rosy lips and cheeks within his bending
sickle's compass come; which alters when it alteration finds. I never
writ, nor no man ever loved. But bears it out even to the edge of doom.
It is the star to every wand'ring bark. Or bends with the remover to
remove.</p>
<p>Oh, no, it is an ever fixed mark love's not time's fool, though rosy lips
and cheeks let me not to the marriage of true minds. Which alters when
it alteration finds, whose worth's unknown, although his height be taken.
Love alters not with his brief hours and weeks, oh, no, it is an ever
fixed mark love's not time's fool, though rosy lips and cheeks. But bears
it out even to the edge of doom.</p>
<p>Ende Content</p>
</div>
<!-- wird benoetigt fuer festes Layout -->
<div class="clear"></div>
</div>
</div>
<!-- Footer -->
<div id="footer">Das ist der Footer. Das ist der Footer. Das ist der Footer.
Das ist der Footer. Das ist der Footer.</div>
</body>
</html>
Aufbau der Seite im Head-Bereich
LANtastic
DTD - Document Type Declaration - Das richtige Doctype
Doctype - der Dokumententyp
Der Doctype bringt den Browser in einem definierten Standard-Mode. Ich habe hier XHTML 1.0 transitional eingestellt, um XHTML darzustellen, aber trotzdem alte HTML-Attribute zuzulassen. Weitere Information zu Doctype findet man z.B. bei LANtastic oder in English bei hsivonen.iki.fi.
XHTML-Regeln
XHTML ist formaler und strikter als HTML. Dinge, über die HTML großzügig hinwegsieht, sind in XHTML nicht erlaubt. Hier die wichtigsten XHTML-Regeln:
- Korrekte Schachtelung der Tags; was zuerst geöffnet wird, muss zuletzt geschlossen werden.
- Alle Tags und Attribute müssen kleingeschrieben werden. Statt <TITLE> oder >Title> ist nur <title> erlaubt.
- HTML-Attribute müssen in Anführungszeichen stehen.
- Attribute müssen einen Wert haben. Statt <td nowrap> heißt es jetzt <td nowrap="nowrap">.
- Alle Tags müssen geschlossen werden. Statt <br> heißt es jetzt <br />.
Suchmaschinen-Online.de
Suchmaschinen-Verzeichnis und Informationen
Metatags
Metatags sind (inzwischen wieder) wichtig, um von Suchmaschinen gefunden zu werden, und um dort richtig zitiert zu werden. Hier einige wichtige:
- <meta http-equiv="language" content="deutsch, de" / > - die Sprache wird angezeigt.
- <meta name="keywords" content="Natur, Blumen, Gärtner, Wald, Wiese, Feld"> - Schlüsselwörter werden genannt.
- <meta name="description" content="Ihre Beschreibung"> - Eine Kurzbeschreibung der Webseite wird dargestellt.
- <meta name="author" content="Ihr Name"> - Der Autor wird genannt.
- <meta name="robots" content="index,follow"> - Damit kann man Suchmaschinen sagen, ob diese auch Unterseiten suchen sollen.
- <meta name="revisit-after" content="14 days"> - Suchmaschinen wissen damit, wann sie die Seite wieder besuchen sollen.
- <meta name="page-topic" content="Dienstleistung"> - Die Kategorie des Inhalts wird genannt.
- <meta name="copyright" content=" (c) Ihr Name/Ihre Firma"> - Die Copyright-Information.
Weitere informationen zu Metatags und Suchmaschinenoptimierung findet man z.B. bei Suchmaschinen Online.
Titel der Seite
Sinnvoll ist es, den Titel der Gesamtwebseite und dann
den Titel der Unterseite anzugeben. Damit weiß der Benutzer immer,
auf welcher Seite er ist.
Beispiel: <title>Hauptseite - Unterseite</title>
Unterschiedliche Browser
Für die Webseitenentwickler war es in der Vergangenheit fast eine Katastrophe, dass die Hersteller von Browsern sich nicht an global anerkannte Vorgaben gehalten haben und mit ihren Browsern bis heute Ergebnisse erzielen, die sich unterscheiden. Hinzu kommt, dass die Browser weiterentwickelt werden und die Ergebnisse sich von Version zu Version unterscheiden. Inzwischen (Januar 2008) hat sich etwas bei den Browsern getan: IE 7, Firefox 2 und Opera 9 sind jetzt weitgehend CSS 2.1 kompatibel. Es gibt sicher noch weitere Browser, die weitgehend CSS 2.1 kompatibel sind; sie interessieren mich aber nicht, da deren Marktanteile entsprechend klein sind. Den Safari gibt es inzwischen auch unter Windows; er ist weitgehend CSS 2.1 kompatibel. Ich nehme daher an, dass meine Webseiten auch auf Apple-Computer gleich aussehen.
Conditional Comments
Microsoft Developer Network: About Conditional Comments
Dean Edwards
IE7 is a JavaScript library to make MSIE behave
like a standards-compliant browser. It fixes many CSS issues and
makes transparent PNG work correctly under IE5 and IE6.
Google-Code
IE7-JS: A JavaScript library to make MSIE behave like a standards-compliant browser.
Verlinkung der Stylesheets
Stylesheets sollen so verlinkt werden, dass moderne Browser (z.B. IE7, Firefox2, Opera9 und neuere) die Seite korrekt und gleich darstellen. Für den IE6, der immer noch viel benutzt wird, muss der IE7 emuliert werden. Andere veraltete Browser werden nicht unterstützt; d.h. die Seite muss in diesen nur noch lesbar, aber nicht mehr schön sein. Es funktioniert recht einfach: Ältere Browser kennen @import nicht. Also werden dort die Stylesheets nicht eingebunden.
Emulation des IE6
Der IE7 versteht CSS2.1, der IE6 aber nicht. Nur der IE versteht die Conditional Comments von Microsoft; also kann man die Ausnahmen für den IE6 über die Conditional Comments erzeugen. Dean Edwards hat ein Javascript entwickelt, welches, falls ein IE kleiner 7 vorliegt, den IE7 emuliert. Man muss nur dieses Script verlinken, und schon funktioniert die Seite auch mit dem IE6. Das Script findet man bei Google-Code. Das Script wird derzeit weiterentwickelt, so dass es jetzt (Mai 2008) bereits den IE8 emuliert, obwohl dieser noch im Betastadium ist.
Dr. Web
Was sind eigentlich CSS Hacks?
standards.webmasterpro.de
Browserspezifisches CSS und Browserweichen
CSS Hacks
Der Begriff "Hack" bezieht sich auf Kunstgriffe, die Brewserfehler gezielt ausnutzen, um andere Browserfehler zu umgehen. Bei Dr. Web gibt es dazu Erläuterungen. Angaben zu CSS Hacks findet man bei standards.webmasterpro.de. Ich mag diese CSS Hacks nicht wirklich, da durch sie in den Stylesheets irgendwie die Logik verloren zu gehen scheint. Man muss quasi bei jedem Hack fragen, wieso so etwas überhaupt funktionieren kann. Troztdem haben die Hacks so lange ihre Berechtigung, bis die Standards von allen eingehalten werden. Und das kann dauern...
Aufbau der Seite im Body
Struktur
Ich habe in den einzelnen Bereichen (Header, Footer, linke Seite, rechte Seite) einfach mal alles hineingepackt, was mir so eingefallen ist. Wichtig sind dabei folgende Dinge:
- Der Container für den Bereich wird als <div> mit einer ID versehen
- Die Elemente werden ebenfalls mit einer ID versehen
- Die Elemente können schon gleich zweckgebunden sein; z.B. ein Suchformular wird mit <form> vereinbart, oder eine Linkliste wird mit <ul> vereinbart. Ich habe in diesen Beispielen darauf verzichtet, da ich dann auch die Formulare oder Listen entsprechend ausfüllen müsste, um validen Code zu erhalten. Ich habe daher diese Elemente als <div> vereinbart, weise aber ausdrücklich darauf hin, dass diese bei richtigen Seiten entsprechend ersetzt werden können.
Damit können die Verhaltensweisen dieser Container und Elemente individuell durch CSS gesteuert werden. Jeder kann natürlich die Elemente, welche im entsprechenden Container nicht gebraucht werden, entfernen. Auch kann selbstverständlich ein ganzer Container entfernt werden (z.B. wenn die rechte Seite nicht gebraucht wird).
Die Reihenfolge der Container habe so gewählt:
- Header
- Container für linke Seite, Mittelteil, rechte Seite
- Linke Seite
- rechte Seite
- Mittelteil
- Footer
Aussehen der Seite ohne CSS
Damit ist die Seite fertig und wird ohne CSS so dargestellt wie im Beispiel. Sie wird auch so in veralteten Browsern dargestellt, welche @import nicht verstehen.
Aussehen der Seite mit verschiedenen Stylesheets
Unterschiedliche Layouts lassen sich nun anwenden, indem man die entsprechenden Stylesheets anwendet. Im Beispiel muss man dann keinStylesheet.css durch das gewünschte Stylesheet ersetzen.
fixedStyle.css
Der einzige Unterschied im HTML-Markup ist der Import des Stylesheets fixedStyle.css. (Download per Codebeispiel 019)
runCodebeispiel 020:
Default-Einstellungen unterschiedlicher Browser umgehen
Die verschiedenen Browser haben die Voreinstellungen für die einzelnen Formate unterschiedlich gesetzt. Um hier Einheitlichkeit zu erzeugen, werden die wesentlichen Formate hier neu definiert.
html, body {
padding:o; margin:0; border:0;
height:100%;
max-height:100%;
width:100%;
}
html {
top:0; left:0; right:0;
}
Roman Koch
Tipps und Tricks für relative Schriftgrössen mit CSS
Die barrierefreie Webseite
In Bezug auf ein barrierefreies bzw. barrierearmes
Webdesign ist es vor allem für ältere und leicht sehbehinderte Nutzer
wichtig, Schriftgrößen bedürfnisorientiert einstellen zu können.
Schriftart
Eine Seite sollte "wie aus einem Guss" aussehen - es macht sich nicht gut, auf der einen Seite den Text in Arial, auf der anderen Seite in Times New Roman darzustellen. Außerdem sollte eine einheitliche Schriftgröße als Basisgröße definiert werden.
Die Schriftgröße sollte relativ gewählt werden, um dem Benutzer Größenänderungen mit seinem Browser zu erlauben. Es gibt aber bei relativen Schriftgrößen gewisse Dinge zu beachten, die bei Roman Koch beschrieben sind. Weiterführende Artikel findet man z.B. bei Die barrierefreie Webseite.
Hintergrund
Colored Boxes (durch Andreas Kalt)
Andreas Kalt hat eine autorisierte Übersetzung des
Maxdesign Tutorials Colored Boxes veröffentlicht.
Der Hintergrund wird sowohl mit Farbe als auch mit einem Hintergrundbild versehen. Falls das Bild aus irgendeinem Grund nicht geladen wird, wird zumindest die Farbe angezeigt. Es wird empfohlen, während der Entwicklung des Layouts mit Colored Boxes zu arbeiten. Hier wird jedem Container eine Farbe zugewiesen; damit kann man sehr einfach das Verhalten während der Programmierung beobachten und Fehler korrigieren. Wenn dann alles richtig funktioniert, ersetzt man die Farben durch die gewünschten Farben und Bilder.
Bilder als Hintergrund
Wenn ein Bild zur Gestaltung des Layouts dient, so sollte es auch im CSS als Hintergrundbild dargestellt werden. Gehört das Bild aber zum Inhalt, so sollte es im Vordergrund mittels HTML-Tag vereinbart werden. Hintergrundbilder können nicht angeklickt werden; sie sind natürlich auf dem Computer des Benutzers vorhanden - siehe Geschützte Seiten.
font-family:Arial, Helvetica, sans-serif; /* Schrift und Schriftfamilie */
font-size:1em; /*Schriftgroesse hier relativ festlegen */
background:#EEEEEE url("hg1.jpg") repeat fixed; /* Hintergrundfarbe und Bild */
}
Der Headers
Der Header soll am oberen Rand des Browserfensters feststehen. Dieses Verhalten wird durch den Style "position" gesteuert:
- fixed: feststehend
- absolute: scrollen
Position und Größe des Headers
Die Position des Headers wird durch "left" und "top" gesteuert; die Größe durch "width" und "height". Ich habe die Größe mit 100% festgelegt, damit der Header waagerecht das ganze Browserfenster füllt. Die Höhe ist absolut in Pixeln angegeben.
Die z-Ebene
Zur Behandlung der Background-Bilder und den Tricks zur Gestaltung komme ich später.
Wenn man einmal die Position des Headers verändert, so merkt man, dass der restliche Text unter dem Header hindurch taucht (bei position:fixed). Das liegt daran, dass ich die Ebene, in welcher der Header liegt, mit "z-index:1" vereinbart habe. Je höher der z-index, umso höher liegt die Ebene. Standard ist 0, also liegt 1 oben auf.
position:fixed;
margin:0px;
top:0px;
left:0px;
display:block;
width:100%;
z-index:1;
height:140px; /* Höhe des Headers */
background:#FF0000 url("sunset140_2.jpg"); /* Farbe und Bild des Hintergrunds */
background-repeat: repeat-x;
background-position: left top;
}
Container für linke Seite, rechte Seite und Mittelteil
Dieser Container wird nur für das zweite Layout benötigt. Da ich in diesem Layout nichts damit mache, schadet er hier auch nicht. Also habe ich ihn drin gelassen, damit das HTML-Markup für beide Layouts gleich ist.
<div id="page_outer">
<div id="page_inner">
Container für linke Seite
Der Container für die linke Seite wird so positioniert, dass der Header (top) und der Footer (bottom) berücksichtigt werden.
position:fixed;
left:0px;
overflow:auto;
display:block;
top:140px; /* Höhe des Headers */
bottom:50px; /* Hoehe des Footers */
width:160px; /* Breite der linken Seite */
background-color:#00FFFF; /* Farbe des Hintergrunds */
}
Container für rechte Seite
Der Container für die rechte Seite unterscheidet sich von der linken Seite dadurch, dass er mit right statt mit left positioniert wird.
position:fixed;
right:0px;
overflow:auto;
display:block;
top:140px; /* Höhe des Headers */
bottom:50px; /* Hoehe des Footers */
width:100px; /* Breite der rechten Seite */
background-color:#FFFF00; /* Farbe des Hintergrunds */
}
Container für den Footer
Auch bei Footer ist es einfach: er wird durch bottom am unteren Ende des Browserfensters fixiert.
position:fixed;
left:0px;
bottom:0px;
margin:0px;
display:block;
width:100%;
z-index:1;
height:50px; /* Hoehe des Footers */
background:#FF00FF url("sunset140_2.jpg"); /* Farbe und Bild des Hintergrunds */
background-repeat: repeat-x;
background-position: left top;
}
Container für das Mittelteil
Bleibt noch das Mittelteil. Es soll scrollen. Aber es würde unter die anderen Bereiche tauchen. Das verhindert man für die linke und rechte Seite mit margin und für Header und Footer mit padding.
margin-left:160px;
margin-right:100px;
padding-top:140px;
padding-bottom:50px;
}
relativeStyle.css
In diesem Layout soll die gesamte Seite scrollen. Auch hier muss wieder das entsprechende Stylesheet importiert werden. (Download per Codebeispiel 019)
runCodebeispiel 021:
Default-Einstellungen unterschiedlicher Browser umgehen
Auch hier werden wieder die Default-Einstellungen der unterschiedlichen Browser durch eigene ersetzt.
html, body {
padding:o; margin:0; border:0;
}
html {
top:0; left:0; right:0;
}
Seitenbreite
Für diese Art von Layouts kann man die Seitenbreite festlegen. Das geschieht bei body mit width. Es gibt dazu 2 Möglichkeiten:
- Feste Seitenbreite per width:800px (in diesem Beispiel auf 800px gesetzt
- Prozentuale Seitenbreite per width:90% (jetzt auf 90% des Browserfensters gesetzt)
Die Seite wird mit margin:auto seitlich zentriert. Weiterhin werden wie oben Schrift und Hintergrund festgelegt.
margin:auto;
width:90%; /* Breite der Seite */
font-family:Arial, Helvetica, sans-serif; /* Schrift und Schriftfamilie */
font-size:1em; /*Schriftgroesse hier relativ festlegen */
background:#EEEEEE url("hg1.jpg") repeat fixed; /* Hintergrundfarbe und Bild */
}
Der Headers
Der Header soll mit der ganzen Seite mitscrollen. Damit ist position:fixed nicht mehr geeignet. Man könnte jetzt die Position garnicht vereinbaren, dann würde als Voreinstellung position:static genommen. Nun gibt es da eine Besonderheit: jede Positionierung bezieht sich auf den Container, in dem sie vereinbart wird, es sei denn, dass dieser Container mit position:static vereinbart wurde. Dann bezieht sich die Positionierung auf das nächste Eltern-Element, in dem nicht position:static vereinbart wurde. Da wir aber die Position innerhalb des Headers auf Header-interne Koordinaten beziehen wollen, müssen wir position:absolute oder position:relative verwenden. html und body sind die Elternelemente von Header; dort ist die Position nicht definiert, also gilt position:static dort. Jetzt wird der Header mit position:relative definiert, damit Positionen in seinen Kind-Elementen richtig positioniert werden können. Das gilt dan auch für die weiteren Container in diesem Layout.
position:relative;
display:block;
width:100%;
height:140px; /* Höhe des Headers */
background:#FF0000 url("sunset140_2.jpg"); /* Farbe und Bild des Hintergrunds */
background-repeat: repeat-x;
background-position: left top;
}
Container für linke Seite, rechte Seite und Mittelteil
Jetzt kommt die wesentliche Änderung gegenüber dem ersten Layout. Es wird ein Container für die 3 Bereiche linke Seite, rechte Seite und Mittelteil gebraucht. Die Border-Dicke links und rechts entspricht den Breiten von linker und rechter Seite. Damit die Seite nun nicht innerhalb dieses Randes beginnt, muss die Breite in einem weiteren Container mit negativem margin korrigiert werden.
position:relative;
display:block;
border-left:160px solid #00FFFF; /* Breite der linken Seite und Farbe */
border-right:100px solid #FFFF00; /* Breite der rechten Seite und Farbe */
}
#page_inner {
display:block;
margin-left:-160px; /* Breite der linken Seite */
margin-right:-100px; /* Breite der rechten Seite */
}
Container für linke und rechte Seite
Die Container für linke und rechte Seite werden per float:left und float:right positioniert. Auch hier gilt wieder position:relative (siehe Header).
position:relative;
float:left;
left:0px;
width:160px; /* Breite der linken Seite */
}
#right_container {
position:relative;
float:right;
right:0px;
width:100px; /* Breite der rechten Seite */
}
Container für das Mittelteil
Das Mittelteil ist der normale Inhalt.
position:relative;
display:block;
margin-left:160px; /* Breite der linken Seite */
margin-right:100px; /* Breite der rechten Seite */
height:1%;
}
Ende des Containers für linke Seite, rechte Seite und Mittelteil
Unter dem Container für das Mittelteil werden die float-Bereiche mit clear:both aufgelöst.
clear:both;
}
Danach wird der Container im HTML-Markup geschlossen.
<div class="clear"></div>
</div>
</div>
Der Footer
Fehlt noch der Footer, welcher nun darunter gesetzt wird.
display:block;
width:100%;
height:50px; /* Hoehe des Footers */
background:#FF00FF url("sunset140_2.jpg"); /* Farbe und Bild des Hintergrunds */
background-repeat: repeat-x;
background-position: left top;
}
Fazit
Damit sind die wesentlichen Layouts zur Gestaltung einer Webseite beschrieben. Sie können nun nach Belieben abgewandelt werden. Die Struktur des HTML-Markups kann dabei beibehalten werden.
Kommentar eintragen
Kommentare zu dieser Seite