SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member tekkie's Avatar
    Join Date
    Mar 2001
    Location
    Portland, OR
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Redesign from tables to CSS

    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

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    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.

    Code:
    <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

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Your probably right. I was just thinking that those words should have extra weight attached is all.

  5. #5
    SitePoint Member tekkie's Avatar
    Join Date
    Mar 2001
    Location
    Portland, OR
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I'll start playing around with that.
    Becky

  6. #6
    SitePoint Zealot xiaawan's Avatar
    Join Date
    Sep 2007
    Location
    Islamabad, Pakistan
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Zia Awan


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •