PDA

Click to See Complete Forum and Search --> : div and positions problems

bejitto101
04-28-2008, 05:24 PM
First, heres the basic html code I'm using.

<body>

<div id="main">
<div id="banner" />

<a href="index.php"><img id="header" src="images/bicyclebob.png"/></a>

<div id="maincol">
....content
</div>

</div> <!--end of main-->

and the css:

#banner{
background:url("../images/banner.png") repeat-x top;
}

#main{
width: 800px;
}

#maincol{
background-image: url("../images/backy.png");
margin-top: 150px;
margin-left: 10px;
z-index: 1;
}

#footer{
margin-top: 10px;
text-align: center;
}

#header{ float: right; }

The problem is thus, for some reason my bicyclebob image and even my banner line up with the #maincol 150px down the page. My banner that should be repeated across the entire top of the page even cuts off with the #maincol at 800px. My xhtml validates so I have no idea whats causing this.

Any suggestions or ideas? Thanks!
apeace
04-28-2008, 08:00 PM
It's impossible to know exactly what you mean unless we can get a link, or at least some screen shots!

I could find a definite solution if you gave a link, but try this:

#banner{
background:url("../images/banner.png") repeat-x top;
display: block;
clear: both;
width: 100%;
}

The key is the clear: both. I THINK that will fix what you are talking about...but I'm still not really sure what you are talking about.

Let me know how it goes! If you can give us a link, do so and members of the community will be able to serve you better.
Centauri
04-28-2008, 08:34 PM
First off, a div is not a self closing tag - if you want an empty div, it needs a closing tag.<div id="banner" /> should be <div id="banner"></div>
Next, a div cannot expand to its background image size - you need to set an appropriate height.
bejitto101
04-30-2008, 12:12 PM
I would give you a link if I could but its a secure site. I can do pics however and I can give you all the html if you want, no problem there. Just ask

Heres the pics:

This is what it looks like before I changed anything:
http://depts.washington.edu/asuwxpcl/images/example2.jpg

This is what I wanted it to look like:
http://depts.washington.edu/asuwxpcl/images/example.jpg

And this is when I change the css of the banner:
http://depts.washington.edu/asuwxpcl/images/example3.jpg

Just disappears completely. Thanks for all your help! Anyone want the html?


EDIT: I played with it, and made a copy so now I can link the site. Here: http://depts.washington.edu/asuwxpcl/example.php
Centauri
04-30-2008, 07:54 PM
The banner would naturally be constrained to the width of #main if it is inside it, so first move the banner before #main :<div id="banner"></div>
<div id="main">and then give it a height as I mentioned before - an empty div with no height set will collapse to zero height, and therefore no background image can display :#banner{
background:url(images/banner.png) repeat-x top;
height: 108px;
}note that the div will naturally expand full width without having to specify that.

The vertical alignment is due to margin collapse, pulling the top of #main down. Top padding on #main to space the bicyclebob image from the top will also prevent the margin collapse :#main{
width: 800px;
padding-top: 10px;
margin: 0 auto;
}The auto side margins also centre the site.