- This topic is empty.
July 29, 2011 at 2:34 pm #33712
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.July 29, 2011 at 2:38 pm #84229
They all have specific functions, so it depends on what you’re trying to do and how complicated the design is.July 29, 2011 at 2:42 pm #84230
@thedoc Here’s a screen shot of the web page from webdesign.tutsplus.com http://d3pr5r64n04s3o.cloudfront.net/102_Iconify/final-1.jpgJuly 29, 2011 at 2:45 pm #84231
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.July 29, 2011 at 2:49 pm #84232
@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?July 29, 2011 at 2:54 pm #84233
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.July 29, 2011 at 3:00 pm #84234
@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?July 29, 2011 at 3:21 pm #84235
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.July 29, 2011 at 8:44 pm #84245joshuanhibbertMember
@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/July 29, 2011 at 9:02 pm #84249
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.
- The forum ‘CSS’ is closed to new topics and replies.