The Best way to Position Elements?

[sevodesign]

Hi, I’m wondering what’s the best way to position elements on a web page. With absolute, relative, static or fixed positioning? I’m working with a sliced psd, so theirs a bunch of images. Any help would be great! Thanks.

[TheDoc]

They all have specific functions, so it depends on what you’re trying to do and how complicated the design is.

[sevodesign]

@thedoc Here’s a screen shot of the web page from webdesign.tutsplus.com http://d3pr5r64n04s3o.cloudfront.net/102_Iconify/final-1.jpg

[TheDoc]

Looks pretty simple and straight forward!

You probably won’t need any static/fixed divs. You might need a couple absolutely positioned elements, but for the most part it will be pretty clean.

Actually, you probably won’t have to specify a position for any of them.

[sevodesign]

@thedoc “Actually, you probably won’t have to specify a position for any of them.” Really?! I’m not that good with coding, so how would I do it?

[TheDoc]

Sorry, Sevo – can’t walk you through an entire development process. The HTML structure should look pretty basic though – nothing special going on in the design.

Each rounded corner box would be a div (header, main, footer) and each of those will probably contain a few divs as well. You’ll probably want to wrap the entire thing in a wrapping div as well to keep it centered.

Give it a go and come back here when you run into a problem.

[sevodesign]

@thedoc no, I no what I would put each of the elements in, and I already have the wrapper div. What I was asking is how would I position those elements, whether I would use margins, absolute, or relative positioning, what would be the best way to go?

[TheDoc]

You could assign them a ‘relative’ position, but they default to that anyways.

Considering the flow of the document, there is no way you’d want to absolutely position them.

[joshuanhibbert]

@TheDoc The default position for elements is static. You can’t use top, bottom, left or right with static though. Also, static elements won’t contain absolutely positioned elements and z-index won’t work on a statically positioned element. You need to set position: relative; for all that to work. In regards to the flow of the document, static and relative are the same.

This is a great read on the topic: http://www.alistapart.com/articles/css-positioning-101/

[TheDoc]

True fact.

I suppose in my head they are the same because they work the same in the flow of the document, and I only add relative when I need to absolutely position something inside of it.

[Author]

Posts