Ik heb weer een probleempje. Na uren en uren geklooid en gezocht te hebben had ik thuis in een testmapje een site gemaakt met een opacity op de achtergrond met daarin een div die geen 'last' had van de opacity. Dus zodat zwarte tekst nog steeds zwart is.
Hier had ik echter een probleempje mee als de pagina's te lang werden hield de opacity op bij 100% van mijn beeldscherm/browser hoogte. Ik wilde dit even opline gooien om jullie om advies te vragen maar nu blijkt dat de hele opacity niet meer zichtbaar is.
Hier de link: http://deadbait.nl/test/index.php
Hier de code van mijn template, met de vraag of de style wel wordt opgepakt?
Code: Select all
{process_pagedata}
<!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" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
<head>
<title></title>
<link href="irrelevant6.css" media="screen" rel="stylesheet">
<style type="text/css">
#one {
position:relative;
}
#two,
#thr {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: inherit;
}
#two {
z-index: 1;
}
#thr {
background: white;
border: 1px solid black;
opacity: 0.7;
filter:alpha(opacity=70);
}
</style>
</head>
</__body>
<div id="one">
<div id="two">
<div id="header">header</div>
<div class="wrapper">
<div id="leftcolumn">
<p>links<p>links<p>links<p>links<p>links<p>links<p>links<p>links<p>links<p>links<p>links
<p>links<p>links<p>links<p>links<p>links<p>links<p>links<p>links<p>links<p>links<p>links
<p>links<p>links<p>links<p>links<p>links<p>links<p>links<p>links<p>links<p>links<p>links
<p>links<p>links<p>links<p>links<p>links<p>links<p>links<p>links<p>links<p>links<p>links
</div>
<div id="content">
<p>..website inhoud..<p>..website inhoud..<p>..website inhoud..
<p>..website inhoud..<p>..website inhoud..<p>..website inhoud..<p>..website inhoud..
<p>..website inhoud..<p>..website inhoud..<p>..website inhoud..<p>..website inhoud..
<p>..website inhoud..<p>..website inhoud..<p>..website inhoud..<p>..website inhoud..
<p>..website inhoud..<p>..website inhoud..<p>..website inhoud..<p>..website inhoud..
<p>..website inhoud..<p>..website inhoud..<p>..website inhoud..<p>..website inhoud..
<p>..website inhoud..<p>..website inhoud..<p>..website inhoud..<p>..website inhoud..
<p>..website inhoud..<p>..website inhoud..<p>..website inhoud..<p>..website inhoud..
</div>
<div id="rightcolumn">RECHTS</div>
<div class="push"></div>
</div>
<div class="footer">
<p>FOOTER TEKST</p>
</div>
</div>
<div id="thr"></div>
</div>
<__body>
</__html>
Code: Select all
* {
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* de margin waarde 'bottom' is de negatieve waarde van de footer grootte, dit is ter compensatie */
}
.footer, .push {
height: 100px; /* .push moet dezelfde hoogte hebben als .footer */
border: 1px solid yellow;
clear:both;
color: red;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
background: url('uploads/images/img_black_bottom_low_top.png') #000;
background-repeat: no-repeat;
}
#one {
width: 900px;
height: 100%;
position: absolute !important;
left: 50%;
margin: 10px 0 0 -450px;
background: url('bg2.gif');
background-repeat: repeat-y;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
margin: 5px 5px 5px 0px;
width: 170px;
float: left;
}
#content {
float: left;
color: #000;
border: 1px solid #ccc;
margin: 0px 5px 5px 0px;
padding: 0px;
width: 498px;
display: inline;
}
#rightcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 5px 0px;
padding: 0px;
width: 195px;
float: left;
display: inline;
}
#header {
width: 900px;
margin: 0 auto;
height: 100px;
border: 1px solid red;
position: relative;
}
!
