PDA

View Full Version : CSS positioning problem - and IE problem


electrickeye
24 Mar 2008, 01:32 PM
My problem is that I have absolutely positioned content that doesn't stay in the same place relative to the background image when the window is resized. Here's an example.

one window size:
http://img366.imageshack.us/img366/5467/77707803oi1.jpg

another size:
http://img502.imageshack.us/img502/8014/26603250mv7.jpg

Here's the code for the page.

<html>
<head>
<title>Radiant Web Design</title>

<style type="text/css">

body {background: url(wall6.png) no-repeat;
background-position: top center; max-width:680px; margin-left:auto; margin-right:auto}

div {margin-right:10px; padding:5px; border-left:1px solid gray; border-right:2px solid black; border-top:1px solid gray; border-bottom:2px solid black}

#nav {float:left; width:25%; max-width:150px; min-width:150px; max-height:250px; min-height:250px; position:absolute; top:267px; left:185px}

#content {float:left; width:75%; max-width:450px; min-width:450px; max-height:619px; min-height:619px; position:absolute; top:267px; left:365px}

#slide {max-width:150px; min-width:150px; max-height:150px; min-height:150px; position:absolute; top:550px; left:185px}

#ad {max-width:150px; min-width:150px; max-height:150px; min-height:150px; position:absolute; top:736px; left:185px}

a {color: #66CCFF;
text-decoration: none}

a:hover {color: #FF33FF;
background-color: #66CCFF}

p {color: #66CCFF;
font-family: verdana
font-size: small}



</style>

</head>

<body>

<div id="nav"><h2 style="font-style:italic">Menu</h2>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="services.html">Our Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="content"><p>Welcome to Radiant Web Design, Iowa's premier web designer. Radiant Web Design is commmited to offering great web design to small businesses, churches, and individuals for the best prices possible. We offer some of the most competitive rates on the market and we garauntee all of our work.</p>
<br />
<p>Radiant Web Design consists of two web designers, Thomas Frank and Ben Luke. We are based out of Ankeny, Iowa, near the Des Moines Metropolitan Area. Check out the <a href="aboutus".html>About Us</a> section to learn more about our company and us.</p>
<br />
<p>Want to see some of our work? Check out the <a href="portfolio.html">Portfolio</a> page to see some of the websites we've made. We think you'll be impressed with them. Hit up the <a href="contact.html">Contact</a> page to get in touch with us and to access our order form. Thanks for checking out our site!</p>
</div>
<div id="slide"></div>
<div id="ad"</div>


</body>

</html>

Is there a way to keep the background image in the same place as the content so they will display the right way no matter the window size?

Also, IE completely destroys the page.

http://img116.imageshack.us/img116/7637/90415770di5.jpg

What do I do about this?
Wickham
24 Mar 2008, 05:16 PM
I can't test my ideas because I haven't got your images to test with.

However, you have the body background image top center so That's OK; it will centralise in large windows (but in a small window equal parts from left and right sides will be cut off).

You want your content to centralise the same way, so put all of it in a containing div with position: relative with a width and margin: auto to make it centralise like the body background image. This will mean that your #nav and #content position: absolute divs will take their positions from the top left corner of the containing div, wherever it is, and move with it in different size windows, so you may have to edit their top and left positions.

<body>
<div style="position: relative; width: 680px; margin: auto;">
<div id="nav">
..........
<div id="ad"</div>

</div><!--end of containing div-->
</body>
</html>

max-width:680px; margin-left:auto; margin-right:auto in the body style has no effect, as far as I know; the body is always full width but you can give fixed or % margins.

Use a fixed width at first with the containing div because max-width doesn't work in IE6. There are hacks to get round this.

Put a doctype above the <html> tag, say
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
from here:-
http://www.w3.org/QA/2002/04/valid-dtd-list.html