Div Layers : Overlays : Transparent Backgrounds and PNG Files

On Moonlight Lady's - 3 night boat cruise page I have a map of Lake Champlain which displays the route taken by the Moonlight Lady on her 3 day 4 night vacation packages. The problem I was facing was this. The map if somewhat large (576 KB - .png file) in side and the idea is that when you visit the page you first see the entire map. I have these tabs setup so that a visitor can click on Day 1 of the tour which would trigger a JavaScript event which would show/hide a div containing a map (301 KB) showing the route the boat will take on day 1 only. The problem is that I have a total of 5 maps to use. Which means that if they are hidden by default the browser is still going to have to load all of those images.

I mentioned this briefly to a co-worker (thanks Tim) and he suggested 'div overlays'. Then I thought about it: default div shows the full version of the map without any of the specific day to day info (576 KB). The map will be set as the div's background-image. Next I will create an image the exact size of the default map. This image will have a transparent background and will only show the highlights of that particular part of the vacation. This image (63 KB - as opposed to 301 KB which is the image without a transparent background) will be set in a div, which will have it's background-color set to transparent. What will happen is that when a user clicks on day 1 is that the div for day 1 will be exposed which will 'overlay' this transparent background image over the default map creating the illusion that this is a new map when indeed it's a much smaller map (63 KB). Then as the different tabs are clicked exposing each new map the other maps will become hidden.

For effect I put the 'slider' action on the div overlay as the new div is exposed. What this does is that when a tab is clicked, say day 1, the overlay 'slides' down from the top of the map until it is in position.

Oh, and if you are going to use .png files with transparent backgrounds don't forget that IE6 doesn't like .png files with transparent backgrounds. You will need to implement the IE6 PNG Fix. I posted about this in a previous blog entry. You should be able to dig it up or just do a Google search.

CSS: XHTML : Rounded Container

Let's face it. The rounded-edge look of the web is quite popular these days and for good reason. In my opinion, it's a softer, more modern, more friendly design element. Sure you could easily set up a webpage using <table> table tags </table> (please don't misunderstand, table tags have their place, I am taking about the layout of the page/site itself) but the correct way would be to use tabless design techniques using CSS and <div>divs</div>.


Anyway, this is how I have learned to create the rounded-border effect you can commonly see in some of the more recently designed sites. For some of you this might be basic stuff but I know that when I was trying to figure out the whole css/div thing I found many resources explaining the whole 'box model' thing and great articles on tableless design but I wish that one could give the basic, bare-bones version, no fluff. So here it is.

This is the content area. This would be filled with some sort of content.

The top section is just a div with an image called top.png. After that you have two divs. The outer div with the blue background and then a div inside that div where the content goes. These divs are followed by bottom.png also contained in it's own div.

This space will keep growing vertically as the you fill this area with text, images etc...

The idea is that you have a top image, a center content area and a bottom image.

Here is the top image:


Here is the bottom image:


To create these image open Photoshop and create an image using the total desired width of your webpage as the width of this new image. Use a transparent background. For example: for this example I created an image 400px wide and 30px high. I used the color #003399.

Then using the rounded rectangle tool create a rectangle spanning the entire width and height of the canvas.

Next using the Rectangular Marquee Tool select one half (horizontally) of the rounded rectangle and using the cut it from the image. Next click File - then New and paste the half of the rounded rectangle into this new canvas. Save the file in your images directory as top.png. Then cut the bottom image out, open a new file, paste the image in and save for web as bottom.png.

Here is the basic layout for the divs:

<div style="width: 400px; height: 15px; margin: 0; padding: 0; border: 0;"><img style="margin: 0; padding: 0; border: 0;" src="images/top.png" border="0" alt="top image" /></div>
<div style="width: 400px; margin: 0; background-color: #003399; padding: 0; border: 0; text-align: center;"><div style="width: 380px; margin: 0 10px 0 10px; background-color: #ffffff; float: left; border 1px solid #c0c0c0; text-align: center;"><p>This is the content area. This would be filled with some sort of content.</p>
<p>The top section is just a div with an image called top.png. Then you have the content area followed by bottom.png also contained in it's own div.</p>
<p>
This space will keep growing vertically as the you fill this area with text, images etc...</p></div></div>
<div style="clear: both; height: 0; margin: 0; padding: 0;"></div>
<div style="width: 400px; margin: 0; padding: 0; height: 15px; border: 0;"><img style="margin: 0; padding: 0; border: 0;" src="images/bottom.png" border="0" alt="bottom image" /></div>