Redesign from tables to CSS

[tekkie]

I'm just starting to really use CSS and I'd like to recode this site to get rid of the tables but I'm not sure the best way to do it.

http://www.techsuitesolutions.com/dev/money/

I'm planning on dividing up the 3 obvious areas with div id=header, div id=main, and div id=footer but I'm not sure how to code the nav box. Can I use a div id=nav and positioning attributes? Is that something I should use the float property on? And am I correct to use the 3 div id's on the 3 obvious sections?

Thanks for your help.

Becky

[markbrown4]

Hi Becky, and welcome to Sitepoint if you haven't been welcomed already..

Yes, that's a logical step dividing up your page into 3 divs.

I would also create a wrapper div for the fixed width and centering of the layout.

Can I use a div id=nav and positioning attributes? Is that something I should use the float property on?

Yep, you've got the right idea - Create another div within your main div with an id="nav"
If you apply float: right and give it a width it will go over to the right and the text will flow around it.

<div id="wrapper">
  <div id="header"></div>
  <div id="main">
    <div id="nav">
    <h2>Shell Tain</h2>
    <h3>Professional Certified Coach</h3>
    <ul>
      <li>Home/Current Events</li>
      <li>Newsletter-Money Knot</li>
      <li>Professional Speaking</li>
      <li>Coaching/Services</li>
      <li>Products For Sale</li>
      <li>Testimonials</li>
      <li>About Shell</li>
      <li>Contact</li>
    </ul>
    </div>
  </div>
  <div id="footer"></div>
</div>

Something like that would be my starting point. Remember to use semantic markup that means using list tags when you have a list of things - A heading tag for a heading etc.. You can completely control the style of these elements in the CSS.

Hope it helps

[Kravvitz]

I'd give #nav float:right and margins on all sides but for the top, a negative margin to pull it up to overlap the header. IE6 might need it to have position:relative.

Mark, why would you use an <h2> and an <h3> there? I'd say that the text there isn't used as headings.

[markbrown4]

Your probably right. I was just thinking that those words should have extra weight attached is all.

[tekkie]

Thanks! I'll start playing around with that.
Becky

[xiaawan]

HI,
Have a look here.(http://jeffhowden.com/code/css/forms/)
This site really helped me when I switched from Table Layout to Div based layout. I think it will help you.