Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS The Best way to Position Elements?

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #33712
    sevodesign
    Member

    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.

    #84229
    TheDoc
    Member

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

    #84230
    sevodesign
    Member

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

    #84231
    TheDoc
    Member

    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.

    #84232
    sevodesign
    Member

    @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?

    #84233
    TheDoc
    Member

    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.

    #84234
    sevodesign
    Member

    @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?

    #84235
    TheDoc
    Member

    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.

    #84245

    @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/

    #84249
    TheDoc
    Member

    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.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.