Forums

webdesigner82

firts take a look at the image.

http://www.freeimagehosting.net/uploads/f7987a545b.jpg

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

AshtonSanders

"webdesigner82" said:
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.

TheDoc

Here is what I would do:

<div id=\"header\">
    <h1>Company Name</h1>
    <ul>
    <li>Nav Item 1</li>
    <li>Nav Item 2</li>
    <li>Nav Item 3</li>
    <li>Nav Item 4</li>
    </ul>
</div>

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

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

webdesigner82

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

AshtonSanders

"webdesigner82" said:
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.

Robskiwarrior

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/

chriscoyier

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.

ipad

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?

davesgonebananas

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

AshtonSanders

"Robskiwarrior" said:
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.

Robskiwarrior

"AshtonSanders" said:
[quote="Robskiwarrior"]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.[/quote]

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!

JonPiehl

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.

treehouse : what would you like to learn today?

Forums

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