Positioning Headache!

absolute, relative, positioning, position, help

[kokeefe]

Hello, I'm a first time poster, and I have a begginer CSS question. I'm having a LOT of trouble positioning my web page elements.

I want to have a centered background in my container div, with a header div, sign-in div, menu div, content div, and footer div, all nested inside the container.

I go to position everything like I want and run into problems. The main problem that I run into is that my elements either do not move with my background when the screen is resized, or the background is always cut off. Could someone please recommend how I go about positioning my page in CSS? I've tried a lot of combinations between relative and absolute, but I'm stuck right now. Thanks all.

[createErrorMsg]

Welcome to WebmasterWorld!

Could you try to paint us a clearer picture of what you want your page to look like? See if you can consisely describe how you envision the page looking should everything go according to plan. Armed with that verbal image (and perhaps some of the code you've tried to use), we should be able to help.

[kokeefe]

Sorry about that....
I want a login, on the far right of the centered background, below that I want a menu on the far left of the centered background, a title of the content on the right side, and content below the title and next to the menu on the far right.

I've been messing with my code a lot so it might be a little messy. But here is what I'm working with now.

body {
font: 8pt/16pt Arial;
margin: 0px;
padding: 0px;
}

/* specific divs */
#container {
position: relative;
background:url(images/theme2.jpg) no-repeat center top;
background-color: #FFFFFF;
height: 1117px;
}

#top{

}
#signIn {
position: relative;
left: 695px;
top: 115px;
width: 175;
}

#title {
position: relative;
left: 272px;
top: 307px;
width: 100;
}

#bodyText {
position: relative;
width: 506px;
height: 419px;
left: 271px;
top: 348px;
}

#navigation{
position: relative;
width: 211px;
height: 385px;
left: 117px;
top: -338px;
}

Tell me if I need to include anything else. I still can't find a way to do what I want. I still have the problem of the background moving and the elements staying in place. Please give a brother some help.

[createErrorMsg]

I think the background moves on resize because it is positioned in the center of a <div> that itself resizes when the browser does. The elements, however, are positioned in pixel measurements away from the edges of the container, so the background shifts it's position on resize but the elements stay in the same place. The solution to this problem might be as simple as giving the <div> containing the background a width. Also, move the no-repeat to the END of the background rule declaration.

Just to clarify, is this the sort of thing you had in mind, with the background image behind it all?
________________________
¦___________________login¦
¦_______________________¦
¦_menu_____________title_¦
¦__1_______________text__¦
¦__2_______________text__¦
¦__3_______________text__¦
¦_______________________¦

If so, here's a place to start.

This layout splits up into 3 basic sections: the top where the login is, the left hand menu bar, and the right hand content. 3 parts = 3 <divs> + 1 <div> to contain it. So...

<div id="container">
<div id="top">
</div>
<div id="content">
</div>
<div id="menu">
</div>
</div>

I put the content first in the code because this way unstyled browsers will get the content higher on the page than the menu bar, saving them the trouble of scrolling through all the navigation. It also saves visually impaired users using screen readers from having to listen to your menu options on every page.

There are several ways to layout a page like this so the content is first. I'll show you how to do it by floating the content <div>. Many people shy away from this method because it requires giving the content a fixed width (preventing it from expanding on fully maximized browser windows). I tend to tightly control the width of my layouts anyway, so for me this is usually not an issue. If you would rather have your content width be fluid, you could use a different technique (search for 'Negative Margins' on the A List Apart website for one other option).

The above code shows the source for the layout. Now the css.

#container {
float: left;
width: 650px;
margin: 0;
padding: 0;
border: 0;
background: #color url(images/image.gif) top center no-repeat;
}

#top {
text-align: right;
}

#content {
float: right;
width: 500px;
margin: 0;
padding:0;
border:0;
}

#menu {
float:left;
width: 150px;
margin:0;
padding:0;
border: 0;
}

For the title, I would use either an image (if you want it fancy) or the better option of a simple <h1> tag, rather than a whole separate <div>. You can style the h1 to have any appearance you want (Note, the h1 comes hardwired with a top margin that will make it appear like the #content <div> is position lower than the #menu <div>. Set <h1> margin-top: to 0 and you'll see that this is an illusion.

You will obviously want to play around with margins and padding, borders, widths, etc, but this ought to be a decent starting place for you PROVIDED, I'll again point out, you don't mind having a fixed width content area.

You might notice this particular method doesn't use position: relative nor position: absolute, which were two terms you mentioned in your post. If you wanted to use those properties to accomplish this layout, you certainly could.

I like floats (when they work) because they do not require all the precise pixel positioning (top: 103; left: 67; etc) that the other methods do, so that's what I described here. This forum is hands-down the best one on the web, however, and I'm certain you'll be offered other methods that might suit you better than this one.

Best of luck!