[Solved] Cannot get Images to Display

[dynamic.flare]

Hey guys,
Okay I’m really struggling with getting image placement on a website I’m re-making for my first ‘client’ (a friend of mine opened a store and they needed a website so I offered). It is currently up and running and looks like this: http://www.originalgangsterburgers.com

What I’m trying to do is make it so that the body extends down the page instead of having it compressed into that little white box.

My problem is not being able to get other images to display like the extender body image which will be the background for additional text so that the layout looks seamless. Right now there’s just a black square where the image should be.

Here is my html:

Code:

GOT BEEF!

Can You Handle Our Burgers?

This Month’s Special

Here is my CSS:

Code:

div#preload { display: none; }

body {
background-image: url(images/images/ogbg.jpg);
background-repeat: no-repeat;
background-color: #000000;
color: #000000;
background-position: 30px 30px;
}

#navigation {
position: absolute;
top: 223px;
left: 120px;
display: block;
width:1024px;
height:32px;
}

#contentwrapper {
position: absolute;
top: 240px;
left: 100px;
width: 880px;
}

#extendbody {
height: 461px;
width: 1024px;
background: url(../images/extendbody.jpg) no-repeat 728px 30px;
}

#footer {
position: absolute;
top: 1189px;
left: 30px;
}

#navigation ul {
margin: 0;
padding: 0;
}
#navigation li {
display: inline;
}

#navigation a#home {
display: block;
position: absolute;
top: 3px;
left: 1px;
height: 29px;
width: 47px;
background: url(images/homenav.png) ;
}

#navigation a#home:visited {
display: block;
position: absolute;
top: 3px;
left: 1px;
height: 29px;
width: 47px;
background: url(images/homenav.png) ;
}

#navigation a#home:hover {
display: block;
position: absolute;
top: 0px;
left: 0px;
height: 29px;
width: 49px;
background: url(images/homehover.png) ;
background-position: -316px 0 no-repeat;
}

#navigation a#home:active {
display: block;
position: absolute;
top: 0px;
left: 0px;
height: 29px;
width: 49px;
background: url(images/homehover.png) ;
background-position: -330px 0 no-repeat;
}

#navigation a#aboutus {
display: block;
position: absolute;
top: 3px;
left: 102px;
height: 29px;
width: 76px;
background: url(images/aboutusnav.png) ;
}

#navigation a#aboutus:visited {
display: block;
position: absolute;
top: 3px;
left: 102px;
height: 29px;
width: 76px;
background: url(images/aboutusnav.png) ;
}

#navigation a#aboutus:hover {
display: block;
position: absolute;
top: 0px;
left: 101px;
height: 29px;
width: 78px;
background: url(images/aboutushover.png) ;
background-position: -350px 0 no-repeat;
}

#navigation a#aboutus:active {
display: block;
position: absolute;
top: 0px;
left: 101px;
height: 29px;
width: 78px;
background: url(images/aboutushover.png) ;
background-position: -370px 0 no-repeat;
}

#navigation a#menu {
display: block;
position: absolute;
top: 3px;
left: 234px;
height: 29px;
width:47px;
background: url(images/menunav.png) ;
}

#navigation a#menu:visited {
display: block;
position: absolute;
top: 3px;
left: 234px;
height: 29px;
width: 47px;
background: url(images/menunav.png) ;
}

#navigation a#menu:hover {
display: block;
position: absolute;
top: 0px;
left: 233px;
height: 29px;
width: 49px;
background: url(images/menuhover.png) ;
background-position: -390px 0 no-repeat;
}

#navigation a#menu:active {
display: block;
position: absolute;
top: 0px;
left: 233px;
height: 29px;
width: 49px;
background: url(images/menuhover.png) ;
background-position: -410px 0 no-repeat;
}

#navigation a#photos {
display: block;
position: absolute;
top: 3px;
left: 339px;
height: 29px;
width:62px;
background: url(images/photosnav.png) ;
}

#navigation a#photos:visited {
display: block;
position: absolute;
top: 3px;
left: 339px;
height: 29px;
width: 62px;
background: url(images/photosnav.png) ;
}

