A query about Absolute Positioning

[Curtis Thompson]

hello…

no – absolute positioning is absolute – it will be 200px from the left no matter what.

in general you want to avoid doing this – there are usability reasons mainly, in that a user might have vision problems or want to see text larger, and if you have your entire site positioned exactly, that will make a mess if they try to make the font larger.

w/o seeing the site, i can’t offer much more detail, but i hope that answers your question?

sitruc

[Simon Matthews]

Thanks, but wouldn’t 200px from the left of a screen that is only 1000px wide (for example) be closer to the centre than 200px from the left of a screen that is say 2000px wide? I mean, if I have a wrapper with a width of 900px positioned 200px from the left, this would look centred on my screen, but on a screen with a higher amount of pixels on the horizontal, wouldn’t this mean that the wrapper would not be centred?

I think I’ve worked out a better way now though, and that is by having a wrapper that is positioned relative and then centred using margin-left:auto and margin-right:auto, and then I’ve used position:absolute for the elements inside the wrapper. I’ve uploaded a screenshot of the web page, which isn’t published. I haven’t uploaded pictures to this site before so not sure if I did it correctly.

I think I need to do a lot more research into positioning things yet! Very early days for me! 🙂

[Curtis Thompson]

hello…

well – yes if you go from the other side then ya something 200px from the left will be closer to the right if the right is less than more. but absolute is absolute. if you say “put this 200px from the top and 100px from the left” then that is where it will stay no matter what the user does.

centering a single div and then having your content in that is very standard. however within that centered div, based on what i’m seeing as your design, you have no need to position things absolutely. items will layout top to bottom on their own, so you can just specify widths of 100% for the logo block, the nav bar and the image beneath that and then they will just fill the width of the parent relative div. then for the items below that, you can set widths of 66% and 34% (or px widths – your choice) and then float the left one to the left and the right one to the right. no need to position them absolutely either…

absolute positioning is something you should use pretty rarely in general.

make sense? it does take some practice to get it right. here’s a tutorial on floating that might be a good one to study up on:

https://css.maxdesign.com.au/floatutorial/tutorial0801.htm

sitruc

[Simon Matthews]

Thanks, that sounds like good advice. I think I understand what you’re saying. I’ll have a go at laying the page out using that method instead.

One thing though, using this method of positioning elements, how do you position things on top of other things, such as with the social media icons on my page, which are positioned on top of the right hand side of the logo block? Incidentally, the logo, the grey area behind the nav bar, and the grey area down the bottom along with the paragraph and ‘check it out’ text, are all one image on my page, then I’ve just positioned the social media icons, the nav bar, the banner and the video on top of that single image. But even if the elements were all separate, I’d still need to position the social media icons on top of the logo background, so was wondering how that was done?

I’ll take a look at the tutorial link.

Thanks again!

[Curtis Thompson]

hello…

well – you have a few options – in the case of your site, i’d make the triangle logo one image and then set up your top bar with a bg image of the rest of the bg, a div with no float that has the logo, and then a div that is floated right that has a width of 40% or so and then you can align the social media images in that div with align center or right or whatever. you can end up getting them in a very fixed (absolute, but not the literal setting here) that will always be the same using margins on the parent div…

so something like (note i have styles here in the tag, but you’d have them in a css file somewhere):

<div style="width:100%;height:80px;background:#000url(/images/header_bg.jpg)no-repeatlefttop;">
    <div style="float:right;width:40%;height:25px;margin:10px20px00;">
        <!--put icons in here -->
    </div>
    <div>
        <!--put logo in here -->
    </div>
</div>
<div style="width:100%;height:30px;">
    <!-- nav bar elements -->
</div>
<!-- rest of page -->

again that’s just a model, you’d have to adjust to taste…but that’s the idea…

absolute isn’t wrong per se, it’s just nice to have a more flexible layout…

sitruc

[Curtis Thompson]

ugh – spaces inbetween styles are being eaten…you’d have to put those back. sorry about that.

[Simon Matthews]

Hi, thanks for all this!

Just need to clarify a few things:

1. Do you mean I should separate the logo text from the carbon fibre pattern that is directly behind the logo text? The thing with that is, the logo text casts shadows onto the carbon fibre pattern, so it’s all one design. Not sure if you meant this?

2. Did you include the main pale background image in this code? I mean the image that stretches the entire width and height of the page and is a light grey colour with clouds. This image is behind the main centred page.

I’m almost there!

Thanks.

[Simon Matthews]

Hi,

I tried your coding and the page is looking ok so far in the design mode of Dreamweaver, but for some reason when I preview the page in Chrome the header background image is not there – it’s just blank. Any ideas what could be causing this?

Thanks.

[Curtis Thompson]

hello…

[Simon Matthews] ” 1. Do you mean I should separate the logo text from the carbon fibre pattern that is directly behind the logo text? The thing with that is, the logo text casts shadows onto the carbon fibre pattern, so it’s all one design. Not sure if you meant this?”

well – you can take that art piece into photoshop and either make the logo a gif or a png with the shadow preserved and then overlay it. a png will preserve the shadow perfectly and render it great, but it might be a much larger file. a gif might be smaller, but preserving the shadow takes more photoshop knowledge…but it is doable. you could try the logo as a png first with the shadow in the logo file. worse case, you can put the logo into the background file, but keep in mind that it is a somewhat established design rule in web pages to have the logo clickable to return to the main site page, and if it’s in your bg, you can’t do that. a trick to get around that, however, is to take a 1×1 transparent gif file and put it in the layout above the logo outside of the bg. then make it the width and height of the logo and link it to the home page. it is the same effect.

[Simon Matthews] ” 2. Did you include the main pale background image in this code? I mean the image that stretches the entire width and height of the page and is a light grey colour with clouds. This image is behind the main centred page.”

no – this was just the code for the content inside the centered div.

sitruc

[Curtis Thompson]

hello…

impossible to tell w/o seeing code. i’d guess you have a relative path or a “c:\blah\blah” style url in the bg image declaration…

sitruc