Das Stylesheet erzeugen
(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)
Während der Entwicklung des alternativen Stylesheets ist es angebracht, dieses mit dem Dokument zu verlinken, damit Sie die Änderungen direkt nachvollziehen können. Speichern Sie Ihr bestehendes Stylesheet unter dem Namen zoom.css und verlinken Sie es mit dem Dokument. Dann kommentieren Sie das aktuelle Stylesheet aus, um es zu deaktivieren, wie im Folgenden gezeigt wird:
<head>
<title>Footbag Freaks</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- <link rel="stylesheet" type="text/css" href="fixedwidth.css" /> -->
<link rel="stylesheet" type="text/css" href="zoom.css" />
</head>In unserem Zoom-Layout möchten wir keine festen Breiten für die Elemente vorgeben. Wenn die Schrift nämlich in solchen Elementen vergrößert wird, kann einer der beiden folgenden Fälle eintreten: Entweder wird der Text für eine Spalte zu groß (stellen Sie sich ein langes Wort vor, das dann womöglich breiter als die Spalte wird) oder falls die Spalte mit dem Text breiter wird, kann es passieren, dass die Spalte breiter als das Bildschirmfenster wird und ein horizontaler Scroll-Balken angezeigt wird.
Zuerst bearbeiten wir die CSS-Regel des body-Elements. Wir streichen die Eigenschaft min-width sowie das Hintergrundbild und die Farbe. Zusätzlich vergrößern wir die Grundschrift, die wir auf den Wert large setzen:
body {
margin: 0;
padding: 0;
background-color: #333;
color: white;
font: large Arial, Helvetica, Verdana, sans-serif;
}Wir löschen alles außer der Eigenschaft padding aus der Regel für das Element #wrapper.
Dann bearbeiten wir das Element #header, das außer der Titelzeile und dem Bild keine weiteren Inhalte mehr enthält und so zu einem weißen Banner am Seitenkopf wird. Dazu fügen wir eine CSS-Regel für das Element #header in das Stylesheet ein:
#header {
background-color: white;
}Damit das div-Element #content die gesamte Breite der Seite einnimmt und um den blassen Hintergrund zu ändern, wird die Regel für #content gelöscht. Ebenso können wir #main und #content-wrapper löschen, da wir sie nur zur Positionierung gebraucht haben.
Um die Texte der Seitenleiste oberhalb des Hauptinhalts der Seite anzuzeigen, müssen wir die vorhandenen Deklarationen aus der Regel für das #extras löschen und dieses Element so formatieren, dass der Inhalt in einem weißen Rahmen angezeigt wird.
#extras {
border: 2px solid white;
padding: 0.2em;
}Die restlichen Änderungen, die noch zu machen sind, betreffen die Farbgebung des Dokuments und das Entfernen von einigen der zuvor benutzten Hintergrundbilder sowie Außen- und Innenränder. Das zoom.css enthält nunmehr die folgenden Regeln:
body {
margin: 0;
padding: 0;
background-color: #333;
color: white;
font:large Arial, Helvetica, Verdana, sans-serif;
}
#wrapper {
padding: 10px;
}
#header {
background-color: white;
}
#tagline {
font-weight: bold;
color: #050845;
font-style: italic;
margin: 0 0 0.5em 0;
padding: 0 0 0 20px;
}
#extras {
border: 2px solid white;
padding: 0.2em;
}
#content .inner {
margin: 30px;
}
#worldcuplogo {
float: right;
margin: 0 0 20px 40px;
width: 111px;
}
#content h1 {
font-size: 120%;
color: #ccc;
}
#content h2 {
font-size: 260%;
font-weight: normal;
}
#content p {
line-height: 1.6em;
font-family: Georgia, Times, "Times New Roman", serif;
}
#dateline {
font-size: 160%;
font-weight: normal;
font-family: Georgia, Times, "Times New Roman", serif;
}
.intro {
font-weight: bold;
}
table.schedule {
clear: right;
width: 100%;
line-height: 1.4em;
border-collapse: collapse;
border: 4px solid #ccc;
color: white;
background: #333;
}
table.schedule caption {
margin: 0;
padding: 0;
color: white;
line-height: 2em;
text-align: left;
font-weight: bold;
}
table.schedule thead tr {
color: white;
background: #333;
}
table.schedule thead tr th {
padding: 0.4em 0.6em 0.4em 0.6em;
border: 4px solid #ccc;
}
table.schedule tbody tr {
border: 4px solid #ccc;
}
table.schedule tbody th {
padding: 0.6em;
border: 4px solid #ccc;
}
table.schedule tbody td {
background: #333;
padding-left: 0.6em;
border-bottom: 4px solid #ccc;
}
table.schedule tbody tr.odd {
background: #999;
}
table.schedule tbody tr.odd td {
background: #666666;
color: white;
}
table.schedule a:link {
font-weight: bold;
color: #fc0;
text-decoration: underline;
}
table.schedule a:visited {
font-weight: bold;
color: #fc0;
}
table.schedule a:hover {
font-weight: bold;
color: #fc0;
text-decoration: none;
}Wenn Sie das Layout, das mit zoom.css formatiert wurde, nun im Browser anschauen, sollte es wie in der folgenden Abbildung aussehen.
Abbildung: Das fertige Zoom-Layout.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg