How can I move the background image on a div tag down the page?

It's about CSS and HTML.  How can I move the background image in the div id "bigPic"  down  the page, so the entire picture is showing?  In doing so I'm hoping that the footer will align directly below "bigPic".  

Here is the draft page: http://www.archwebworks.com/neeeac/index.html

This is my first time asking a question, so if I'm providing too much info or not enough, please let me know. Thanks in advance for the help. I am so happy to find this site!
/*
 
NEEEAC CSS
 
*/
 
* {
	padding: 0px;
	margin: 0px;
}
 
h1, h2, h3, h4, h5, h6, p {
    margin: 0px;
}
 
body {
	text-align: center; /* IE Center Fix */
	margin: 0 auto;
	width: 800px;
	background-color: #999966;
}
 
 
 
div#container {
	text-align: left; /* align reset */
}
 
/* Header (start) */
 
 
div#header {
	text-indent: -9999px;
	width: 800px;
	height: 105px;
	background-color: #999966;
	background-image: url(../img/header.jpg);
	background-repeat: no-repeat;
}
 
/* Navigation (start) */
 
ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
 
li {
float: left;
}
 
a {
display: block;
text-decoration: none;
text-align: center;
font-family: Verdana, Arial, sans-serif;
font-size: small;
color: #ffffff;
background-image: url(../img/navbg.jpg);
padding: 5px;
margin: 0px;
height: 21px;
}
 
li#blank a {
	width: 48px;
 }
 
li#home a {
	width: 57px;
 }
 
li#glance a {
	width: 94px;
}
 
li#work a {
	width: 170px;
}
 
li#speakers a {
	width: 136px;
}
 
li#details a {
	width: 66px;
}
 
li#register a {
	width: 74px;
}
 
li#contact a {
	width: 75px;
}
 
 
#navigation li ul {	
	display: block;
	visibility: hidden;
	left: 0px;
	width: 170px;
	margin: 0;
}
 
#navigation li:hover ul {
	visibility: visible;
	z-index: 100;
}
 
 
 
/* middle (start) */
 
 
div#bigPic {
	text-indent: -9999px;
	width: 800px;
	height: 450px;
	background-color: #999966;
	background-image: url(../img/homepage_image.jpg);
	background-repeat: no-repeat;
}
 
/* supages */
 
div#content{
	margin: 0px auto;
	width: 800px;
}
 
div#sidebar {
	width: 200px;
	background-color: white;
	float: left;
 
}
 
div#main {
	width: 600px;
	background-color: white;
	float: right;
 
}
/* Footer Start */
div#clearFloats {
	clear: both;
}
 
div#footerContainer {
	background-image: url(../img/footer.jpg);
	background-repeat: no-repeat;
	height: 34px;
	text-align: center;
}
 
 
**** HTML *******
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<title>New England Enviromental Educators Alliance 2008 Conference</title>
 
<link href="css/main3.css" rel="stylesheet" type="text/css" />
 
</head>
 
<body>
 
<div id="container">
 
 
<div id="header">
<p>New England Enviromental Educator's Alliance (NEEEA) 2008 Conference - Bringing the Journey Home</p>
</div>
<ul id="navigation">
 <li id="blank" title=""><a href="#"></a></li>
 <li id="home" title="link to homepage"><a href="#">Home</a></li>
 <li id="glance" title="link to At A Glance"><a href="#">At A Glance</a></li>
 
 
 <li id="work" title="link to Schedule"><a href="#">Workshops and Activities</a>
 
 	<ul class="selected" >
		<li id="schedule" title="link to Schedule"><a href="#">Schedule</a></li>
		<li id="saturday" title="link to Saturday workshops"><a href="#">Saturday Workshops</a></li>
		<li id="sunday" title="link to Sunday Workshops"><a href="#">Sunday Workshops</a></li>
		<li id="field" title="link to field trips"><a href="#">Field Trips</a></li>
		<li id="entertainment" title="link to Entertainment"><a href="#">Entertainment</a></li>
		
	</ul>
 </li>
  <li id="speakers" title="link to keynote speakers"><a href="#">Keynote Speakers</a></li>
 <li id="details" title="link to details page"><a href="#">Details</a></li>
 <li id="register" title="link to register page"><a href="#">Register</a></li>
 
 <li id="contact" title="link to conference info"><a href="/#">Contact</a></li>
</ul>
 
 
 
<div id="bigPic">
<p>New England Enviromental Educator's Alliance (NEEEA) 2008 Conference.  42nd Annual New England
Environmental Education Alliance Conference
 
