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>

Internet Explorer 6 : PNG Fix

While learning about CSS and tableless design using 'Divs' - I stumbled upon a problem. It took me quite a while to find the solution because I really didn't know what issue I was trying to resolve (I know, in order to resolve a problem you must first know what the problem is - yes, this is basic, I know.) I decided to use .png files.

Not sure what a .png is? Read on...
"For the Web, PNG really has three main advantages over GIF: alpha channels (variable transparency), gamma correction (cross-platform control of image brightness), and two-dimensional interlacing (a method of progressive display). PNG also compresses better than GIF in almost every case, but the difference is generally only around 5% to 25%, not a large enough factor to encourage folks to switch on that basis alone. One GIF feature that PNG does not try to reproduce is multiple-image support, especially animations; PNG was and is intended to be a single-image format only." source: www.libpng.org.

Anyway, I was testing my new images using IE7, Firefox and Opera - everything looked great. Then I remembered the dreaded IE6! I booted up a computer still running the piece of junk browser and noticed that my .png files (which should have had a transparent background) looked like crap (this is not a technical term) but I had no idea as to why they looked like crap! I struggled. I searched (but I didn't know what I was searching for and I almost decided to go back to .jpg's and .gif's but eventually I found this page - The PNG problem in Windows Internet Explorer. Not only did I find the solution (a bit of JavaScript code to make things better) but a description of the problem, with examples. Needless to say that after a week or so of frustration I was nearly airborne when I realized just how easy it was to make up for one of the many shortcomings of Internet Explorer 6!

Redesign In Progress

This is an ongoing project I am working on. I am redesigning Malware Solutions using tableless design. When completed the site will use valid XHTML and CSS. If you are interested you can see the progress here by clicking on "client login" (you do not need a password or username).

The purpose of the redesign is to optimize the site (SEO) and to see how far I can climb in search engine rankings using only SEO.

I don't have a time line for completion. This project will take a back seat as new clients are added to my work load.

Latest Project - Burlington, Vermont - Vacation Boat Rental - The Moonlight Lady

The Moonlight Lady will reside on Lake Champlain in Burlington, Vermont. The boat has been purchased but not yet delivered. This website design project began May 24, 2007. The site will use XHTML, CSS, JavaScript, a few Yahoo modules and who knows what else. I have full creative control over the design layout.

The project files can be seen here

This file will be updated to reflect the most current version. Previous versions can be seen by replacing index.html with index01.html, index02.html etc...