Hallo zusammen,
ich habe schon einiges im Internet gefunden, aber nichts hat mich wirklich weiter gebracht. Ich möchte gerne ein Image ganz oben (auch Header) wiederholen lassen (repeat-x). Diesen Hintergrund habe ich mit Photoshop erstellt und die unteren ca. 50 px sind als Navigationshintergrund gedacht. Mittlerweile habe ich es zwar geschafft die beiden Backgrounds für Header und Footer anzeigen zu lassen, aber nicht optimal, es bestehen kleine weisse Balken zu "left", "right" and "top". Wenn ich "position: fixed" eingebe und "left", "right" and "top" auf "0px" setzte, verschwindet zwar der Rand, aber der Hintergrund passt sich nicht mehr der Länge des Inhaltes an. Zudem bekomme ich es nicht hin, die Navi auf diese "Header" zu ziehen.
Ich würde auch gerne eine kleine auflistung mit Links im Footer erstellen, aber daran bin ich komplett gescheitert.
Hier mal der Code:
HTML
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>Homepage Neu</title>
<meta name="keywords" content="Lustig, Video, Test, use">
<meta name="description" content="Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht.">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="Header">
</div>
<div id="Navigation">
<li><a href="#">Test</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test3</a></li>
<li><a href="#">Test4</a></li>
</div>
<div id="Main">
<a>Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch in Spruch in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum.</a>
</div>
<div id="Bilder">
<a href="#"><img class="position" src="images/Beispiel%201.jpg"></a>
<a href="#"><img class="position" src="images/Beispiel2.jpg"></a>
<a href="#"><img class="position" src="images/Beispiel3.jpg"></a>
<a href="#"><img class="position" src="images/Beispiel4.jpg"></a>
</div>
<div id="Footer">
<a>Hier könnte ein Urheberrechts-Hinweis stehen...</a>
</div>CSS
#Header { text-align:center;
height: 423px;
background-image: url(images/Test01.png);
background-repeat: repeat-x;
}
#Navigation li {
display: inline-block;
padding-top: 200px;
width: 150px;
}
#Navigation {
text-align: center;
font-family: Calibri;
font-size: 130%;
letter-spacing: 4px;
}
#Main {
width: 850px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
font-family: Calibri;
font-size: 90%;
letter-spacing: 1px;
}
#Bilder img{
border: 5px solid rgba(0, 0, 0, 0.12);
border-radius: 4px;
display: inline-block;
margin-top: 10px;
}
img.position {
margin-left: 100px;
margin-right: auto;
}
#Footer {
position: fixed;
bottom:0px; left:0px; right:0px;
background-image: url(images/Test04.png);
background-repeat: repeat-x;
text-align:center;
padding:0px;
height:150px;
}Ich hoffe es ist kein Problem, wenn ich so viel Frage, es gibt ja leider Foren, in denen das nicht wirklich gern gesehen wird, aber möchte halt gerne weiter kommen und dazu lernen.
