Frage stellen
- layout.png (14.15 KiB) 260-mal betrachtet
Ich muss ein Layout erstellen, was dem angehängten Bild entspricht. Ich habe schon lange mit CSS rumprobiert, dabei ist dieses Bild herausgekommmen (ist einfach ein Screenshot), allerdings gibt es noch einige Details:
- Der maincontent kann beliebig weit nach unten gehn. Dabei soll der Footer natürlich immer ganz unten sein, und das orange Bild am rechten Rand soll sich der Höhe des maincontents anpassen.
- Wenn im maincontent nicht viel drin ist, soll er eine Mindesthöhe haben.
Das das orange Bild rechts raus ragt ist beabsichtigt.
Hier ist der HTML-Teil:
- Code: Alles auswählen
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header-wrapper">
<div class="header">
header
</div>
</div>
<div id="content-wrapper">
<div id="content1">
<div id="navigation-wrapper">
navigation
</div>
<div id="maincontent">
<p>maincontent</p>
<p>maincontent</p>
<p>maincontent</p>
<p>maincontent</p>
<p>maincontent</p>
<p>maincontent</p>
<p>maincontent</p>
<p>maincontent</p>
<p>maincontent</p>
</div>
<div id="endUser">
</div>
</div>
</div>
<div class="footer-wrapper">
<div class="footer">
footer
</div>
</div>
</body>
</html>
Und hier die CSS-Datei:
- Code: Alles auswählen
body {
background: grey;
min-width: 1010px;
}
div.header {
margin: auto;
text-align: center;
width: 990px;
color: blue;
background: white;
}
#content1 {
margin: auto;
position: relative;
left: 10px;
width: 1010px;
color: white;
background: black;
height: 400px;
}
#navigation-wrapper {
float: left;
width: 100px;
}
#maincontent {
float: left;
width: 890px;
}
#endUser {
float: left;
width: 20px;
height: 100%;
background: url(endUser.png) scroll top repeat-y;
}
div.footer {
clear: left;
margin: auto;
text-align: center;
width: 990px;
color: green;
background: white;
}
Ich hoffe ihr könnt mir bei diesen Details helfen!
