Isegrim242
Aktives Mitglied
Thread Starter
- Dabei seit
- 21.07.2005
- Beiträge
- 3.255
- Reaktionspunkte
- 483
Hallo zusammen,
folgendes Problem stellt sich mir seit Tagen und ich finde einfach keine Lösung.
Unter einem fixen header liegt der eigentliche content. Darin ein Bild (.test-gruppe),
das breiter als der Container (.center-stage) ist in dem es liegt. Auf der linken Seite
habe ich das mit „left: -250px;“ im CSS hinbekommen. Dadurch, dass es rechts aber
breiter ist, entsteht ein unschöner horiontaler Scrollbalken und eine Lücke auf der
rechten Seite des Footers, der auf „width:100%;“ steht.
Kann mir da bitte jemand auf die Sprünge helfen?
» Live-Test
folgendes Problem stellt sich mir seit Tagen und ich finde einfach keine Lösung.
Unter einem fixen header liegt der eigentliche content. Darin ein Bild (.test-gruppe),
das breiter als der Container (.center-stage) ist in dem es liegt. Auf der linken Seite
habe ich das mit „left: -250px;“ im CSS hinbekommen. Dadurch, dass es rechts aber
breiter ist, entsteht ein unschöner horiontaler Scrollbalken und eine Lücke auf der
rechten Seite des Footers, der auf „width:100%;“ steht.
Kann mir da bitte jemand auf die Sprünge helfen?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<div class="wrapper">
<div class="header"></div>
<div class="center-stage">
<div class="test-gruppe"><img src="pixel.gif" alt="test - Kosmetikserie" width="1400" height="548" />
</div>
<div class="head-01-de"> </div>
<div class="content">
<div class="trennlinie"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
Code:
@charset "UTF-8";
/* CSS Document */
body, html {
height:100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 21px;
color: #585858;
background-color: #FFF;
margin: 0px;
text-align: justify;
}
.header {
height: 120px;
width: 100%;
position: fixed;
z-index: 1;
background-color:#FFDE00;
}
.center-stage {
height:auto;
width: 820px;
margin:auto;
overflow: visible;
}
.test-gruppe {
height: 548px;
width: 1400px;
position: relative;
top: 120px;
left: -250px;
z-index: 0;
background-color:#000;
}
.content {
width: 720px;
position: relative;
z-index: 0;
padding-top: 80px;
padding-left: 100px;
}
.head-01-de {
background-image: url(pixel.gif);
background-repeat: no-repeat;
background-color:#FFDE00;
height: 85px;
width: 420px;
position: relative;
z-index: 0;
left: 100px;
top: 85px;
}
.trennlinie {
width: 720px;
height: 32px;
background-image: url(pixel.gif);
position: relative;
margin-bottom: 30px;
}
.wrapper {
height:100%;
min-height:100%;
position:relative;
}
.footer {
background-color: #ffde00;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #000;
width: 100%;
height: 50px;
position:relative;
margin-top:50px;
margin-bottom: 0px;
z-index: 0;
text-align:center;
}» Live-Test
Zuletzt bearbeitet:
