I've managed to create the web page below which creates banded colours as a background. (Now that I've got it working it doesn't look great, but I've learnt a lot along the way )
I'm using JavaScript to add 'divs' whose top is unjusted each time so that they sit beneath each other. But surely this can be achieved with just CSS? I shouldn't have to adjust the 'top' property each time?
Both Firefox and IE seem to have a thin 'boundary' to the left and above. Is this correct, or can I adjust my styles somehow to remove this? Andy.
Code: Select all
<!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" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Banding Colours</title>
<style type="text/css">
#content {
position: absolute;
width: 100%;
padding: 0; border: 0; margin: 0;
}
.even {
background-color: #8cff8d; /* a faint green */
height: 30px;
width: 100%;
padding: 0; border: 0; margin: 0;
top: 0;
position: absolute;
z-index: -1;
}
.odd {
height: 50px;
width: 100%;
padding: 0; border: 0; margin: 0;
top: 30px;
position: absolute;
z-index: -1;
}
</style>
<script type="text/javascript">
function addBands() {
var hgt = document.documentElement.scrollHeight;
var topX = 0;
var i = 0;
while ( topX <= hgt ) {
var newd = document.createElement('div');
if ( i % 2 == 0 ) {
newd.setAttribute('class','even');
newd.setAttribute('id','even'+i);
document.getElementById('content').appendChild(newd);
document.getElementById('even'+i).style.top = topX + 'px';
topX += 30;
} else {
newd.setAttribute('class','odd');
newd.setAttribute('id','odd'+i);
document.getElementById('content').appendChild(newd);
document.getElementById('odd'+i).style.top = topX + 'px';
topX += 50;
}
i++;
}
}
</script>
</head>
<body onload="addBands();">
<div id="content">
<h2>Using CSS and Javascript to Band Colours</h2>
<p>I decided not to use a background image, but to use two divs of differing background colour. I used CSS to
define the behaviour of these elements. Javascript is then used to create alternating bands of colour.</p>
<p>The Javascript also needs to determine the height of the page and then use this to determine when the bands
should stop repeating.</p>
</div>
</body>
</html>