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?
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.
Thanks, so if I was to use absolute positioning, 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.
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.
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.
No problem. Yes, I’ll leave it there, so no rush. 
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?
No, because the position is in relation to a relative positioned H1. See this quick example here:
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.
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!
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.
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.