#navigation a#photos:hover {
display: block;
position: absolute;
top: 0px;
left: 338px;
height: 29px;
width: 64px;
background: url(images/photoshover.png) ;
background-position: -430px 0 no-repeat;
}

#navigation a#photos:active {
display: block;
position: absolute;
top: 0px;
left: 338px;
height: 29px;
width: 64px;
background: url(images/photoshover.png) ;
background-position: -450px 0 no-repeat;
}

#navigation a#directions {
display: block;
position: absolute;
top: 3px;
left: 457px;
height: 29px;
width:89px;
background: url(images/directionsnav.png) ;
}

#navigation a#directions:visited {
display: block;
position: absolute;
top: 3px;
left: 457px;
height: 29px;
width: 89px;
background: url(images/directionsnav.png) ;
}

#navigation a#directions:hover {
display: block;
position: absolute;
top: 0px;
left: 456px;
height: 29px;
width: 91px;
background: url(images/directionshover.png) ;
background-position: -470px 0 no-repeat;
}

#navigation a#directions:active {
display: block;
position: absolute;
top: 0px;
left: 456px;
height: 29px;
width: 91px;
background: url(images/directionshover.png) ;
background-position: -490px 0 no-repeat;
}

#navigation a#contactus {
display: block;
position: absolute;
top: 3px;
left: 582px;
height: 29px;
width:94px;
background: url(images/contactusnav.png) ;
}

#navigation a#contactus:visited {
display: block;
position: absolute;
top: 3px;
left: 582px;
height: 29px;
width: 94px;
background: url(images/contactusnav.png) ;
}

#navigation a#contactus:hover {
display: block;
position: absolute;
top: 0px;
left: 581px;
height: 29px;
width: 96px;
background: url(images/contactushover.png) ;
background-position: -510px 0 no-repeat;
}

#navigation a#contactus:active {
display: block;
position: absolute;
top: 0px;
left: 581px;
height: 29px;
width: 96px;
background: url(images/contactushover.png) ;
background-position: -530px 0 no-repeat;
}

h1 {
color: #FFFFFF;
font: bold 1.6em Calibri, “Arial Narrow”, Arial, Verdana, sans-serif;
padding: 0px 10px 3px 10px;
background-color: #000000;
}
h2 {
color: #000000;
font: bold 1.5em Calibri, “Arial Narrow”, Arial, Verdana, sans-serif;
padding: 0px 10px 3px 10px;
}
p {
color: #000000;
font: 1em Calibri, “Arial Narrow”, Arial, Verdana, sans-serif;
padding: 0px 10px 3px 20px;
}

p.number {
font: bolder 2em Calibri, “Arial Narrow”, Arial, Verdana, sans-serif;
color: #cc0000;
}

.email {
font-weight: bolder;
color: #cc0000;
}

h1.beef {
font-size: 2.5em;
text-align: center;
padding: 0px 0px 0px 0px;
margin-bottom: 0;
}

p.beef {
font: bold 1.2em Calibri, “Arial Narrow”, Arial, Verdana, sans-serif;
text-align: center;
margin-top: 0;
text-decoration: underline;
}
p.nopadding {
padding: 0;
margin: 0;
}

img#menu {
margin-top: 10px;
margin-left: 60px;
padding: 0px;
border: 5px solid #000000;
}
.scroll img.home {
image-align: center;
margin: 0 0 20px 60px;
padding: 0;
}

P.S. Here is a photo of the problem:

[dynamic.flare]

Hey,

Thanks for your help.

With some tweaking, this is the new code I have (I put the style rules and html on the same page only temporarily while I’m working on it. I’ll have it changed into two separate docs later.

Code:

GOT BEEF!

Can You Handle Our Burgers?

This Month’s Special

My ONLY problem now is that everything except for the footer is centered; the footer is only slightly indented from the left of the browser window and I haven’t been able to get it to center.

Any ideas?

[dynamic.flare]

Okay got it fixed. Thanks.

Turns out, the margin:auto was causing the footer to align to the left with a small margin. The footer div was nested inside another div that already had the position centered so once I removed the margin:auto, the footer centered.

Solved :)

[Author]

Posts