Ausgezeichnet ausgezeichnet! Du bist auf dem besten Weg zu einer sauberen Arbeitsweise!
Die
meta-Tags hättest Du auch drinlassen können, aber das ist erstmal zweitrangig.
Minimale Veränderungen nehmen wir noch vor, dann geht es los mit dem Bildererstellen und dem Formatieren per CSS.
- Den Absatz um das Buchungsbild ersetzen wir durch einen Link
- Die Menüpunkte schreiben wir normal (um sie später mit CSS großzuschreiben, denn das ist Darstellung). Einheitliche Sprache wäre auch hier gut, aber das ist wieder die andere Geschichte
.
- Wir fügen width- und height-Werte zu den Bildern hinzu (Dies bildet die einzige Ausnahme hinsichtlich der Darstellungsangabe in HTML. Somit kann der Browser beim Laden der Seite gleich den Platz für das Bild reservieren und die Seite springt nicht hin und her).
- Wir gruppieren ein paar Elemente mit div-Tags
- Wir rücken jeweils um zwei Leerzeichen ein, wenn ein Tag noch offen ist. So behalten wir leichter den Überblick. Einige Texteditoren können das auch automatisch durchführen.
- Besonderen, einmaligen Elementen geben wir eine aussagekräftige id (siehe container, menu-main, content und book-now). Sie helfen später bei der Formatierung per CSS.
Das Ganze sieht dann so aus:
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Szenetwister.de</title>
</head>
<body>
<div id="container">
<!-- Überschrift 1.Grades -->
<h1><img src="szenetwisterorange.png" alt="Szene-Twister" /></h1>
<!-- Linkleiste -->
<ul id="menu-main">
<li><a href="index.php">Start</a></li>
<li><a href="profil.php">Profil</a></li>
<li><a href="news.php">News</a></li>
<li><a href="gallery.php">Gallery</a></li>
<li><a href="gaestebuch.php">Gästebuch</a></li>
<li><a href="friends.php">Friends</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
<li><a href="impressum.php">Impressum</a></li>
</ul>
<div id="content">
<!-- Überschrift 2.Grades -->
<h2>Szenetwister</h2>
<p> Hier wird eine allgemeine Erklärung zum Szenetwister eingefügt. </p>
</div>
<a href="book.php" id="book-now"><img src="Booker.gif" alt="Jezt buchen!" /></a> </div>
</body>
</html>
Für die Formatierung per CSS benötigen wir ein paar Bilder.Jetzt kann es mit CSS losgehen!
Zum Probieren können wir den CSS-Code in der gleichen Datei lassen und ihn später auslagern. Wir fügen in unseren head also ein style-Tag ein:
Code:
<style type="text/css">
<!--
-->
</style>
Zunächst ein paar Regeln für die gesamte Seite: Als Schriftgröße sollten wir möglichst die vom Nutzer bevorzugte wählen. Weil die Angabe
1em oder
100% (also genau wie der Nutzer) zu Browserfehlern führt, verwenden wir einen ähnlichen Wert. Die Schriftart suchen wir aus, genau wie den Abstand der Seite zum Rand des Viewports. Außerdem sollten wir Schriftfarbe und Hintergrundfarbe gleichzeitig festlegen, um die Lesbarkeit der Schrift zu gewährleisten (Der Nutzer kann z.B. andere Hintergrundfarben einstellen. Wenn wir dann nur die Schriftfarbe festlegen und diese zufällig genau wie seine Hintergrundfarbe ist, kann er nichts sehen.).
Code:
<style type="text/css">
<!--
body {
font-size: 100.01%;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 78px 45px 50px 90px;
color: #000000;
background-color: #FFFFFF;
}
-->
</style>
Speichern und Öffnen sollte Veränderungen sichtbar machen.
Kannst ja schonmal bis hierhin nachvollziehen. Werd gleich essen und heute Abend weiterschreiben.
Gruß
Junny
edit: So, wieder da.
Der grobe Plan ist folgendermaßen: (Es geht zuerst um das Formatieren in Browsern, die CSS recht gut beherrschen. Das sind Firefox, Opera, IE7, möglicherweise Safari und Chrome.)
- Den schwarzen Rahmen weisen wir dem Container container zu. Auch den oberen Farbverlauf können wir diesem zuweisen. Für die Unterbrechung des Rahmens links und rechts sorgen die Überschrift 1. Grades bzw. der Buchungslink.
Die Sterne sind das rechts positioniere Hintergrundbild des Containers content. Der Farbverlauf unten fügen wir mit dem Menü ein.
- Der Container container soll stets die gesamte Breite des Viewports einnehmen, außer dieser wird zu breit. Dann wären die Texte schwer zu lesen, weil die Zeilen zu lang werden.
Die Überschrift ersten Grades und den Buchungslink müssen wir absolut positionieren, damit sie den Rahmen abdecken können. Das Menü wird durch absolute Positionierung ans Ende gesetzt.
Beim CSS-Code habe ich mir angewöhnt, die Selektoren recht genau mit Vorfahrenelementen zu schreiben und bei jeder Generation einen Tab-Einzug einzufügen. Ich finde es so übersichtlicher, aber das muss jeder selber wissen.
Der CSS-Code ist kommentiert. Versuche, ihn komplett nachzuvollziehen und die Techniken zu verstehen. Ich erhebe keinen Anspruch auf die besten Techniken, die habe ich mir auch nur heute aus den Fingern gesaugt.
Code:
<style type="text/css">
<!--
body {
font-size: 100.01%;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 78px 45px 50px 90px;
color: #000000;
background-color: #FFFFFF;
}
div#container {
position: relative; /* h1, Buchungslink und Menue absolut hierzu */
margin: 0 auto; /* dieses Blockelement zentrieren */
padding: 50px 200px 50px 110px; /* oben und unten Platz fuer Verlaeufe, rechts und links fuer h1 und Buchungslink */
max-width: 30em; /* Textbreite maximal 30em */
background: url(contentback-top.gif) repeat-x top; /* oberer Farbverlauf */
border-width: 5px 5px 5px 7px;
border-style: solid;
border-color: #000000;
}
div#container h1 {
font-size: 1.5em; /* Schriftgroesse bezogen auf Fliesstext, wenn Alternativtext angezeigt */
display: block;
position: absolute; /* damit Rahmen ueberdeckt werden kann */
top: 85px;
left: -79px;
height: 253px; /* Hoehe des Bilds, wichtig zum Ueberdecken des Rahmens bei ausgeschalteten Bildern */
width: 178px; /* Breite des Bilds, wichtig zum Ueberdecken des Rahmens bei ausgeschalteten Bildern */
margin: 0;
padding: 0;
background-color: #FFFFFF; /* wichtig zum Ueberdecken des Rahmens bei ausgeschalteten Bildern */
}
div#container a#book-now {
display: block;
position: absolute; /* damit Rahmen ueberdeckt werden kann */
top: 92px;
right: -5px; /* um den Rahmen nach rechts verschieben, Bild wird allein positioniert */
height: 253px; /* wichtig zum Ueberdecken des Rahmens, genausohoch wie h1 */
margin: 0;
padding: 0;
border-right: 5px solid #FFFFFF; /* Rahmen darunter ueberdecken */
}
div#container a#book-now img {
position: absolute; /* damit Link Rahmen ueberdeckt und Bild rechts rausguckt */
top: 95px; /* Hoehe von h1 minus Hoehe des Buchungsbilds durch zwei */
right: -44px; /* Buchungsbild nach rechts rausschieben */
border: 2px solid #000000;
margin: 0;
padding: 0;
}
div#container div#content {
background: url(sterndeko-rechts.gif) no-repeat top right; /* Sterne rechts */
margin-left: -110px;
padding-left: 110px;
margin-right: -200px; /* damit Sterndeko am rechten Rand ist */
padding-right: 200px; /* damit eigentlicher Text wieder Abstand hat */
min-height: 290px; /* damit nichts abgeschnitten wird, wenn Inhalt zu wenig */
}
div#container div#content h2 {
font-size: 0.8em; /* Schriftgroesse bezogen auf Fliesstext */
margin: 1em 0 2em 0;
padding: 0;
}
div#container div#content p {
margin: 0.8em 0;
padding: 0;
}
div#container ul#menu-main {
position: absolute; /* damit Rahmen ueberdeckt werden kann */
bottom: -2em; /* Um Hoehe des Menues nach unten rausschieben */
left: 0;
right: 0;
display: block;
height: 2em; /* festlegen, damit grosse schriftgroesse nicht schiebung falsch macht */
background: url(contentback-bottom.gif) repeat-x top; /* unterer Farbverlauf */
padding-top: 40px; /* oben Platz fuer Farbverlauf machen */
margin: 0;
overflow: visible; /* damit grosse schriftgroesse nicht schiebung falsch macht */
text-align: center;
}
div#container ul#menu-main li {
display: inline; /* macht bei guten Browsern Listenpunkte weg, Darstellung in einer Zeile */
line-height: 2em; /* damit um dies rausgeschoben werden kann */
margin: 0;
padding: 0 0.1em;
border-right: 1px solid #000000; /* senkrechte Striche zwischen den Links, nur der links fehlt noch */
}
div#container ul#menu-main li a {
text-transform: uppercase; /* Menuetexte in Grossbuchstaben */
}
-->
</style>
Firefox, Opera, IE7, möglicherweise Safari und Chrome sollten die Seite jetzt wie gewünscht darstellen.
Wenn Du Fragen hast, einfach stellen.
Gruß
Junny
