SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Use of absolute positioning the best way to display #header then #content?

    I have a 3-column fixed-layout. The source is ordered as so for SEO (amongst other things):

    #content
    #header
    #footer

    The #header luckily has a pre-determined height. I'm hoping it doesn't give headaches when doing dropdowns, but that's another story. Anyways, its displaying normally like so atm:

    #header
    #content
    #footer

    Questions
    1. Is there any other way to achieve this effect w/o using #content {padding-top:130px;}?
    2. Is this the cleanest/bullet-proof way to have #header display above #content?
    3. If any, how would one do it using negative margins if does work better in this situation?

    http://test.pixelbebop.com/test28/

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
        <head>
        	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        	<title>Test - SEO and markup/source ordering</title>
          	<link rel="stylesheet" href="http://blueprint.pixelbebop.com/blueprint/screen.css" type="text/css" media="screen, projection" />
          	<style type="text/css">
                .container {
                    position:relative;
                    background:url('http://blueprint.pixelbebop.com/blueprint/lib/grid.png');
                }
                #header {
                    position:absolute;
                    left:0;
                    top:0;
                    width:100&#37;;
                    height:130px;
                    background:#09f;    
                }
                #content {
                    padding-top:130px;
                    background:#cba;    
                }
                #footer { background:#bca; }
                #analytics { display:none; } 
            </style>
        </head>
        <body>       
          
            <div id="page" class="container">
                <div id="content" class="clear">
                    <p>#content</p>
                    
                    <div id="content-primary" class="column">
                        <p>#content-primary</p>
                    </div>
                    
                    <div id="content-secondary" class="column">
                        <p>#content-secondary</p>
                    </div>
    
                    <div id="content-tertiary" class="column last">
                        <p>#content-tertiary</p>
                    </div>
                </div>
                
                <div id="header">
                    <p>#header</p>
                </div>
                
                <div id="footer">
                    <p class="last">#footer</p>
                </div>
                
                <div id="analytics">
                    <p>#analytics</p>
                </div>
    
            </div>       
        </body> 
    </html>
    TIA,
    Sherwin

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sherwin, contrary to popular belief, you're really not going to get a lot of "SEO benefits" from having a content first design. You're really better off (and so will your users) if you put the header first, then the menu(s), content, sidebar(s) and footer.

    While search engines can index a lot of content on a page, they do have their limits, and if your content comes first and that limit is reached, then how will the spider know about the links to the other pages on your site?

    Oh, and not only that, but screen readers will literally prevent anything with display: none; applied to it from being read to the user, so you may want to re-think that as well.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    In answer to question 3 there are are answers in this thread.

    I have to agree with Dan and I think it makes little difference to SEO unless you have pretty heavy header section with no real discernible content.

  4. #4
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Paul: Thanks for linking the two threads. Its pretty relevant in most cases.

    @Dan: Yeah, you're preaching to the choir =) ...but its a req in one of my projects.

    In terms of the "display:none", is that regarding the #analytics block? ...don't quite follow

    Thanks,
    Sherwin



    Quote Originally Posted by Dan Schulz View Post
    Sherwin, contrary to popular belief, you're really not going to get a lot of "SEO benefits" from having a content first design. You're really better off (and so will your users) if you put the header first, then the menu(s), content, sidebar(s) and footer.

    While search engines can index a lot of content on a page, they do have their limits, and if your content comes first and that limit is reached, then how will the spider know about the links to the other pages on your site?

    Oh, and not only that, but screen readers will literally prevent anything with display: none; applied to it from being read to the user, so you may want to re-think that as well.

  5. #5
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    @Paul: I know you have linked to that other thread and have used the anchor to my post in it. I have taken a look at the code/answers on that page as well as the link you provided after my first-post. I guess I couldn't find something that really would somewhat give me an idea to answer #3; which is if there's any other way to swap the display of header and content blocks other than the way I did it.

    Is that pretty much the best way one would do it? Which is...

    Code:
    .container {
        position:relative;
    }
    #header {
        position:absolute;
        left:0;
        top:0;
        width:100&#37;;
        height:130px;
    }
    #content {
        padding-top:130px;   
    }   
    
    <div class="container">
        <div id="content">...</div>
        <div id="header">...</div>
    </div>
    TIA
    Sherwin

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    There is NO need to use position:absolute unless elements need to overlap. No overlapping elements means that there is a better way to do the CSS without needing to position:absolute. Using position:absolute unnecessarily usually means your page will break unless the browser window is set to the expected width.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by piku View Post
    @Paul: Thanks for linking the two threads. Its pretty relevant in most cases.

    @Dan: Yeah, you're preaching to the choir =) ...but its a req in one of my projects.

    In terms of the "display:none", is that regarding the #analytics block? ...don't quite follow

    Thanks,
    Sherwin
    You'd be surprised by how good I am at preaching to the choir. I've gotten so used to it that it doesn't even faze me anymore. As for the requirement, is this for an employer or a client? (And yes, I was referring to the analytics DIV - screen readers sit on top of a browser, so if the stylesheet says something should not be displayed, the screen reader will honor that demand and not "display" it to the blind user.)

  8. #8
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    As for the requirement, is this for an employer or a client?
    Well, in the end, its more for personal consumption as learning is always good (whether it'd be good or bad).

  9. #9
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    There is NO need to use position:absolute unless elements need to overlap. No overlapping elements means that there is a better way to do the CSS without needing to position:absolute. Using position:absolute unnecessarily usually means your page will break unless the browser window is set to the expected width.
    Any examples of not using position:absolute?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Any examples of not using position:absolute?
    If you look at the other threads I linked to you can see it can be done with negative margins. However there is no real benefit because both methods are limited to moving the element into a fixed amount of space (created by the padding). You could create the space using ems rather than px so that the text could resize but neither method can accommodate an unknown height.

    Therefore absolute positioning in this case is as good as it gets if you have to use this approach.


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
  •