Kurs:Die erste eigene Website/CSS/Layout "Megolla"

Ziel Bearbeiten

Voraussetzung Bearbeiten

Zunächst einmal benötigen wir die HTML-Datei, die den Inhalt der Seite enthält. Wie man diese erstellt sollte schon im vorherigen Kapitel geklärt worden sein.

Für dieses Layout müssen wie vorher noch etwas an der HTML-Datei anspassen: Der gesamte Inhalt wird in eine div-Box mit der id "content" gepackt. Dazu schreiben wir nach dem öffnenden body-Tag <div id="content"> und nach dem schließenden </div>.

Um das Stylesheet einzubinden schreiben wir in das head-Tag folgendes:

<link rel="Stylesheet" type="text/css" media="all" href="style.css" />

Hier die fertige Datei:

<!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>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Gardasee</title>
  <link rel="Stylesheet" type="text/css" media="all" href="style.css" />
</head>
<body>
<div id="content">
  <img src="http://upload.wikimedia.org/wikiversity/de/6/64/Aufmacher_DSC00617.JPG" width="700" height="321" alt="" id="mainimage" />
  <h1>Gardasee</h1><br />
  <div id="info"><p>Der Gardasee mit seinen hohen Bergen ist ein ideales Fahrrad-Revier</p></div>
  <p id="description">Man kann sich bei jeder Fahrt aussuchen, ob man auf flacher Strecke  den See entlang fahren oder aber hoch in die Berge klettern möchte</p>
  <h2>Hier ein paar Eindrücke aus unserem letzten Urlaub</h2><br />
  <img src="http://upload.wikimedia.org/wikiversity/de/3/33/DSC00657.jpg" width="320" height="240" alt="" />
  <p>In San Zeno gibt es einen sehr schönen Brunnen, der dem heiligen Franz von Asisi geweiht ist</p><br />
  <img src="http://upload.wikimedia.org/wikiversity/de/0/0b/DSC00573.jpg" width="320" height="240" alt="" />
  <p>An vielen Stellen führt der Weg durch Olivenhaine mit teilweise uralten Bäumen</p><br />
  <img src="http://upload.wikimedia.org/wikiversity/de/5/50/DSC00578.jpg" width="320" height="427" alt="" />
  <p>Fährt man etwas ins Hinterland, begegnet man kaum noch Touristen</p><br />
  <p>Der Gardasee ist bequem von Deutschland und Österreich mit dem Zug  zu erreichen! Es fahren stündlich Eurocity-Züge bis Verona – von dort  sind es dann noch ca. 30km mit dem Fahrrad…</p><br />
  <p id="copyright">© Matthias Edler-Golla</p>
</div>
</body>
</html>

...

Ergebnis Bearbeiten

style.css Bearbeiten

body {
 margin:0;
 padding:0;
 width:100%;
 background-color:#CECECE;
 font-family:Georgia, Times, serif;
}

#content {
 position:relative;
 border: 2.5px solid #626457; 
 border-top-style:none; 
 margin:0; 
 margin-bottom:2em; 
 padding:0; 
 width:70%; 
 max-width:700px; 
 min-width:500px; 
 background-color:white; 
 margin-left:15%; 
 margin-right:15%; 
 overflow:hidden;
}

#mainimage {
 border-style:none; margin:0;
}
 
#info { 
 clear:both; 
 margin-top: 1em; 
 width:45%; 
 padding:2px; 
 padding-left:0; 
 border:1px solid #508899; 
 border-left-style:none; 
 float:left; margin-right:1em;
}

#info p { 
 background-color:#508899; 
 color:white; 
 font-size:large; 
 font-weight:bold; 
 padding: 0.5em; 
 margin:0; 
}

#description {
 font-style:italic; 
 padding-top: 1em;
}
 
h1 {
 position:absolute; 
 right: 4em; 
 top:0.5em; 
 color:#4C7177; 
 font-size:x-large; 
 padding: 0.4em; 
 border: 2px solid #4C7177;
}

h2 {
 margin-left:0.5em; 
 margin-top: 2em; 
 color:#3399CC; 
 font-style:italic; 
 clear:both;
}

img { 
 border: 2px solid #626457; 
 margin: 0.8em; 
 margin-left: 0; 
 border-left-style:none; 
 clear:both; float:left; 
}

p { 
 font-size:small; 
 margin-left: 0.8em; 
}

br {
 clear:both;
}
 
#copyright {
 border-top:1px solid silver; 
 font-size:x-small; 
 padding:0.5em; margin:0; 
 text-align:right;
}