/    Sign up×
Community /Pin to ProfileBookmark

div and positions problems

Copy linkTweet thisAlerts:
Apr 28.2008

First, heres the basic html code I’m using.

[code=php]<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–>[/code]

and the css:

[code=php]#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; }[/code]

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!

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@apeaceApr 29.2008 — 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:

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

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.
Copy linkTweet thisAlerts:
@CentauriApr 29.2008 — First off, a div is not a self closing tag - if you want an empty div, it needs a closing tag.[CODE]<div id="banner" /> [/CODE]should be [CODE]<div id="banner"></div> [/CODE]
Next, a div cannot expand to its background image size - you need to set an appropriate height.
Copy linkTweet thisAlerts:
@bejitto101authorApr 30.2008 — 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
Copy linkTweet thisAlerts:
@CentauriApr 30.2008 — The banner would naturally be constrained to the width of #main if it is inside it, so first move the banner [I]before[/I] #main :[CODE]<div id="banner"></div>
<div id="main">[/CODE]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 :[CODE]#banner{
background:url(images/banner.png) repeat-x top;
height: 108px;
}[/CODE]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 :[CODE]#main{
width: 800px;
padding-top: 10px;
margin: 0 auto;
}[/CODE]The auto side margins also centre the site.
×

Success!

Help @bejitto101 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...