heyimmike Posted November 4, 2006 Share Posted November 4, 2006 Hello -I am working on a site for a friend of mine. She currently has a site that she built using the tools that Verizon provided her and well, the code is crazy...Since I have been working on learning CSS, along with improving my xhtml and php skills, I offered to rewrite the site. The problem I am having is that the background image , which I insert in the id="container" (which holds everything else) is getting covered somehow by the id="main". If I remove the id="main" from the div, the background appears behind the text. but once I put the id back in, it gets hidden. What have I done wrong?Thanks in advance for any assistance.One other questions since I'm asking. I have an id="banner" which goes accross the full width of the id="container" at the top of the page with some text in it. The text is centered from right to left, but is there a way to center it from top to bottom of the id="banner" ? That would make things a lot easier than trying to space it with padding.below is the main page for the site with the background issue, including the css in the page (I haven't seperated it out yet). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><!-- Need to come up with a better/correct URL for the page<head profile="http://www.samspage.com">--><meta http-equiv="content-type" content="text/html; charset=utf-8" /><!-- Need to fill out some of these fields to correctly describe sams page<meta name="keywords" content="music, sam, scdsam" /><meta name="description" content="This is the webpage dedicated to Sam and all her music glory!" />--><title>Sam: Original Music</title><!-- <link href="box.css" rel="stylesheet" type="text/css" /> --><!-- <link href="print.css" rel="stylesheet" type="text/css" media="print" /> --><style type="text/css"> body { font-family: Verdana,Arial,Helvetica,sans-serif; color: #ffffff; margin: 0; padding-top: 8px; background: #6699cc; } #container { width: 850px; margin-right: auto; margin-left: auto; background: url(i/bkground.jpg) left top; } #banner { height: 100px; width: 850px; float: center; } #nav { float: left; width: 150px; text-align: center; } #main { float: right; width: 680px; padding: Opx 10px Opx 10px; } #legal { clear: both; width: 760px; } ul#mainNav { margin: 0; padding: 0; list-style: none; } #mainNav a { color: #fff; letter-spacing: 2px; font-size: 0.8em; text-transform: uppercase; text-decoration: none; padding: 6px 10px 5px; display: block; } #mainNav a:hover { } h1 { font-size: 3em; font-style: italic; color: #ffffff; text-align: center; } h2 { font-size: 2em; color: #ffffff; } .style1 { color: #FF0000; font-weight: bold; } .style2 { text-align: center; }</style> </head><body id="pagename"><div id="container"> <div id="banner"> <h1>Sam: Original Music</h1> </div> <?php require("nav.php"); ?> <div id="main"> <h2>the home</h2> <p>Welcome to my new-and-slowly-improving music site! Home of gratuitous self-promotion and well...more gratuitous self-promotion. Seriously, what else would you use the internet for?</p> <p>Here you can check out all the things about me, listen to some of my songs and even get a CD. So get to looking.</p> </div> </div><div id="legal"></div></body></html> Link to comment Share on other sites More sharing options...
jlhaslip Posted November 5, 2006 Share Posted November 5, 2006 Have you tried setting the front div's background-color to transparent? Link to comment Share on other sites More sharing options...
heyimmike Posted November 5, 2006 Author Share Posted November 5, 2006 Have you tried setting the front div's background-color to transparent?I hadn't thought of that, so I tried it, as shown in the css portion of the code below, but it has no effect as you can see by going hereI know it has something to do with the id="main" because whenever I take that id out, the background shows up beind the text, i just dont' have the text area bound anymore...[edit] well, I have narrowed down the problem to the float: right; under the #main. if you take that out, the background appears. sure that solves the background issue, but if I do that, once the text clears the nav bar, it wraps under it, and that is an unwanted effect...<style type="text/css"> body { font-family: Verdana,Arial,Helvetica,sans-serif; color: #ffffff; margin: 0; padding-top: 8px; background: #6699cc; } #container { width: 850px; margin-right: auto; margin-left: auto; background: url(i/bkground.jpg) left top; } #banner { height: 100px; width: 850px; float: center; background-color: transparent; } #nav { float: left; width: 150px; text-align: center; background-color: transparent; } #main { float: right; width: 680px; padding: Opx 10px Opx 10px; background-color: transparent; } #legal { clear: both; width: 760px; } ul#mainNav { margin: 0; padding: 0; list-style: none; } #mainNav a { color: #fff; letter-spacing: 2px; font-size: 0.8em; text-transform: uppercase; text-decoration: none; padding: 6px 10px 5px; display: block; } #mainNav a:hover { } h1 { font-size: 3em; font-style: italic; color: #ffffff; text-align: center; } h2 { font-size: 2em; color: #ffffff; } .style1 { color: #FF0000; font-weight: bold; } .style2 { text-align: center; }</style> Link to comment Share on other sites More sharing options...
heyimmike Posted November 5, 2006 Author Share Posted November 5, 2006 Well, I have done some more research and while I do not know why the following was causing the problem, I have found a work around. #main {float: right;width: 680px;padding: Opx 10px Opx 10px;background-color: transparent;} I found that if I took out the "float: right;" the background would show up behind the <div id="main">, but then I didn't have control of the text, in that it slid under the <div id"nav"> area. So I came up with the following to prevent that. #main {margin-left: 160px;width: 680px;padding-right: 10px;} It would still be nice to know why the float: right; was causing all the fuss...Also, on my other small question, within an area defined by a <div> for both width and height, is there a way to center text both vertically and horizontally. I've got the horizontal...[edit] I put a border around the banner area that has the text I want centered top to bottom and left to right and poof, it was... but you remove the border... and the centering disappears with it... Link to comment Share on other sites More sharing options...
jlhaslip Posted November 7, 2006 Share Posted November 7, 2006 Document flow kicks in.To Float a div, it must be placed first in the html before the following div. The following div should have a margin of the same or greater size than the width of the floated div and pushing the folowing div in the opposite direction. Your page appears to be correct now. yes? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now