Oct. 3-5 at the Sargent Center for Outdoor Education
in Hancock, New Hampshire  " 50 Sessions explore strands of Building Communities, Built Environment and Ecology of Communities 
" Keynotes speakers Gibran Rivera of the Interaction Institute for Social Change, and Becky Rule, storyteller and humorist 
" New for 2008 - Sunday in the Field: visit local sites and see ecological communities in action.
" Community Art Project, Carpool Challenge, Field Trips and more. /p>
</div>
 
<div id="clearFloats"></div>
 
<div id="footerContainer">
 
<p></p>
 
</div>
 
</div>
 
</body>
 
</html>

Open in new window

JulieArchWebAsked:
Who is Participating?
 
bluefezteamConnect With a Mentor Commented:
also have you applied position absolute to the sub menu? they are appearing over to the left now.

if you apply this

#work {position:relative;}

that may make the dropdown appear directly under the nav rather than to the far left
0
 
MikeBusbyCommented:
You can try adding the line

padding-top: XXpx;

to your id where the x's are add the amount of pixels you need.
0
 
bluefezteamCommented:
you want Big Pic to be attached to the footer?
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
JulieArchWebAuthor Commented:
to bluefezteam - Well, not really because I want to use the footer on all the subpages, which will have content about the conference. I just want the footer to be directly below the big Pic.   Thank you!

0
 
bluefezteamCommented:
I'm not understanding the question, what I can see is your nav bar with an image beneath it and then a large gap followed by the footer.

If you want the footer to fit under the image directly - change the height of bigpic to around 350px.

however if you want the background image to appear at the bottom of the div next directly above the footer try this  in the #nigPic css code
background: #999966 url(../img/homepage_image.jpg) no-repeat bottom left;

Open in new window

0
 
JulieArchWebAuthor Commented:
to Mike - oddly enough, I added a padding-top to the big Pic, and it's not moving at all. In fact, the footer is moving further down the page, the more padding I add. But the footer div not associated with the "big pic" dive.  Any other ideas?  Should I not be using the "big Pic" as a bg image with CSS?  Maybe just put it right in the html?

Thanks for your help!
0
 
bluefezteamCommented:
in IE 7, the drop down menu you are using is making the BIG IMAGE appear lower down in the page where the last item of the menu appears.

This is because you aren't using a position absolute to make the subitems hover above the page, so it's being distorted.
0
 
JulieArchWebAuthor Commented:
bluefezteam - Thanks, that helped the footer issue.  Sorry if I didn't explain the first problem in more detail. Basically, there is more to the big pic than is being shown. I'm going to attach the jpg so you can see that there should be a top white horizontal line and more of the pictures visible.    
Here is an updated link with the footer fixed: http://www.archwebworks.com/neeeac/index.html

It's like I need the big picture to move down the page 20 pixels or so.

Thank you!!
homepage-image.jpg
0
 
bluefezteamCommented:
ok now we have the bg image at the bottom, add 40px to the height of the bigpic box
0
 
bluefezteamCommented:
looking better - just refreshed the page, tweak the height until it fits
0
 
JulieArchWebAuthor Commented:
Awesome!! Thank you so much!  http://www.archwebworks.com/neeeac/index.html

Can I ask about the absolute positioning on the drop down nav?  I added position:absolute; to the #navigation li ul {  } and it's way to the left. It's my very novice understanding that the position attribute is only relevant if it's associated with a relative positioning attribute.

Should I fix the problem by adding an position-x value to the drop down?
0
 
JulieArchWebAuthor Commented:
Great, just saw your last comment. I'm going to try that now.
0
 
JulieArchWebAuthor Commented:
It worked! http://www.archwebworks.com/neeeac/index.html

Thank you!  I think I'll have more issues as the day goes on, but I really appreciate your help. This is the third site that I'm doing in CSS, and it's quite difficult.  It's nice to know people respond so promptly and effectively here. Totally worth the cash.

Thanks again!
Julie
0
 
JulieArchWebAuthor Commented:
Didn't realize I had this space to add the warm and fuzzy thank you message. Oh well. Thanks again!
0
 
bluefezteamCommented:
cool - here's another tip that may make the site compatible in IE (does it get me the full 500 points lol)

#navigation{margin;0;padding:0}

in IE there's ghost gap caused by the UL for the navigation.

Look forward to the points :0D
0
 
JulieArchWebAuthor Commented:
I sure hope I gave you the points!  And if I could figure out how to make it 500 pts I would.  Will do for next time.  Have a good one!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.