Grow your CSS skills. Land your dream job.

what is the best way to position these elements???

  • # May 27, 2009 at 11:13 am

    firts take a look at the image.

    [img]http://www.freeimagehosting.net/uploads/f7987a545b.jpg[/img]

    i’m worried , i choosed to take the hearder as a div background then inserting the logo as an image in my xhtml document ,
    finally i used an ordered list for the menu .
    i positioned the logo and the menu by giving a relative position to the div header, then giving to both logo and menu an absolute position.
    is it the right way to position them???

    # May 28, 2009 at 3:17 am
    "webdesigner82" wrote:
    is it the right way to position them???

    There really isn’t a right and a wrong. (There is a valid and not valid, though.) If it validates and works in all browser, I would say you have done marvelously.

    Personally, I try to stay away from absolute positioning unless nothing else will work. I feel like it’s my cheap shot ace in the hole…

    I would give the <div> a set height and padding-top to push down the child elements. (Remember that the height of your <div> will end up being your height + padding-top + padding-bottom.) Then I’d just float the Menu to the right hand side.

    # May 28, 2009 at 4:24 pm

    Here is what I would do:

    Code:

    The <h1> can be coded like a div, so it’d be something like:

    h1 { text-indent:-99999px; background: url(yourlogo.jpg); … etc etc }

    # May 29, 2009 at 9:12 pm

    thank’s guys for giving me help and time, i appreciate your efforts.
    frankly what ashton suggested me to do seems to be the more logic and semantic one,Thedoc thank’s for the trick of img text replacement.
    ashton can i use a high value of padding top just to push the elements to same place as they appear in the psd file???.

    thank’s

    # May 30, 2009 at 12:34 am
    "webdesigner82" wrote:
    ashton can i use a high value of padding top just to push the elements to same place as they appear in the psd file???.

    Yes, you can use any value you want.

    Rob
    # May 31, 2009 at 8:33 am

    No don’t use high value padding, you will start to get problems cross browser. Always use positioning to get the actual position, and then use padding for just what it is, padding, not positioning.

    Once you get your head around using positioning it will all fall into place, you should never position elements with margin and padding, its just not cricket. Its like using a haddock to cut down the mighty-est oak in the forest.

    here is an overview I wrote, ignore if you know it already lol

    http://alteredaspect.info/the-art-of-css-positioning/

    # June 1, 2009 at 11:01 pm

    I like The Doc’s markup there, very clean. I’d probably bust out a static height on the div with the background-image. Normally static heights are to be avoided but that UL text would have to get pretty gigantic to bust out.

    Don’t be afraid of absolute positioning though, there is nothing wrong with putting that navigation on the right with absolute positioning.

    I also really like what Rob had to say: "Use padding for padding, not positioning". Too often you see padding misused to position things.

    # June 2, 2009 at 1:49 am

    I’ve use a little bit of Padding and Margin to positioning an image today, but I’ll change it to position:relative(parent) position:absolute(child) right now! Awesome tips… But I have a question: If I don’t need a height value of Padding or Margin (10px – 40px) we can adjust these values to push an element a little bit?

    # June 2, 2009 at 3:40 am

    I suspect coming from Salford he needs all the ‘padding’ he can get ;)

    # June 2, 2009 at 3:43 am
    "Robskiwarrior" wrote:
    No don’t use high value padding, you will start to get problems cross browser. Always use positioning to get the actual position, and then use padding for just what it is, padding, not positioning.

    :oops: That’s the biggest "failure" in my CSS. I do love my padding and Margin… but I still "get it to work" in all major browsers. It definitely takes extra fiddling when you do it "wrong," but I’m (forever) learning. ;) Good article btw.

    Rob
    # June 2, 2009 at 3:57 am
    "AshtonSanders" wrote:
    "Robskiwarrior" wrote:
    No don’t use high value padding, you will start to get problems cross browser. Always use positioning to get the actual position, and then use padding for just what it is, padding, not positioning.

    :oops: That’s the biggest "failure" in my CSS. I do love my padding and Margin… but I still "get it to work" in all major browsers. It definitely takes extra fiddling when you do it "wrong," but I’m (forever) learning. ;) Good article btw.

    hehe – I used to be guilty of it, but then I think everyone is at one point or another. It took me ages to get my head around positioning, but now I will evangelise positioning where ever I can!

    # June 2, 2009 at 3:20 pm

    Guilty as charged. I use margin and padding to position all the time. IE7 and below doesn’t work very well with this method though. I think people shy away from absolute positioning because of the fear of overlapping elements and breaking the flow of the document.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".