Align Shadows on Repeating Backgrounds
Tuesday, December 16th, 2008submitted by: Nick Little
One thing web designers do a lot is add fancy shadows and rounded corners to content boxes. This would all be great, except for the fact that they like to use repeating backgrounds as well. As a web programmer, one might end up trying to write HTML and CSS code for a design that looks very similar to the image on the right. You may ask, “How is the image used for the background of the footer going to be aligned properly with the background used for the content section?” Here is a nifty javascript routine that can be used in this situation:
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
}
else {
elm['on' + evType] = fn;
}
}
function fixHeight() {
var resizeElement = document.getElementById('divPreFooter');
var containerElement = document.getElementById('divWrapper');
var divisibleBy = 10;
var resizeOffset = 0;
if (containerElement.clientHeight % divisibleBy != resizeOffset)
resizeElement.style.height = ((divisibleBy - ((containerElement.clientHeight - resizeElement.clientHeight) % divisibleBy) + resizeOffset) % divisibleBy).toString() + 'px';
}
addEvent(window, 'resize', fixHeight, true);
addEvent(window, 'load', fixHeight, true);
This routine will adjust the height of an element (In the example above, ‘divPreFooter’) so that a different element (’divWrapper’) will have a height that is a multiple of a number (divisibleBy). This will align the repeating background on the content section with the background image behind the footer. The corresponding HTML and some sample inline CSS that work with the above routine is listed below.
<div id="divWrapper" style="background: url(images/contentbg.gif) top left repeat-y; overflow: auto; position: relative; width: 100%;">
<div id="divContent">
<!-- Here is where the content goes. -->
</div>
<div id="divPreFooter" style="height: 1px; overflow: hidden; position: relative;"> </div>
</div>
<div id="divFooter" style="background: url(images/footer.gif) top left no-repeat; height: 80px; overflow: auto; position: relative; width: 100%;">
<!-- Footer Content goes here -->
</div>
It works not only with shadows on repeating backgrounds, but also rounded corners or any type of alpha transparency on repeating backgrounds. It is much easier than trying to use images with alpha transparency in IE6, and it doesn’t use very many DIVs. This has been tested in the following browsers:
- IE6
- IE7
- Firefox
- Opera
- Safari
EDIT (12/22/2008): I have added a complete example that is listed below. I have also tweaked some of the above code, so that it matches the specific example below.
<html>
<head>
<title>Test</title>
<script type="text/javascript" language="javascript">
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
}
else {
elm['on' + evType] = fn;
}
}
function fixHeight() {
var resizeElement = document.getElementById('divPreFooter');
var containerElement = document.getElementById('divWrapper');
var divisibleBy = 10;
var resizeOffset = 0;
if (containerElement.clientHeight % divisibleBy != resizeOffset)
resizeElement.style.height = ((divisibleBy - ((containerElement.clientHeight - resizeElement.clientHeight) % divisibleBy) + resizeOffset) % divisibleBy).toString() + 'px';
}
addEvent(window, 'resize', fixHeight, true);
addEvent(window, 'load', fixHeight, true);</script>
</head>
<body>
<div id="divWrapper" style="background: url(images/contentbg.gif) top left repeat-y; overflow: auto; position: relative; width: 100%;">
<div id="divContent">
<p style="color: #FFF; padding-left: 50px;">Here is the content.</p>
<!-- Here is where the content goes. -->
</div>
<div id="divPreFooter" style="height: 1px; overflow: hidden; position: relative;"> </div>
</div>
<div id="divFooter" style="background: url(images/footer.gif) top left no-repeat; height: 80px; overflow: auto; position: relative; width: 100%;">
<p style="color: #FFF; padding: 30px 50px 0px;">Here is the footer.</p>
<!-- Footer Content goes here -->
</div>
</body>
</html>
A zip file of the above sample code with the background images can be downloaded here.
Drop down menus are one of the most useful tools in a website. They can make a big site very easy to navigate through. However, for the web developer they can seem like such a daunting task. This short tutorial can help anyone get started with a simple drop down. The drop down will work in all current browsers (Opera, Safari, Firefox, Chrome, and Internet Explorer 6+) if done correctly. IE will need a little bit of help using javascript.
And now for the fun part! Styling the drop down with CSS can be a tricky process at first. Here are a few basic suggestions for troubleshooting your CSS if it does not work:
There is a way to get elements in IE6 to have a min-height and a min-width. However, both require hacks that isolate IE6 from other browsers. We’ll start with the easy one.
