Zit met een probleem... Zie de volgende link: http://www.royromviel.nl/proef/
Dit moet dit worden:
Het gaat mij om de footer en de gestreepte achtergrond die doorloopt.
De footer moet gewoon onderin komen en de gestreepte achtergrond moet niet onnodig doorlopen. Maar let op! Zoals je ziet is de content (text en blok) 940 px en de gestreepte achtergrond loopt aan beide kanten iets uit (1100 pixels breed). Maar de content begint wel al in het oranje! Daarom heb ik de gestreepte achtergrond absolute gepositioneert meteen lagere z-index.
Maar ik kom er niet uit... Hieronder de code, kan iemand mij helpen?
Dit moet dit worden:
Het gaat mij om de footer en de gestreepte achtergrond die doorloopt.
De footer moet gewoon onderin komen en de gestreepte achtergrond moet niet onnodig doorlopen. Maar let op! Zoals je ziet is de content (text en blok) 940 px en de gestreepte achtergrond loopt aan beide kanten iets uit (1100 pixels breed). Maar de content begint wel al in het oranje! Daarom heb ik de gestreepte achtergrond absolute gepositioneert meteen lagere z-index.
Maar ik kom er niet uit... Hieronder de code, kan iemand mij helpen?
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>Untitled Document</title>
<style>
html, body {
height: 100%;
}
body {
font-size: 13px;
color: #333300;
margin: 0;
padding: 0;
font-family: "Century Gothic", Corbel, "Trebuchet MS", arial;
background-color: #fff;
background-image: url(test.png);
background-repeat: repeat-x;
}
#wrapper {
margin: 0 auto;
width: 940px;
position: relative;
min-height: 100%;
}
#header {
width: 940px;;
height: 230px;
border: 1px #000 solid;
margin-bottom: 20px;
}
#stripes {
position: absolute;
top: 369px;
left: 50%;
margin-left: -550px;
z-index:-2;
width: 1100px;
height: 100%;
background-image: url(bg-wrapper.jpg);
background-repeat: repeat-y;
padding-top: 0px;
}
#stripes:before {
content:"";
text-align:right;
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background-image: url(gradient-wrapper.png);
background-repeat: repeat-x;
height: 400px;
}
#content {
width: 940px;
padding-bottom:125px; /* Height of the footer */
}
#box {
height: 300px;
width: 940px;
background-color:#000
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:125px; /* Height of the footer */
background:#6cf;
}
</style>
</head>
<body>
<div id="stripes"></div>
<div id="wrapper">
<div id="header">sasa</div>
<div id="content">
<div id="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu nibh, hendrerit a aliquam non, auctor ut nibh. In elementum faucibus vulputate. Fusce pretium ipsum a leo blandit in imperdiet nisl adipiscing. Donec laoreet mauris sed justo imperdiet laoreet. Nunc dictum dictum enim id condimentum. Duis in tortor dolor. Vestibulum sed nibh condimentum velit bibendum dignissim vel et tellus. Morbi eu diam egestas est eleifend adipiscing. Sed vestibulum placerat augue, vel porta quam porttitor sed. Vestibulum tempus tempor erat, sed volutpat ipsum faucibus non. Nullam placerat accumsan nunc, vitae viverra neque mattis sed.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu nibh, hendrerit a aliquam non, auctor ut nibh. In elementum faucibus vulputate. Fusce pretium ipsum a leo blandit in imperdiet nisl adipiscing. Donec laoreet mauris sed justo imperdiet laoreet. Nunc dictum dictum enim id condimentum. Duis in tortor dolor. Vestibulum sed nibh condimentum velit bibendum dignissim vel et tellus. Morbi eu diam egestas est eleifend adipiscing. Sed vestibulum placerat augue, vel porta quam porttitor sed. Vestibulum tempus tempor erat, sed volutpat ipsum faucibus non. Nullam placerat accumsan nunc, vitae viverra neque mattis sed.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu nibh, hendrerit a aliquam non, auctor ut nibh. In elementum faucibus vulputate. Fusce pretium ipsum a leo blandit in imperdiet nisl adipiscing. Donec laoreet mauris sed justo imperdiet laoreet. Nunc dictum dictum enim id condimentum. Duis in tortor dolor. Vestibulum sed nibh condimentum velit bibendum dignissim vel et tellus. Morbi eu diam egestas est eleifend adipiscing. Sed vestibulum placerat augue, vel porta quam porttitor sed. Vestibulum tempus tempor erat, sed volutpat ipsum faucibus non. Nullam placerat accumsan nunc, vitae viverra neque mattis sed.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu nibh, hendrerit a aliquam non, auctor ut nibh. In elementum faucibus vulputate. Fusce pretium ipsum a leo blandit in imperdiet nisl adipiscing. Donec laoreet mauris sed justo imperdiet laoreet. Nunc dictum dictum enim id condimentum. Duis in tortor dolor. Vestibulum sed nibh condimentum velit bibendum dignissim vel et tellus. Morbi eu diam egestas est eleifend adipiscing. Sed vestibulum placerat augue, vel porta quam porttitor sed. Vestibulum tempus tempor erat, sed volutpat ipsum faucibus non. Nullam placerat accumsan nunc, vitae viverra neque mattis sed.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu nibh, hendrerit a aliquam non, auctor ut nibh. In elementum faucibus vulputate. Fusce pretium ipsum a leo blandit in imperdiet nisl adipiscing. Donec laoreet mauris sed justo imperdiet laoreet. Nunc dictum dictum enim id condimentum. Duis in tortor dolor. Vestibulum sed nibh condimentum velit bibendum dignissim vel et tellus. Morbi eu diam egestas est eleifend adipiscing. Sed vestibulum placerat augue, vel porta quam porttitor sed. Vestibulum tempus tempor erat, sed volutpat ipsum faucibus non. Nullam placerat accumsan nunc, vitae viverra neque mattis sed.</p>
</div>
<div id="footer"></div>
</div>
</body>
</html>
