This week I have been working on a redesign of one of my web sites. The design of the website was acceptable by my client, but the desire was to maintain the same look of the page but make the pages more fluid. What this means is that the web page will shrink or expand based on the size of the monitor. The only limitations would be  the images themselves.

With this website, the frame looks kind of like an iPod… there are raised and rounded edges all around the header, navBar, mainContent, and footer.

This is the old layout.

So, on a screen set for 1280 px across, the mainContent was fixed at about 830px. This was driven by the top and bottom images of the frame or box.

So, with the new layout, there are several challenges.

1. Client wants a horizontal drop down navigation system, as well as a left, vertical, sidebar to carry an open navigational system.
2. Client needs a wider window for the mainContent.
3. Client wants to keep the same rounded corner look.

Ok, so I now know where my challenges are. This little tutorial does assume that you know a little about HTML and CSS. If you don’t, you can email me or you can go to the bookstore and get yourself books that can enlighten you. I will post some good titles in another post.

My first challenge is to create a page with a liquid or fluid layout. This kind of a layout is done in percentages. The only fixed items should be your images and an occasional table data that you need tight. All this is done primarily with div tags.

1. First I have to start with my container div that will hold my header, navBar, sidebar, mainContent, and footer divs. This is done with two different files, your css file, and your html file.
2. In my header div I created a table that holds my clipped images of the frame AND the logo or header art.
   1. First, you need images. I started with this:

   Create Corner Cutouts

   Cut out pixels for sides, top, & bottom

   Now, I set my Rectangle Marque tool to a fixed measurement. In this scenario, The corners are 40px X 40px & the edges I put as a thickness of 10 px and depth of 40 px.

HTML for #Header

Now here’s an image of the HTML in my #header. Because of how the different browsers work, you need to insert your images a couple of different ways. For instance, in this table data, we not only insert the image piece, but we also make it as a background image.

<td background=”images/design_elements/top-shadow.jpg” valign=”top”><img src=”images/design_elements/top-shadow.jpg” width=”10″ height=”40″ alt=”Design Element” /></td>

I found that if I d0n’t write it this way, the image won’t stretch all the way down the sides or across the top or bottom. NOTE: You don’t want to put this image in the CSS #header because you have the corners to worry about. Remember the rounded corners? If you place these images into the CSS file it will knock out the corners and make them square.

**Also this has to be written this way here otherwise your alignment to all other images will not match up.

If you have several table rows in your header, like I do, then you’ll have to make sure that your edge pieces are inserted on either side of that image. See here.

<tr>
<td width=”28″ background=”images/design_elements/lt-side-shadow.jpg”><img src=”images/design_elements/lt-side-shadow.jpg”   width=”40″ height=”10″ alt=”Design Element” /></td>
<td valign=”top”  bgcolor=”#11396a”>
<table width=”80%” border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ summary=”logo”>
<tr>
<td align=”center”><a href=”?content=home”><img src=”images/design_elements/Jeri-head.png” alt=”Headshot” width=”96″ height=”125″ border=”0″ /></a></td>
<td align=”center”><a href=”?content=home”><img src=”images/design_elements/title-header.png” alt=”Header Title” width=”500″ height=”160″ border=”0″ /></a></td>
</tr>
</table>
</td>
<td width=”28″ background=”images/design_elements/rt-side-shadow.jpg”><img src=”images/design_elements/rt-side-shadow.jpg” width=”40″ height=”10″ alt=”Design Element” /></td>
</tr>

Once you have that all written inside the #header tag make sure to close your table.

Completed Header

Now, the CSS file (which is external) has the #container set to 95%. My client wants as much white space that she can get & still be able to have some definition in the page. Of course, I don’t want this page to look flat or plain either. So we left just a little margin on the sides.

My next hurdle came with the horizontal drop down nav bar. My client wants this nav bar to be over on the right. However, this is not a FULL nav bar. So I had some maneuvering to do. This nav bar is made with javascript and images. So, after getting it to the right, I also had to insert my side edges. I did this by putting a table around it just like the logo/banner mentioned above. I did have to create fixed widths for the <td> around the side edge images. This helped to keep all lines and the navigation pushed over to where they need to be.

My biggest hurdle was the #sidebar and #mainContent section. I couldn’t figure out how I was going to create that edge with just these two “boxes.” Easy peasy … right? Well, not really. The problem I found was that I could build a table inside each div area that would allow for the edge, but what happens if one div area goes on and on… and the other stays small? You have a problem because one side will connect to your footer seamlessly and the other won’t. So, I had to figure out a way where ALL browsers could handle this dilemma. I am still young when it comes to CSS, I had to think outside my “table” box and think of a way that I could stretch both sides no matter if one went longer than the other. Normally, I would slap another table in there… but not sure where. I’d end up making tables inside of tables to get what I wanted… That is NO FUN…trust me!

So, here’s what I came up with. First, remember we have a #container that holds all of our other elements. SO, why not create another container (#container2) that only contains your #sidebar & #mainContent divs and is within the main #container tag? So I set up this script inside my CSS file.

#container2 {
width: 100%;
margin: 0;
padding:0;
background:#11396a;
background:url(../images/design_elements/lt-side-shadow.jpg) repeat-y left;
background:url(../images/design_elements/rt-side-shadow.jpg) repeat-y right;
}

So what I’ve done is created my container at (#container2), inside the main #container tag.I have set the width to 100% of the #container with no margins or padding. What I had thought about was how to get the images in there to stretch.. So I did a background: url() of each image, telling it to repeat-y and where to put it, right or left. When I ran this through all the browsers, the only one that did not like this syntax was Microsoft IE. So what I had to do then was to go into my HTML file and create a table inside the #container2 tag.

<div id=”container2″>
<table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td background=”images/design_elements/lt-side-shadow.jpg”><img src=”images/design_elements/lt-side-shadow.jpg” border=”0″ width=”40″ height=”10″ alt=”Design Element” /></td>
<td>

<div id=”sidebar”>

I found that if I created a table with a <td> for my left edge, and then a second <td> for my #sidebar and #mainContent and a third for the right edge, closing the #container2 div after my #mainContainer div, then IE could complete itself!

By doing it this way, you allow more flexibility in you #sidebar & #mainContent divs. You don’t have to worry about putting a height tag in there. (Not all browsers understand the ‘height’ variable in a <table> tag.)

The #footer div should be laid out just like the #header div.

Now, I found that in most cases here, I had to remove all padding and margins for this to work. If I need padding for this project, I will add it to the HTML of each div later.

Here is what the final page looks like.

Final Look of Page

Good Luck on your project. I hope this tutorial help you. Please leave a comment and let me know.

– More Later

Technorati Tags: Tips & Tricks!, Web Design, Web Pages