SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot AirFor's Avatar
    Join Date
    Oct 2010
    Location
    Berrigan, NSW, Australia
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning with fluid design

    Hi all,

    I've just got a quick question regarding CSS positioning and a fluid/flexible website. When you use absolute positioning, do you need to set the positioning values (such as top, right, left) as percentage and not pixels to avoid the positioned items from moving when resizing the browser window?

    Otherwise, if you use relative positioning, is it relative to the item above it in the flow?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by AirFor View Post
    if you use relative positioning, is it relative to the item above it in the flow?
    It's relative to its nearest positioned parent, or the viewport if there aren't any.

    Except maybe for little items here or there, I wouldn't be using positioning like this for a fluid design, though.

  3. #3
    SitePoint Zealot AirFor's Avatar
    Join Date
    Oct 2010
    Location
    Berrigan, NSW, Australia
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, so if I was to use absolute positioning, would I specify percent rather than pixels to keep the positioning when the browser resizes?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by AirFor View Post
    would I specify percent rather than pixels to keep the positioning when the browser resizes?
    Sounds like that will cause problems to me, but I'd need to see that actual situation to know for sure.

  5. #5
    SitePoint Zealot AirFor's Avatar
    Join Date
    Oct 2010
    Location
    Berrigan, NSW, Australia
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright, at the moment I'm using absolute positioning on here:

    http://www.dbelldesign.com.au/newsite

    When I change the browser size, the logo and logo text positioned at the top move.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    OK, that layout is way more complicated than it needs to be. Firstly, I would keep all those elements within the same header div. But to be honest, I would simply put all those elements into one image and place it over the top of your H1 using image replacement. That will be much simpler and much more reliable.

  7. #7
    SitePoint Zealot AirFor's Avatar
    Join Date
    Oct 2010
    Location
    Berrigan, NSW, Australia
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm interesting idea, so put both the logo / text into one image and then use image replacement? At the moment my H1 is indented, you probably noticed that. If I were to change it to image replacement, I noticed it still uses absolute positioning, does this mean in my case that when the browser is resized the image would still move?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by AirFor View Post
    I noticed it still uses absolute positioning, does this mean in my case that when the browser is resized the image would still move?
    No, because the position is in relation to a relative positioned H1. See this quick example here:

    http://pageaffairs.com/sp/airfor/

  9. #9
    SitePoint Zealot AirFor's Avatar
    Join Date
    Oct 2010
    Location
    Berrigan, NSW, Australia
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the example, using that does simplify it, it also removes a lot of the CSS rules I used to create the banner. Is it ok with you to keep that link on your site for a while? I'll have to have a play around to get it all working, remove the rules not required and so forth.

    Thanks for the help, I appreciate it.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    No problem. Yes, I'll leave it there, so no rush.

  11. #11
    SitePoint Zealot AirFor's Avatar
    Join Date
    Oct 2010
    Location
    Berrigan, NSW, Australia
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright I've done it, thanks for the help again - you can remove the example you provided.

    www.dbelldesign.com.au/newsite

    Now all I need to remember is how to set the dimensions for the clickable link part, if that makes sense, I don't want the whole banner to be the link.

    As well as doing that, I've cleaned up my code a little and changed some of the div names to better reflect what part of the page they relate to. Thanks for all your help, you've motivated me to learn something new and fix something old.

    Thanks!

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by AirFor View Post
    Now all I need to remember is how to set the dimensions for the clickable link part, if that makes sense, I don't want the whole banner to be the link.
    Ah, that will be a problem. Honestly, I'd leave it as is. The alternative would be to remove the background gradient from the image and place that as a bg image on the banner div, and just have the strip and wording as the log, in which case you can resize the h1 and span.

  13. #13
    SitePoint Zealot AirFor's Avatar
    Join Date
    Oct 2010
    Location
    Berrigan, NSW, Australia
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah I guess I'll just leave it be or remove the link altogether, it's close to the navigation which is the only issue I can see. Thanks again for your help.


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
  •