Blackbenji
Lieutenant
- Registriert
- Nov. 2009
- Beiträge
- 557
Hallo,
für einen Familienfreund möchte ich folgendes Umsetzen (siehe Screenshot).
Das ganze soll natürlich "modern" mit Divs und CSS umgesetzt werden.
Nach Möglichkeit soll das Design auf allen Geräten verfügbar sein, dennoch schlicht, einfach und schnell laden.
Weiterhin soll die Seite bei größeren Auflösungen zentriert sein. Die Breite des Bildes ist dabei der Zentrale Punkt.
Folgendes habe ich bereits umsetzten können:
WAS NICHT GEHT:
ich bekomme den Container leider nicht zentriert, wobei die Breite so breit sein soll, wie das Bild.
Das Bild skaliert wunderbar mit der Browserbreite.
Hat jemand einen Ansatz für mich?
für einen Familienfreund möchte ich folgendes Umsetzen (siehe Screenshot).
Das ganze soll natürlich "modern" mit Divs und CSS umgesetzt werden.
Nach Möglichkeit soll das Design auf allen Geräten verfügbar sein, dennoch schlicht, einfach und schnell laden.
Weiterhin soll die Seite bei größeren Auflösungen zentriert sein. Die Breite des Bildes ist dabei der Zentrale Punkt.
Folgendes habe ich bereits umsetzten können:
HTML:
<!DOCTYPE HTML>
<html>
<head><title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="header.jpg" alt="" /></h1>
</div>
<ul id="navigation">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
<div id="content">
<h2>Page Content</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pulvinar eros eu diam. Quisque ut orci ut nunc lobortis aliquam. Praesent metus. Pellentesque luctus. Suspendisse nisl.</p>
<p>Morbi convallis lectus a elit. Morbi augue. Aenean quis ipsum non dui interdum egestas. Suspendisse quis turpis. Suspendisse et sem in neque dictum hendrerit. Nulla pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pulvinar eros eu diam. Quisque ut orci ut nunc lobortis aliquam. Praesent metus. Pellentesque luctus. Suspendisse nisl.</p>
<p>Morbi convallis lectus a elit. Morbi augue. Aenean quis ipsum non dui interdum egestas. Suspendisse quis turpis. Suspendisse et sem in neque dictum hendrerit. Nulla pede.</p>
</div>
<div id="footer">
<p>FOOTER</p>
</div>
</div>
</body>
</html>
HTML:
* {
padding: 0;
margin: 0;
}
body {
font-size: 100%;
font-family: arial, verdana, helvetica, sans-serif;
background-color: #CCC;
}
h1 {
font-size: 1.6em;
}
h2 {
font-size: 1.4em;
}
a, a:link {
color: #CCC;
}
a:hover {
color: #FFF
}
img {
max-width: 100%;
height: auto;
}
#container {
padding: 20px;
font-size: 0.8em;
}
#content p {
margin-bottom: 10px;
}
#header {
margin-left: auto;
margin-right: auto;
width: auto;
padding: 5px 0 5px 0;
margin-bottom: 20px;
}
#header img {
text-align: center;
box-shadow: 3px 3px 4px #000;
}
#navigation {
float: left;
width: 180px;
padding: 10px;
text-align: center;
list-style: none;
}
#navigation a {
color: #000;
}
#content {
margin-left: 212px;
border: solid 1px #000;
padding: 10px;
background-color: #FFF;
}
#footer {
background-color: #66C;
padding: 10px;
border: 1px solid #000;
margin-top: 20px;
text-align: center;
}WAS NICHT GEHT:
ich bekomme den Container leider nicht zentriert, wobei die Breite so breit sein soll, wie das Bild.
Das Bild skaliert wunderbar mit der Browserbreite.
Hat jemand einen Ansatz für mich?
