The new forums will be named Coin Return (based on the most recent vote)! You can check on the status and timeline of the transition to the new forums here.
The Guiding Principles and New Rules document is now in effect.
CSS Help
Jensen
Registered User regular
Registered User regular
Is there a way, when positioning something with CSS, to make it remain in the same relative position regardless of what resolution people look at it in? I'm experimenting with it and I've got a header image that's about 750px in length centered at the top of the page. I want the menu bar to be beneath it on the right. So I place it where I want it, then i test in a different resolution, the menu bar is now farther right than in the previous resolution (Breaking the H-scroll and destroying the streamlined appearance). How can I make it so it's always in the same spot? Some property I'm missing?
Jensen on
0
Posts
The only way to get things positioned properly & change as resolution changes is percentage values.
I would suggest something based on :
BODY { width:85%; margin:0 auto; text-align:center; }everything you place in the body section *should* now be centered on both IE, firefox, etc with a certian amount of whitespace on either side. I say *should* because all browsers are different, and IE, firefox both use different criteria to deermine witdth... so you will see different sizes. Change the 85% to your liking (bigger number = bigger screen usage).
The only way to make it look 100% the same everywhere is absolute positioning, and/or very specialized hacks.
Under that 'body' section, everything can be relatively positioned... for instance, your right hand menu can be given a 'right:0;' notation and it will remain on the right most side, but still retain the margin from the body..
you *might* also want to put everything in one wrapper div, instead of using a body tag, but i don't know what the 'standard' would be.
Librarians harbor a terrible secret. Find it.
<body> <div id="header"><img src="yourimage"/></div> <div id="wrapper"> <div id="nav">blah blah</div> <div id="content">blah blah</div> </div> </body>Do a margin:auto; on the body (to center your page) you can overwrite the top and bottom values as you see fit and then put a clear:both on the wrapper div, float your nav right and your content left too.
that should work i think, good luck.
if you put a text-align:center on the body tag wont all child elements recieve that styling also? (paragraphs ul's etc)
Edit*
Sorry also what do you mean by menu bar, i thought you meant a navigation menu, but is it a horizontal menu bar you want under your banner? if so, put them both into a container div that has a width of 750px and clear the image. then align your menu div to the right
For the content, you can (and should) wrap them in its own div with text-align:left , or just give that to all P tags, etc.
i think the OP meant to have a centered header image, and then a menu section down the right hand side.
The bigger question is how he intends to fit in his content, as you can't just throw a menu down the side unless you workin float:right, cretive margin padding, or absolute positioning.
Librarians harbor a terrible secret. Find it.