Solved

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

Posted on 2008-06-18
16
1,462 Views
Last Modified: 2011-10-19
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

0
Comment
Question by:JulieArchWeb
  • 8
  • 7
16 Comments
 
LVL 1

Expert Comment

by:MikeBusby
ID: 21816280
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
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21816340
you want Big Pic to be attached to the footer?
0
 

Author Comment

by:JulieArchWeb
ID: 21816378
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
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21816404
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
 

Author Comment

by:JulieArchWeb
ID: 21816412
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
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21816451
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
 

Author Comment

by:JulieArchWeb
ID: 21816485
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
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21816546
ok now we have the bg image at the bottom, add 40px to the height of the bigpic box
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 10

Expert Comment

by:bluefezteam
ID: 21816587
looking better - just refreshed the page, tweak the height until it fits
0
 
LVL 10

Accepted Solution

by:
bluefezteam earned 250 total points
ID: 21816619
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
 

Author Comment

by:JulieArchWeb
ID: 21816627
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
 

Author Comment

by:JulieArchWeb
ID: 21816635
Great, just saw your last comment. I'm going to try that now.
0
 

Author Comment

by:JulieArchWeb
ID: 21816717
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
 

Author Closing Comment

by:JulieArchWeb
ID: 31468521
Didn't realize I had this space to add the warm and fuzzy thank you message. Oh well. Thanks again!
0
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21816737
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
 

Author Comment

by:JulieArchWeb
ID: 21816954
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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now