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 to the CF scene
    Join Date
    Jul 2010
    Location
    East Anglia, England
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Positioning element relative to fixed element

    Hello!
    I've read tutorials on CSS positioning but I'm still having some issues. I'm working with three DIVs; a header, footer and one for content. They're positioned fine.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>Title</title>
    
    <style type="text/css">
    
    body {
    margin: 0;
    padding: 0px;
    background-color: red;
    font-family: Helvetica, Arial;
    }
    
    .header {
    width:525px; min-height:160px; position:relative; z-index:100; left:200px;
    top:0px; text-align:left;
    background-color: blue;
    }
    
    .main {
    width:525px; overflow:auto;
    position:relative; z-index:2; left:200px; top:0px;
    background-color: yellow;
    }
    
    .footer {
    width:525px; overflow:auto;
    position:relative; z-index:100; left:200px; bottom:0px;
    background-color: blue;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div class=header>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    
    <div class=main>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    
    <div class=footer>
    footer
    </div>
    
    </body>
    </html>
    The problem comes here- I'd like to make the header and footer fixed. When I change the header from position:relative to position:fixed, the content div becomes is positioned relatively to the page instead of to the fixed header. I understand I could make the content div absolute, but I want to allow for changes in the size of header depending on what's in it. Is there anything I'm doing wrong or anything I can do to achieve the same effect?

    I've searched but I've got no idea what I'm doing wrong. Any help is greatly appreciated!
    Last edited by ReformatMe; 08-05-2010 at 10:18 AM. Reason: Reverted code

  • #2
    Regular Coder
    Join Date
    Jan 2009
    Posts
    193
    Thanks
    0
    Thanked 20 Times in 20 Posts
    For one thing don't use position, left, top, right and bottom to design your page layout unless you have a reason for it. Is there any reason why you are using them?

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Location
    East Anglia, England
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by skywalker2208 View Post
    For one thing don't use position, left, top, right and bottom to design your page layout unless you have a reason for it. Is there any reason why you are using them?
    Thanks for letting me know To be honest I'm not sure, is there a reason I shouldn't?
    It's valid code and it's used in this tutorial so I thought that was what I should use. I've changed it to using margin-left, margin-top etc, although this makes no difference

  • #4
    Regular Coder
    Join Date
    Jan 2009
    Posts
    193
    Thanks
    0
    Thanked 20 Times in 20 Posts
    Take a look at this article. Old but still points are valid.

    What made it break?

    One problem with laying out blocks of text in very specific positions on the screen is that it doesn't take into account users who have their font sizes enlarged for any reason. It also doesn't take into account users on flat panel displays who often have the display set to something other than 72 or 96 pixels-per-inch (ppi). And it seemed there were enough of both of these kinds of users that the calls came in.

    Blocks of text ended up being larger than accounted for by the designers for these users. So while the second paragraph may have been placed 175 pixels from the top of the page, at higher resolutions or larger font sizes, the end of the paragraph above it extended below that 175 pixel mark, causing the text to overlap. Of course, this was compounded as the page progressed, and sometimes a third paragraph would start before the first one had ended.
    http://www.algonquinstudios.com/Home...ch/WrongWayCSS

  • Users who have thanked skywalker2208 for this post:

    matthieujoly (08-05-2010)

  • #5
    New to the CF scene
    Join Date
    Jul 2010
    Location
    East Anglia, England
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by skywalker2208 View Post
    Take a look at this article. Old but still points are valid.



    http://www.algonquinstudios.com/Home...ch/WrongWayCSS
    Thanks for the link. I understand the benefits of a fluid layout but in this particular instance it is inappropriate. I'm working with a lot of images with very specific sizes that I have no control over. For example, I have no control over the header image size, it will be 525px in width.

    Does anyone know if what I'm trying to achieve is possible or know of another approach that would create the same effect?


  •  

    Tags for this Thread

    Posting Permissions

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