Convert a layout problem to a DIV solution

using markup/css but tables are broken

[Grump]

I have several problems with my new design, so I thought I'd work my way up from the bottom. :) The bottom of my page has 2 repeated graphics that are supposed to go from browser edge to edge with no gap at the ends or between them. I have tried several options in markup and css, but continue to have a problem.

Please take a look at the following markup and relevant css to see if you can suggest a solution. I was hoping I could convert the section to DIVs and would appreciate any guidance in that direction.

<!-- /BOTTOM NAVIGATION -->
<!-- FOOTER -->
<tr>
<td>
<div>
<table class="foot">
<tr>
<td>
<table class="foot">
<tr>
<td class="footer1">&nbsp;
</td>
</tr>
<tr>
<td>
<table class="foot">
<tr>
<td class="footer2">Website Style &amp; Content &copy; 2005 [Grump]
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<!-- /FOOTER -->
</body>
</html>

.foot
{
background-color: #fff;
color: #009;
font: 10pt verdana, arial, helvetica, sans-serif;
text-align: center;
width: 100%;
margin: 0 auto;
}
.footer1
{
background-color: #fff;
background-image: url(images/nav/footer1.gif);
background-repeat: repeat-x;
color: #009;
font: 10pt verdana, arial, helvetica, sans-serif;
width: 100%;
height: 20px;
text-align: center;
margin: 0 auto;
}
.footer2
{
background-color: #fff;
background-image: url(images/nav/footer2.gif);
background-repeat: repeat-x;
color: #009;
font: 8pt tahoma, verdana, arial, helvetica, sans-serif;
font-style: italic;
font-weight: bold;
text-align: center;
width: 100%
height: 17px;
padding: 0;
margin: 0 auto;
}
.footer2 a
{
color: #009;
text-decoration: none;
}

Thank you,

Grump

[Fotiman]

Wow... that's a lot of nesting. :)
Without seeing the actual images it's hard to know what this is suppposed to look like. But you could try something like this:

<!-- Close the table and div that were open --> 
</table> 
</div> 
<!-- FOOTER --> 
<div id="footer"> 
 <div class="copyright"> 
  Website Style &amp; Content &copy; 2005 [Grump] 
 </div> 
</div> 
<!-- /FOOTER --> 

And the style for that would be something like:

#footer 
{ 
 padding-top: 20px; /* Make this the height of your first repeating image */ 
 background: #fff url(images/nav/footer1.gif) repeat-x; 
} 
#footer .copyright 
{ 
 background: #fff url(images/nav/footer2.gif) repeat-x; 
 color: #009; 
 font: 8pt tahoma, verdana, arial, helvetica, sans-serif; 
 font-style: italic; 
 font-weight: bold; 
 text-align: center; 
 width: 100%  
} 

[Grump]

Fotiman,

Welcome to the forums! And thank you so much for solving my problem. It works perfectly.

Of course, my real problem is not understanding how that worked and how I can continue to replace the table structure on my site with a div/css structure.

I diverted from your suggestion slightly. You said to close the table and div that were open, but the div is the wrapper div for the whole page, so I closed it after the footer code. Still worked like a charm. I am amazed at the amount of code that was wasted to do it the wrong way.

Can't show you the site or graphics because they don't allow that here. Couldn't even email you the link. The foooter1 graphic looks like a 400x20px hardwood flooring plank, which when repeated, looks like a very long plank with lots of character. I tried making a shorter one, but the pattern repeats itself too close together. You don't do that even with real flooring, so I couldn't do it on my page. ;)

The footer2 graphic is just a miniature upside-down version of the gradient I used at the top of the page (that graphic is 5x190px) that is a repeating 5x17px. I like the look and am proud that I was able to design all the graphics myself with Fireworks 8.

Thanks again for your help. Stick around. You're gonna be a valuable asset to the community.

Best r'gards,

Grump

[Fotiman]

Just glad to be of help. :)

> Of course, my real problem is not understanding how that worked and how I can continue to replace the table structure on my site with a div/css structure.

Replacing a table layout with pure CSS can be difficult if you are not familiar with CSS. Eric Meyer's book "Eric Meyer on CSS" walks you through stuff like converting a table based layout to CSS.

To sum up what I did:
First I looked at what content you actually wanted displayed. It looked like a containing just a background image, followed by a row containing a different background with the copyright info. Then I thought about what that meant logically. Really, your content was a footer that contained copyright information. So I started by creating the basic html to represent that data:

<div id="footer"> 

Since there's only one footer, I used an id to represent this item.

 <div class="copyright"> 

I probably could have used an id here as well, but I figured copyright might be something generic that could be included in more than one place, so I used a class instead. I nested this within the footer div.

  Website Style & Content © 2005 [Grump] 

That's the actual content to be included. So then it's just a matter of closing the divs.

 </div> 
</div> 

Now, a div is a block level item, so by default it should extend to fill the width of whatever block contains it. So that should meet the requirement:
"supposed to go from browser edge to edge with no gap at the ends".

Next was the graphics part. It was easy to see that you were applying footer2.gif to the background of the content, so I used the inner most block to display that image:

#footer .copyright  
{  
 background: #fff url(images/nav/footer2.gif) repeat-x;  
 color: #009;  
 font: 8pt tahoma, verdana, arial, helvetica, sans-serif;  
 font-style: italic;  
 font-weight: bold;  
 text-align: center;  
 width: 100%  
}  

I started by specifying #footer .copyright, in case there was something else on the page that used the copyright class. This means apply these styles to items with class (.) copyright that have an ancestor with the id (#) footer. I then applied the background color and image, and used your font and color settings.

Next, I had to apply the top image. Since there was only one more item that I could apply a background image to, I had to use that. So I gave it a background image. But in order to make sure it wasn't obscured by the image in the .copyright container, I applied some padding to the top of the div. This forced the copyright div to begin after the padding, but the background is still applied at the top. Note, I probably should have specified "top left" or "top center" in the style rule, like so:
background: #fff url(images/nav/footer1.gif) top left repeat-x;

Anyway, that's the summary. Hope that's helpful. :)

> I diverted from your suggestion slightly. You said to close the table and div that were open, but the div is the wrapper div for the whole page, so I closed it after the footer code.

I almost included a comment to that effect, but figured you would know to close it after if needed.

> Still worked like a charm. I am amazed at the amount of code that was wasted to do it the wrong way.

That's the beauty of CSS. Check out the site:
[csszengarden.com...]

There are a bunch of CSS designs all applied to the same, very simplistic HTML code. Very impressive.

Best,
Peter

[Robin_reala]

Excellent post Peter!

[Grump]

Yes, and thank you for the further clarification. It has prompted me to look further into designing with divs and css, so I've spent most of the day reading and trying to absorb the wealth of information out there.

I have seen a number of pages and websites that have no tables what so ever and they all look great. It is encouraging and, to tell you the truth, it looks easier to write and understand than straight HTML (hoping I'm not giving away any trade secrets <wink>).

Looking forward to more discussions on the forums about this form of design and layout.

Grump