Frage stellen
ich versuche mich gerade an einer neuen Webseite. Diese soll in der Breite 990px haben, in der Höhe 100% aufweisen und in der horizontalen mittig zentriert sein. Dies ist der Contentbereich (also der Bereich der letzten Endes den Inhalt enthält) aber auch ein darunterliegender Bereich soll dies aufweisen (background) denn dort wird eine Grafik eingebunden die, wenn der Content länger ist als die Bildschirmhöhe immer an dem entsprechenden Platz bleiben soll.
Den Hintergrund (background) habe ich hinbekommen, den Content (content) leider nur teilweiße. Sobald der Inhalt (Loreum ipsum...) länger wird als die Bildschirmhöhe und die Scrollleiste auftaucht ruckt es mir das Design nach links wodurch der Hintergrund nicht mehr zum Content stimmt.
Auch würde ich gerne die #content-full auf height=100% bringen, also den Rest der Bildschirmhöhe wenn der Text darin weniger ist einfach mit der Farbe des Elements abdecken. Klappt aber auch nicht denn dann wird das gesamte Element länger.
Hoffe ihr könnt mir dabei weiterhelfen. Bin mittlerweile echt am verzweifeln.
HTML-Code:
- Code: Alles auswählen
<body>
<div id="background">
</div>
<div id="wrapper">
<div id="content">
<div id="content-header">
<img src="images/logo.jpg" alt="" />
</div>
<div id="content-navigation">
<div id="navi">
<ul>
<li id="home" class="inactive">Home</li>
<li id="angebot" class="active"><a href="index.html">Angebot</a></li>
<li id="ueberuns" class="inactive"><a href="index.html">Über uns</a></li>
<li id="arena" class="inactive"><a href="index.html">Arena</a></li>
<li id="kontakt" class="inactive"><a href="index.html">Kontakt</a></li>
</ul>
</div>
</div>
<div id="content-full">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>
<div id="content-networks">
</div>
</div>
</div>
</body>
CSS-Code:
- Code: Alles auswählen
* {
margin: 0px;
padding: 0px;
}
html {
height: 100%;
margin: 0px;
padding: 0px;
}
body {
background-color: #fad9bb;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
height: 100%;
}
#background {
position: absolute;
background-image: url(../images/index.jpg);
background-repeat: no-repeat;
left: 50%;
margin: 0px 0px 0px -495px;
padding: 0px 0px 0px 0px;
width: 990px;
height: 100%;
background-color: #ffffff;
}
#wrapper {
position: absolute;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width: 100%;
height: 100%;
overflow: auto;
overflox-x: hidden;
overflow-y: auto;
}
#content {
width: 990px;
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
overflow: auto;
overflox-x: hidden;
overflow-y: auto;
}
#content-header {
height: 145px;
width: 778px;
float: right;
text-align: right;
}
#content-navigation {
height: 28px;
width: 778px;
float: right;
padding: 12px 0px 12px 0px;
background-color: #fad9bb;
}
#content-networks {
height: 75px;
width: 188px;
background-color: #fdecda;
position: fixed;
bottom: 0;
margin: 0px 0px 0px 6px;
border: 6px solid #fad9bb;
}
#content-full {
width: 756px;
float: right;
margin: 0px 0px 0px 0px;
padding: 8px 8px 8px 8px;
background-color: #fdecda;
border-bottom: 6px solid #fad9bb;
border-left: 6px solid #fad9bb;
}
#navi {
height: 28px;
background-color: #e77817;
width: 778px;
}
#navi ul, #navi ul li {
display: inline;
float: left;
height: 28px;
line-height: 28px;
list-style: none;
margin: 0px;
padding: 0px;
text-align: center;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
}
#navi #home, #navi #ueberuns, #navi #kontakt {
height: 28px;
width: 154px;
margin: 0px 1px 0px 1px;
}
#navi #angebot, #navi #arena {
height: 28px;
width: 155px;
}
#navi a {
text-decoration: none;
color: #000000;
}
#navi a:hover, #navi a:active, #navi a:focus {
background-color: #fad9bb;
display: block;
}
#navi .active {
background-color: #fad9bb;
}
#navi .inactive {
background-color: #e77817;
}
