Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    37
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need Help Tabless Layout

    Ok so recently I have been studying up on xhtml and css to learn tabless coding but now the biggest trouble im having is applying it.

    In this following layout can someone help me seperate it into sections so I can try to go from their I just cant seem to get my head around how this would seperate into containers.

    http://img179.imageshack.us/img179/5...mediav3eg0.jpg

    Thanks!

    Also if anyone knows of good sites to learn more about tabless coding I would love to know.

    I currently have learnt from reading the HTML Dog site and bought the HTML Dog book both have helped but I find both lack detail in the tabless coding section.

  • #2
    New Coder
    Join Date
    Nov 2006
    Location
    Bristol, UK
    Posts
    85
    Thanks
    6
    Thanked 6 Times in 6 Posts
    You've got some more reading to do yet....

    Quickly, you'll be using divs to separate the sections and placing them using floats (float:right; etc). This layout should be fairly easy to put together.

    You might want to check out sites like:
    www.csszengarden.com
    www.w3schools.com/css/

    HTH.

    Glenn

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,929
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    The most important reading you should do is on semantic HTML. Don't go at it too visually yet, at first think about how you would structure the document so people will still get the message without styles. (yeah those who know me might say I'm repeating myself but this is really crucial and I can't repeat it enough)

    So your basic structure is: header section, content section, footer section, all within one container.
    Code:
    <div id="container">
      <div id="header"><div>
      <div id="content"></div>
      <div id="footer"></div>
    </div>
    and you would use an h1 on top in the header section for the title of your page (company/website name) and a list (ul) for your navigation which you can put into the header (my personal preference) or in the content. On csszengarden.com it comes after the main content which you can also do. There are numerous approaches. Important is only that it is comprehensible for your visitors.
    Then your layout look like a basic two column layout so you might find this tutorial helpful.

  • #4
    New Coder
    Join Date
    Jan 2007
    Posts
    37
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the replies!

    Ok so here is my next predicement. The way I see it the header is obviously my top part with the navigation. My content is is the full middle part. My footer is the home about service... at the bottom? Also seeing that my text in the header is most likely going to need to be graphics as I doubt to many people have the text I used how do I go about doing that? Will I be using the method where I enter the text and hide it for accessibility reasons and then just put the image over top?

    Sorry about all these questions im finding the transition from tables to this very painfull.

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    37
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok now I got the ball rolling a bit. I put the html together as well as I could. Im sure there is errors and for the places with javascript I just through in script tags and left them blank for now seeing that I dont have the script yet.

    http://www.zendurl.com/davehorn/

    Is the coding alright?


  •  

    Posting Permissions

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