Ik zit er al twee avonden op te stoeien, dus schakel ik nu jullie hulp in.
even voor de beeldvorming hieronder twee afbeeldingen, van zoals het moet zijn, en zoals het wordt als ik er veel tekst in pomp:
[img]http://www.dumpyourphoto.com/files3/72769/qbnIAyz.gif[/img]
[img]http://www.dumpyourphoto.com/files3/72770/thumbnail/F8KiNa.gif[/img]
Uitleg: ik heb een menu links (left_menu), een content (middle) en een menu rechts (menu_right). Dit staat weer in een container 'main'.
Het probleem is dat ik om de content een soort gradient wil, zodat de div als het ware opgloeit. Deze gradient wordt gecreerd met een 2px hoge afbeelding, telkens herhaald als background van de div left_gradient en right_gradient.
De menu's moeten gewoon over de gradient heenlopen.
De gradient lukt wel, en ik kan er ook wel een hoogte aangeven etc, maar zodra de content groeit, moet dus de gradient meegroeien. Dus zoals de eerste afbeelding is het goed, maar als ik m dan vol tekst pomp, dan groeit de gradient div niet meer mee.
CSS:
body, html {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #E9E9E9;
height: 100%;
}
#page {
width: 1000px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 0px;
text-align: left;
background-color: transparent;
}
#logo {
position: absolute;
width: auto;
height: auto;
top: 75px;
margin-left: 50px;
}
#b-1 {
position: relative;
border-bottom-width: 10px;
border-bottom-style: solid;
border-bottom-color: #E9E9E9;
width: auto;
height: 350px;
background: url('../img/100_0319.JPG') no-repeat center center;
}
#b-2 {
position: absolute;
width: 1000px;
height: 200px;
top: 75px;
bottom: auto;
opacity:0.5;
filter:alpha(opacity=50);
background-color: #E9E9E9;
}
#main {
width: auto;
overflow: hidden;
}
#middle {
float: left;
right: auto;
left: auto;
width: 660px;
min-height: 400px;
padding: 0 10px 0 10px;
background-color: #E9E9E9;
}
#left_menu {
width: 150px;
height: 100px;
padding: 0 5px 0 5px;
color: #E9E9E9;
background-color: #0b6a0b;
border-top: solid 1px #d60000;
margin-top: 10px;
}
#right_menu {
width: 150px;
height: 225px;
padding: 0 5px 0 5px;
color: #E9E9E9;
background-color: #0b6a0b;
border-top: solid 1px #d60000;
margin-top: 10px;
}
#left_menu ul, #right_menu ul {
list-style: none;
margin: 5pxs 0 0 0;
padding: 0;
}
#left_menu li, #right_menu li {
}
#left_menu a:link, #right_menu a:link {
width: auto;
height: 20px;
line-height: 20px;
display: block;
color: #e9e9e9;
text-decoration: none;
}
#left_menu a:visited, #right_menu a:visited {
text-decoration: none;
}
#left_menu a:hover, #right_menu a:hover {
text-decoration: none;
font-weight: bold;
}
#left_menu a:active, #right_menu a:active {
text-decoration: none;
}
#right_gradient {
float: right;
width: 160px;
min-height: 400px;
background: url('../img/gradient-r.png') repeat-y #9e9e9e;
}
#left_gradient {
float: left;
width: 160px;
min-height: 400px;
background: url('../img/gradient-l.png') repeat-y right #9e9e9e;
}
#footer {
margin-left: auto;
margin-right: auto;
line-height: 50px;
width: 1000px;
height: 50px;
color: #E9E9E9;
background-color: #1e1e1e;
}html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Mark Moes Hoveniers en Dienstverlening</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<!-- container with all containers -->
<div id="page">
<div id="b-1"><!-- background is header --></div>
<div id="b-2"><!-- opacity --></div>
<div id="logo">
<!-- logo -->
<img src="img/logo.png" name="Mark Moes.nl" title="Welkom bij Mark Moes.nl!" height="200px" width="330px" />
</div>
<!-- #0b6a0b -->
<div id="main">
<div id="left_gradient">
<div id="left_menu">
<ul>
<li><a href="#" >Menu</a></li>
<li>Nog wat</li>
</ul>
</div>
</div>
<div id="middle">
<div id="1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, lorem at iaculis tempus, orci nibh ultrices nisi, ac sodales dolor justo eget ante. Integer nec ante id turpis molestie fermentum. Nulla dictum lacus ac neque malesuada adipiscing. Sed luctus arcu eget felis imperdiet laoreet et eu dolor. Mauris lorem sem, euismod vel scelerisque non, congue non tortor. Curabitur ut enim urna. Pellentesque vehicula, quam non dictum blandit, nunc diam tristique tellus, varius scelerisque turpis nibh at turpis. Nam fermentum, augue quis aliquam aliquet, diam ligula congue nunc, ac rutrum urna nisi eget elit. Vestibulum condimentum convallis molestie. Nam eleifend arcu laoreet massa suscipit vel posuere diam condimentum. Praesent aliquam faucibus dolor a fermentum.
Nam lacus nulla, tincidunt quis tincidunt et, pellentesque nec elit. Donec vulputate vehicula aliquet. Cras consequat erat sit amet elit feugiat laoreet. Donec semper, lorem vel lobortis consectetur, nunc est convallis orci, non fermentum ligula justo vestibulum urna. Vestibulum semper condimentum urna, quis porta dolor adipiscing vitae. Ut ornare, metus non euismod dapibus, orci arcu ultrices erat, vel condimentum nisl nulla consectetur metus. Praesent porta laoreet tortor, eget ultricies metus ullamcorper faucibus. Quisque dapibus, ante volutpat ultrices congue, nulla ante vulputate nibh, sed tincidunt risus lectus nec nulla. Proin a lorem sit amet quam mattis faucibus. Curabitur tempor condimentum sapien et hendrerit. Suspendisse ut pulvinar nibh.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vehicula ultrices convallis. Nam id pretium mi. Vivamus placerat tempus augue, vel consequat magna volutpat consectetur. Aenean aliquet vestibulum vestibulum. Aenean hendrerit, ipsum nec tincidunt imperdiet, risus ipsum tempus velit, in blandit nisi libero sed est. Curabitur id turpis orci. Duis luctus mattis consectetur. Duis tellus augue, condimentum id convallis nec, pellentesque eu massa. Integer bibendum placerat commodo.
Sed semper nibh lectus, et tristique elit. Sed libero ligula, vulputate quis facilisis a, egestas eu leo. Duis sagittis egestas massa non adipiscing. Fusce fermentum blandit elit vel lacinia. Nulla consequat varius tortor nec faucibus. Proin elementum metus ultricies lectus auctor consequat pharetra massa tempor. Cras luctus, tortor in gravida tincidunt, quam nunc consectetur enim, vel hendrerit ligula dolor non ante. Aenean mollis venenatis tortor, ut congue dolor bibendum eget. Curabitur vehicula orci sed metus elementum pellentesque.
Quisque venenatis elit nec libero tincidunt in sodales neque aliquet. Aenean blandit, urna vel faucibus rutrum, nunc nisi ultrices ipsum, vitae aliquam ligula ligula eu sapien. Pellentesque diam velit, hendrerit a tincidunt dignissim, porta sed nisi. Curabitur luctus cursus tortor, eu tincidunt mi condimentum at. In facilisis mattis sem, nec faucibus dui porttitor sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Vestibulum eros ante, cursus id facilisis non, cursus sed sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ultrices, risus et ornare adipiscing, leo metus accumsan diam, ac commodo magna elit et nunc. Donec faucibus tempor consectetur. Maecenas accumsan orci vitae elit molestie ullamcorper malesuada urna aliquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, lorem at iaculis tempus, orci nibh ultrices nisi, ac sodales dolor justo eget ante. Integer nec ante id turpis molestie fermentum. Nulla dictum lacus ac neque malesuada adipiscing. Sed luctus arcu eget felis imperdiet laoreet et eu dolor. Mauris lorem sem, euismod vel scelerisque non, congue non tortor. Curabitur ut enim urna. Pellentesque vehicula, quam non dictum blandit, nunc diam tristique tellus, varius scelerisque turpis nibh at turpis. Nam fermentum, augue quis aliquam aliquet, diam ligula congue nunc, ac rutrum urna nisi eget elit. Vestibulum condimentum convallis molestie. Nam eleifend arcu laoreet massa suscipit vel posuere diam condimentum. Praesent aliquam faucibus dolor a fermentum.
Nam lacus nulla, tincidunt quis tincidunt et, pellentesque nec elit. Donec vulputate vehicula aliquet. Cras consequat erat sit amet elit feugiat laoreet. Donec semper, lorem vel lobortis consectetur, nunc est convallis orci, non fermentum ligula justo vestibulum urna. Vestibulum semper condimentum urna, quis porta dolor adipiscing vitae. Ut ornare, metus non euismod dapibus, orci arcu ultrices erat, vel condimentum nisl nulla consectetur metus. Praesent porta laoreet tortor, eget ultricies metus ullamcorper faucibus. Quisque dapibus, ante volutpat ultrices congue, nulla ante vulputate nibh, sed tincidunt risus lectus nec nulla. Proin a lorem sit amet quam mattis faucibus. Curabitur tempor condimentum sapien et hendrerit. Suspendisse ut pulvinar nibh.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vehicula ultrices convallis. Nam id pretium mi. Vivamus placerat tempus augue, vel consequat magna volutpat consectetur. Aenean aliquet vestibulum vestibulum. Aenean hendrerit, ipsum nec tincidunt imperdiet, risus ipsum tempus velit, in blandit nisi libero sed est. Curabitur id turpis orci. Duis luctus mattis consectetur. Duis tellus augue, condimentum id convallis nec, pellentesque eu massa. Integer bibendum placerat commodo.
Sed semper nibh lectus, et tristique elit. Sed libero ligula, vulputate quis facilisis a, egestas eu leo. Duis sagittis egestas massa non adipiscing. Fusce fermentum blandit elit vel lacinia. Nulla consequat varius tortor nec faucibus. Proin elementum metus ultricies lectus auctor consequat pharetra massa tempor. Cras luctus, tortor in gravida tincidunt, quam nunc consectetur enim, vel hendrerit ligula dolor non ante. Aenean mollis venenatis tortor, ut congue dolor bibendum eget. Curabitur vehicula orci sed metus elementum pellentesque.
Quisque venenatis elit nec libero tincidunt in sodales neque aliquet. Aenean blandit, urna vel faucibus rutrum, nunc nisi ultrices ipsum, vitae aliquam ligula ligula eu sapien. Pellentesque diam velit, hendrerit a tincidunt dignissim, porta sed nisi. Curabitur luctus cursus tortor, eu tincidunt mi condimentum at. In facilisis mattis sem, nec faucibus dui porttitor sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Vestibulum eros ante, cursus id facilisis non, cursus sed sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ultrices, risus et ornare adipiscing, leo metus accumsan diam, ac commodo magna elit et nunc. Donec faucibus tempor consectetur. Maecenas accumsan orci vitae elit molestie ullamcorper malesuada urna aliquam.</p>
</div>
</div>
<div id="right_gradient">
<div id="right_menu">
<p></p>
</div>
</div>
</div>
<!-- end of all containers -->
</div>
<div id="footer">
<p></p>
</div>
</body>
</html>
