Results 1 to 12 of 12
  1. #1
    Join Date
    Sep 2007
    Location
    Liverpool, UK
    Posts
    11

    Can anyone help with this CSS/Div Design?

    Hey, Ive been playing about with CSS abit, and ive completly lost track of why my site is doing this.

    Ive created a typical Header & 3 coloumn page with <div> tags,
    Ive used Position: absolute; and positioned them accordingly, but all seperate divs all position at the same point on the page, can anyone see if they can spot what ive done wrong?

    EDIT: All Divs position themselves at 10, 10

    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    
    <style type="text/css">
    #header {
     position:absolute;
     top:10;
     left:10;
     width:950px;
     height:242px;
     border:0px;
     background-color:#3300FF
    }
    #leftnav {
     position:absolute;
     top:262;
     left:10;
     width:170px;
     height:400px;
     background-color:#66FF00;
    }
    #content {
     position:absolute;
     top:262;
     left:190;
     width:590px;
     height:400px;
     background-color:#66FFFF;
    }
    #rightnav {
     position:absolute;
     top:262;
     left:790;
     width:170px;
     height:400px;
     background-color:#FFFF00;
    }
    #container {
     width:950px;margin:0 auto;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="header"></div>
    <div id="leftnav"></div>
    <div id="content"></div>
    <div id="rightnav"></div>
    </div>
    </body>
    </html>

  2. #2
    Absolute positioning is where you're going wrong.

    Try this; http://www.alistapart.com/articles/multicolumnlayouts

    HTH
    ServeYourSite
    Web hosting done right
    ██ Shared, Reseller and Dedicated web hosting
    An Easy Web Presence Company

  3. #3
    Join Date
    Jan 2004
    Location
    New England
    Posts
    100
    I am not very advanced at webdesign. Maybe partly for that reason, I decided to use 'tables' to stabilize the right column in a 3-column layout. Part of the reason was Explorer then (and maybe still now?) did not read 'minimum width'. This can be addressed with 'Microsoft Expressions'. However this was a bit above my head and anyway I liked the greater stability of the table, and was told it was alright if not overused.
    Krystof
    Stocknectar.Org
    [Max 2 active links in signature. Read latest rules. Do not mention own site or email (POC) in non-ad posts.]

  4. #4
    Join Date
    Feb 2006
    Location
    Kusadasi, Turkey
    Posts
    3,273
    Div positioning in three or more columns can be achieved using "float:left;" and "float:right;" properties, as well as "clear:left;", "clear:right;" and "clear:both;" properties.

    Learning how to use them is a little tricky. You should define the divs in the reverse order, right, center and left
    Fraud Record - Stop Fraud Clients, Report Abusive Customers.
    █ Combine your efforts to fight misbehaving clients.

    HarzemDesign - Highest quality, well designed and carefully coded hosting designs. Not cheap though.
    █ Large and awesome portfolio, just visit and see!

  5. #5
    Tables for layout is bad, mmm'kay?

    Seriously though, I would avoid using tables unless you specifically need to markup tabular data. ALA is an excellent resource (Link above), and the specific article I linked will help you with a multi-column layout. I personally would approach it a little differently, but that will get you on your way
    ServeYourSite
    Web hosting done right
    ██ Shared, Reseller and Dedicated web hosting
    An Easy Web Presence Company

  6. #6
    Join Date
    Jun 2003
    Location
    Scotland
    Posts
    298
    Quote Originally Posted by Harzem View Post
    Div positioning in three or more columns can be achieved using "float:left;" and "float:right;" properties, as well as "clear:left;", "clear:right;" and "clear:both;" properties.

    Learning how to use them is a little tricky. You should define the divs in the reverse order, right, center and left
    Im still trying to develop sites using css rather than tables as well, so just a little curious as to why you define the divs in reverse order?

    thanks
    Liam

  7. #7
    Join Date
    Feb 2006
    Location
    Kusadasi, Turkey
    Posts
    3,273
    Quote Originally Posted by liam_tmt7 View Post
    Im still trying to develop sites using css rather than tables as well, so just a little curious as to why you define the divs in reverse order?

    thanks
    Liam
    The reverse order is necessary only when aligning divs side by side.

    <div id="div1"></div>
    <div id="div2" style="width:33%; float:right;"></div>
    <div id="div3" style="width:33%;"></div>
    <div id="div4" style="width:33%; float:left;"></div>
    <div id="div5" style="clear:both;"></div>

    will align them like that:

    Code:
    
    ----------------------
    |        div1        |
    ----------------------
    | div4 | div3 | div2 |
    ----------------------
    |        div5        |
    ----------------------
    
    I have no idea why it is necessary to be that way, but it works.
    Fraud Record - Stop Fraud Clients, Report Abusive Customers.
    █ Combine your efforts to fight misbehaving clients.

    HarzemDesign - Highest quality, well designed and carefully coded hosting designs. Not cheap though.
    █ Large and awesome portfolio, just visit and see!

  8. #8
    Hm, it's not necessary, more optional, in my experience anyway. I prefer listing columns in the order that makes the most sense when viewed in linear(no style), usually left,center,right.

    There's no single way about doing this, I can think of several off the top of my head, 2 of which are noted in this thread, I just didn't want to complicate things for the OP
    ServeYourSite
    Web hosting done right
    ██ Shared, Reseller and Dedicated web hosting
    An Easy Web Presence Company

  9. #9
    Join Date
    Dec 2007
    Location
    Michigan
    Posts
    286
    in case you haven't already - install Firebug, it's saved me tons of time working on css stuff.
    Nexcess - Magento and Wordpress Hosting Specialists!

  10. #10
    Join Date
    Jan 2004
    Location
    New England
    Posts
    100
    Quote Originally Posted by Harzem View Post
    ...You should define the divs in the reverse order, right, center and left
    Thank you for the thoughtful tip Harzem.

    I know that impressive things can be done with fancy top-of-page navigation margins using <LI> ('list' codes) in reverse order. So, it makes sense that <DIVS> in reverse order can improve possibilities. It is strange that I never heard that idea before!

    When I learned CSS in 2006, I did read many articles including the ALA pages mentioned here. I used some tips from there. But, if you simply reduce the width of your IE browser while viewing most 3-column all-CSS pages, you usually find the page crumbles at some point. I don't care how 'accepted' or 'technically correct' this is. The proof of the pudding is in the eating, or in this case the viewing. As a craftsman, this is embarrassing. Also, although 'standard' screens are nowadays plenty large, there is an increasing use of laptops and ultra-portables. I take pride in my pages being 'accessible' no matter what is used. Also, the main bugaboo about 'tables' is they can muck things up for search engines and blind people. My semi-table design uses 'jump links' and frequent <h4> header summaries that more than make up for that.

    I do recognize that 'all CSS' is the ideal. I just don't have endless time to fiddle. For me, webdesign is a means to an end. I must move on. But when the time comes to upgrade my sites, I hope to explore this key tip about 'reverse DIV's.' Thank you!
    Last edited by krystofo; 01-16-2008 at 11:12 PM.
    Krystof
    Stocknectar.Org
    [Max 2 active links in signature. Read latest rules. Do not mention own site or email (POC) in non-ad posts.]

  11. #11
    Join Date
    Jul 2004
    Posts
    337
    I'm a not an SEO expert and I don't know if this is still applicable but what I know is that reversing the order of the layout's columns is done for SEO purposes. Say you have a two columns layout like this:

    Header
    Left col, Right col
    Footer

    To give the right column's content more weight you want it presented to search engins earlier then the left column - which is less important for your ranking and keyword relevancy - and since SEs read the content in the order you put in the markup, you put the right column before the left one and in the style sheet you give it a float:right.
    My woman left me..
    I've got no website..
    I've got no money..

  12. #12
    Join Date
    Jan 2004
    Location
    New England
    Posts
    100
    WEBDESIGNGOLD, I agree with your interest in SEO. This is in fact another reason that I decided to retain my semi-table design. I did not want to complicate the subject but since you mention it...
    • Usually, the left margin contains links to my most important pages. I want these links to get the most SEO value.
    • The right margin contains advertising or secondary page links. I want these at the end of the code.
    • The 'main text' is very important. This spells 'respectable content' to search robots. There should not be too many links before this text. Many SEO enthusiasts advise coding the CSS so that the main text comes before all the links! However in my opinion, you are short-changing your SEO credit transferrance if you do not place at least a few of your most important links near the top of the code.
    • My personal preference is to code in this order: <h1> header... then the left links margin... then the main text... then the right links margin. Just the way that people read the page, and just the way that tables are coded.
    • In most CSS tutorials, the code order seems to be: left links... right links... <h1>... main text. Not good, in my little opinion.
    • However, in any method used, the <h1> can easily be put first. This <h1> is by far the most important on-page SEO factor. (Not including the <title> metatag.) The rest is probably nitpicking. I am not yet sure that 'reverse DIVs' can give me a stable design to my standards... but if it can, I am sure that I can work with it... even being the SEO nitpicker that I am...
    Last edited by krystofo; 01-18-2008 at 02:17 AM.
    Krystof
    Stocknectar.Org
    [Max 2 active links in signature. Read latest rules. Do not mention own site or email (POC) in non-ad posts.]

Posting Permissions

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