Kurs:Die erste eigene Website/CSS/Layout "Megolla"
Erscheinungsbild
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;
}