bit of trouble with css

aoreste posted this at 11:40 — 11th May 2006.

They have: 7 posts

Joined: Feb 2006

<style type="text/css">

body {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
background-color:#D9D9D9;
margin:0 auto;
}

#headerbackground {
background:url(headerb.png) repeat-x;
z-index:1;
}

#header {
height:330px;
background:url(header.png) no-repeat center ;
z-index:100;
}

#footer {
background:url(footer.png) no-repeat center ;
height:133px;
}

#main {
background:url(body.png) repeat-y center;
text-align:left;
}



</style>

</head>

<body>


	<div id="headerbackground">
	
		<div id="header">		
		</div>
		
	</div>
	
	
			<div id="main">
			
                              <h1>CONTENT GOES HERE</h1><br>
                              asdasdasdasdasd
								
 			</div>
			
			
	<div id="footer">
	
	</div>
	

</body>
</html>

that's my centerd fixed layout with css. what i am having trouble with is placing the content in the "main" div. i just can't get the text where i want to. what kind of positioning should i use? i want the text aligned to the left, but NOT to the left of the page, the left of the content area (which is centered). and one more thing: on the header image, i need to position a bit of text at an exact position (it needs to correspond with and image that is the reflected text).

i kept messing around with different positioning types, but i just can't get it to work. either the graphics get messed up, or the text gets messed when i resize the browser window. any help will be appreciated.

thanks in advance

JeevesBond posted this at 12:12 — 11th May 2006.

He has: 3,956 posts

Joined: Jun 2002

aoreste wrote: i want the text aligned to the left, but NOT to the left of the page, the left of the content area (which is centered).

That's the problem, it's not centred. Even if it were centred the div's width is 100% so centring will have no effect.

Is the below more what you're looking for?

<style type="text/css">

body {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
background-color:#D9D9D9;
text-align: center
	/*IE Hack*/
}

#headerbackground {
background:url(headerb.png) repeat-x;
z-index:1;
}

#header {
height:330px;
background:url(header.png) no-repeat center ;
z-index:100;
}

#footer {
background:url(footer.png) no-repeat center ;
height:133px;
}

#main {
background:url(body.png) repeat-y center;
margin: 0 auto;
width: 30em;
text-align:left;
}
</style>

I've marked the bits in red that have been changed. Note that I've added a width to your main and put the margin onto it too.

As for the text with the header... I'm confused! Could you explain exactly what you need (am easily confused) and maybe post a link to the page so we can see the images?

a Padded Cell our articles site!

bgogol posted this at 18:51 — 11th May 2006.

They have: 21 posts

Joined: Jan 2006

Either add your background color to the div #headerbackground or create a new style like:

html {
background: #D9D9D9;
}

aoreste posted this at 12:35 — 11th May 2006.

They have: 7 posts

Joined: Feb 2006

http://test.inhive.com/bla

just resize the window and see what happens with "main"

aoreste posted this at 14:05 — 11th May 2006.

They have: 7 posts

Joined: Feb 2006

i figured it out. used relative positioning and pointed my text pixel to pixel. i tried it before but didn't work....but it's just fine now

aoreste posted this at 14:21 — 11th May 2006.

They have: 7 posts

Joined: Feb 2006

well, another problem just appeared. an ie-only bug (god, i hate ie). if you visit http://www.inhive.com with explorer, at the bottom of the page, you will see 2 white boxes which DON'T appear in firefox, opera. any suggestions?