Cannot get Images to Display - HELP please :(

HTML & CSS
1

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:

<!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">

	<head>
		<title>Original Gangster Burgers Inc</title>
		<meta http-equiv="Content-Type"
			content="text/html; charset=iso-8859-1" />
		<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="styles2.css" />
		
	</head>
 
	<body>
		<div id="navigation">
				<ul>
					<li><a id="home" href="http://www.originalgangsterburgers.com/index.html"></a></li>
					<li><a id="aboutus" href="http://www.originalgangsterburgers.com/aboutus.html"></a></li>
					<li><a id="menu" href="http://www.originalgangsterburgers.com/menu.html"></a></li>
					<li><a id="photos" href="http://www.originalgangsterburgers.com/construction.html"></a></li>
					<li><a id="directions" href="http://www.originalgangsterburgers.com/directions.html"></a></li>
					<li><a id="contactus" href="http://www.originalgangsterburgers.com/contactus.html"></a></li>
				</ul>
			
		</div>
		<div id="contentwrapper">
				<h1 class="beef">
					GOT BEEF!
				</h1>
				<p class="beef">
				Can You Handle Our Burgers?
				</p>
				
				<img class=home src=images/home.png></img>
 				

				<p><h1>
				This Month's Special
				</h1></p>

				<img class=home src=images/januarypromofront.jpg></img>
				<img class=home src=images/januarypromoback.jpg></img>
		</div>
		
		<div id=extendbody">
		
		</div>

		<div id="footer">
			<img src="images/images/footer.jpg" height="70px" width="1024px" alt="Copyright 2009 Original Gangster Burgers Inc">
		</div>
 
	</body>

<div id="preload">
   <img src="images/homenav.png" width="1" height="1" alt="" />
   <img src="images/homehover.png" width="1" height="1" alt="" />
   <img src="images/aboutusnav.png" width="1" height="1" alt="" />
   <img src="images/aboutushover.png" width="1" height="1" alt="" />
   <img src="images/menunav.png" width="1" height="1" alt="" />
   <img src="images/menuhover.png" width="1" height="1" alt="" />
   <img src="images/photosnav.png" width="1" height="1" alt="" />
   <img src="images/photoshover.png" width="1" height="1" alt="" />
   <img src="images/directionsnav.png" width="1" height="1" alt="" />
   <img src="images/directionshover.png" width="1" height="1" alt="" />
   <img src="images/contactusnav.png" width="1" height="1" alt="" />
   <img src="images/contactushover.png" width="1" height="1" alt="" />

</div>
</html>

Here is my css:

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;
}
2

Hi, sorry but I get a bit confused easily :). Can you point exactly what black box is supposed to have an image on it?

I notice you are using an awful lot of absolute positioning there and it shouldn’t be used to lay out a page, but rather small segments :slight_smile:

3

The part that’s supposed to have an image on the background is the the extendbody div. I used the absolute positioning because i used the hover effect for the navbar (you can see it at the website I posted) so I had to do the rest absolute or it threw everything off. Unless there is a way I can do just the navbar as absolute and the rest as relative, let me know how cause I struggled a lot with that.

P.S. What’s the reasoning for not using absolute pos. for layout?

4

As far as the image for the #extendbody area, one of the reasons the background image may not be showing up is because of a missing quotation mark in the html…

<div id=[COLOR="Red"]"[/COLOR]extendbody">

Also, I noticed an inconsistent use of quotation marks around class and src values. not exactly sure how problematic that could be, but it’s probably better to make a habit of always putting attribute values within “”. :slight_smile:

…and lastly, instead of using a closing < /img >, you can simply close the image tag like this…

<img src="mypic.jpg" width="720" height="100" />

Done nit-picking. I’ll shove off so Ryan can do his thing. :smiley:

5

Hey,
thanks for that. I actually realized that and validated the code, fixed it up and now it passes the validation. This is the new html code, I forgot to post it again:

<!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">

	<head>
		<title>Original Gangster Burgers Inc</title>
		<meta http-equiv="Content-Type"
			content="text/html; charset=iso-8859-1" />
		<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="styles2.css" />
		
	</head>
 
	<body>
		<div id="navigation">
				<ul>
					<li><a id="home" href="http://www.originalgangsterburgers.com/index.html"></a></li>
					<li><a id="aboutus" href="http://www.originalgangsterburgers.com/aboutus.html"></a></li>
					<li><a id="menu" href="http://www.originalgangsterburgers.com/menu.html"></a></li>
					<li><a id="photos" href="http://www.originalgangsterburgers.com/construction.html"></a></li>
					<li><a id="directions" href="http://www.originalgangsterburgers.com/directions.html"></a></li>
					<li><a id="contactus" href="http://www.originalgangsterburgers.com/contactus.html"></a></li>
				</ul>
			
		</div>
		<div id="contentwrapper">
				<h1 class="beef">
					GOT BEEF!
				</h1>
				<p class="beef">
				Can You Handle Our Burgers?
				</p>
				
				<img class="home" src="images/home.png" alt="" />
 				

				<h1>
				This Month's Special
				</h1>

				<img class="home" src="images/januarypromofront.jpg" alt="" />
				<img class="home" src="images/januarypromoback.jpg" alt="" />
		</div>
		
		<div id="extendbody">
		
		</div>

		<div id="footer">
			<img src="images/images/footer.jpg" height="70px" width="1024px" alt="Copyright 2009 Original Gangster Burgers Inc" />
		</div>

<div id="preload">
   <img src="images/homenav.png" width="1" height="1" alt="" />
   <img src="images/homehover.png" width="1" height="1" alt="" />
   <img src="images/aboutusnav.png" width="1" height="1" alt="" />
   <img src="images/aboutushover.png" width="1" height="1" alt="" />
   <img src="images/menunav.png" width="1" height="1" alt="" />
   <img src="images/menuhover.png" width="1" height="1" alt="" />
   <img src="images/photosnav.png" width="1" height="1" alt="" />
   <img src="images/photoshover.png" width="1" height="1" alt="" />
   <img src="images/directionsnav.png" width="1" height="1" alt="" />
   <img src="images/directionshover.png" width="1" height="1" alt="" />
   <img src="images/contactusnav.png" width="1" height="1" alt="" />
   <img src="images/contactushover.png" width="1" height="1" alt="" />

</div> 
	</body>


</html>

But it still doesn’t work :cry: tear tear lol

6

Hi, I went to the link you posted and I was unable to e ven find the #extendbody element in the HTML?? The source code is very different in the live link then from what you posted…are you sure it is the correct link?

7

no no I tried to explain in the first post that the live link is what it looks like now but that I’m trying to change the layout so that it doesn’t have that scroll box but instead the text and the background image run vertically down the page like a “normal” website. It makes it easier to use. So for that, I need to have an extra image that I can add to the site to make enough room for the text when I need it… do you know what I’m trying to say?

For example… look at www.mint.com
The first page, then watch what happens to the background image when you go to different pages with more text. They added an extra image in the middle of the regular background image to accommodate the rest of the text.

Unfortunately for me, that website is too complex (javascript and more from what I can see) to figure out.

8

For example… look at www.mint.com
The first page, then watch what happens to the background image when you go to different pages with more text. They added an extra image in the middle of the regular background image to accommodate the rest of the text.

Maybe they do it with Javascript, as I don’t have Javascript and the fuzzy white stuff at the edges does NOT continue down the sides of the longer pages for me at all… and really, they don’t need to use scripting for that, they just chose to (and that’s ok because it’s not important anyway).

P.S. What’s the reasoning for not using absolute pos. for layout?

The reasoning is, Absolute positioning is usually (not always) very brittle, and newbs tend to latch onto it right away for the wrong reasons (because it looks like it let’s people place stuff exactly where they want).

Exceptions to this general rule would be doing funky stuff like Andy Clarke does, or using Absolute Positioning tricks for things like “equal columns” (which needs some hackage to work in IE6). Otherwise, most of us devs tend to use abso-po-ing for small things on a page, where it’s sorta encapsulated by a positioned parent and can’t cause havok on the rest of the page (as you may have noticed with your menu).

I haven’t had time to actually look at the site in question but whenever someone asks about making something “stretch down” then I start thinking in that direction (equal-column or height tricks).

*Edit okay took a VERY quick look… first, I think you want
<img src=“images/body.jpg” height=“461px” width=“1024px” alt=“”>
to be a background image of someone instead.

Second, .scroll is going to never stretch out of the white area so long as you limit it with a height declaration. Since absolute positioning takes stuff out of the “flow” (how HTML boxes will act when left alone, not positioned), then the usual things we can count on don’t work like that.

Could you post an image of what you would like the site to look like? Even if it’s a photoshop thingie, or even Paint, doesn’t matter… that would really help us understand exactly where you want to go with this… rather than only working on “making .scroll “stretch” down” because we’d like to remove the absolute positioning and still have it “work” for you. That prolly means re-evaluating the other elements (typical in CSS).

*edit 2 since attachements take time to get approved, throw the image up on the server holding the site you’re working on… then you can just post the link.

*edit3 just wanted to say, the artwork design is excellent! I love it.

9

Hi,

You need to remove all the absolute positioning as mentioned and just repeat that background position correctly.

I think you were looking for something like this:


<!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">
<head>
<title>Original Gangster Burgers Inc</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="styles2.css" />
<style type="text/css">
html,body{margin:0;padding:0;}
body {
    background:#000;
    color: #fff;
}
#outer{
    width:1024px;
    margin:auto;
    color:#000;
    background:url(http://www.originalgangsterburgers.com/images/body.jpg) repeat-y 0 0;
}
#header {
    position: relative;
    height:235px;
}
#header h1,#header h1 em {
    margin:0;
    width:1024px;
    height:235px;
    display:block;
    position:relative;
}
#header h1 em{
    background:url(http://www.originalgangsterburgers.com/images/header.png) no-repeat 0 0;
    left:0;
    top:0;
    position:absolute;
}

#body {
    width:1024px;
}
#footer {
    width:1024px;
    height:72px;
    background:url(http://www.originalgangsterburgers.com/images/footer.jpg) no-repeat 0 0;
}
#navigation {
    position: absolute;
    top: 193px;
    left: 90px;
    display: block;
    width:1024px;
    height:32px;
}
#navigation ul {
    margin: 0;
    padding: 0;
}
#navigation li,#navigation a {
    position:absolute;
    height: 0;
    width: 0;
    top: 0;
    left:0;
}
#navigation a {
    position:absolute;
    height: 29px;
    width: 49px;
}
#navigation li#home{background: url(http://www.originalgangsterburgers.com/images/homehover.png) 0 0;}
#navigation li#home a{
    background: url(http://www.originalgangsterburgers.com/images/homenav.png) 0 0;
    top: 3px;
    left: 1px;
}
#navigation li#home a:hover,
#navigation li#home a:active {
    background: url(http://www.originalgangsterburgers.com/images/homehover.png) 0 0;
    top:0;
    left:0;
}

#navigation li#aboutus{background: url(http://www.originalgangsterburgers.com/images/aboutushover.png) 0 0;}
#navigation li#aboutus a{
    background: url(http://www.originalgangsterburgers.com/images/aboutusnav.png) 0 0;
    top: 3px;
    left: 102px;
    width: 78px;
}
#navigation li#aboutus a:hover,
#navigation li#aboutus a:active {
    background: url(http://www.originalgangsterburgers.com/images/aboutushover.png) 0 0;
    top:0;
    left:100px;
}

#navigation li#menu{background: url(http://www.originalgangsterburgers.com/images/menuhover.png) 0 0;}
#navigation li#menu a{
    background: url(http://www.originalgangsterburgers.com/images/menunav.png) 0 0;
    top: 3px;
    left: 234px;
    width: 47px;
}
#navigation li#menu a:hover,
#navigation li#menu a:active {
    background: url(http://www.originalgangsterburgers.com/images/menuhover.png) 0 0;
    top:0;
    left:233px;
}
#navigation li#photos{background: url(http://www.originalgangsterburgers.com/images/photoshover.png) 0 0;}
#navigation li#photos a{
    background: url(http://www.originalgangsterburgers.com/images/photosnav.png) 0 0;
    top: 3px;
    left: 339px;
    width: 62px;
}
#navigation li#photos a:hover,
#navigation li#photos a:active {
    background: url(http://www.originalgangsterburgers.com/images/photoshover.png) 0 0;
    top:0;
    left:338px;
}
#navigation li#directions{background: url(http://www.originalgangsterburgers.com/images/directionshover.png) 0 0;}
#navigation li#directions a{
    background: url(http://www.originalgangsterburgers.com/images/directionsnav.png) 0 0;
    top: 3px;
    left: 457px;
    width: 89px;
}
#navigation li#directions a:hover,
#navigation li#directions a:active {
    background: url(http://www.originalgangsterburgers.com/images/directionshover.png) 0 0;
    top:0;
    left:456px;
}
#navigation li#contactus{background: url(http://www.originalgangsterburgers.com/images/contactushover.png) 0 0;}
#navigation li#contactus a{
    background: url(http://www.originalgangsterburgers.com/images/contactusnav.png) 0 0;
    top: 3px;
    left: 582px;
    width: 94px;
}
#navigation li#contactus a:hover,
#navigation li#contactus a:active {
    background: url(http://www.originalgangsterburgers.com/images/contactushover.png) 0 0;
    top:0;
    left:581px;
}
.scroll {
    margin-left: 60px;
    width: 902px;
}
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;
}
</style>
</head>
<body>
<div id="outer">
    <div id="header">
        <h1><em></em></h1>
        <div id="navigation">
            <ul>
                <li id="home"><a  href="http://www.originalgangsterburgers.com/index.html"></a></li>
                <li id="aboutus"><a  href="http://www.originalgangsterburgers.com/aboutus.html"></a></li>
                <li id="menu"><a href="http://www.originalgangsterburgers.com/menu.html"></a></li>
                <li id="photos"><a href="http://www.originalgangsterburgers.com/construction.html"></a></li>
                <li id="directions"><a href="http://www.originalgangsterburgers.com/directions.html"></a></li>
                <li id="contactus"><a  href="http://www.originalgangsterburgers.com/contactus.html"></a></li>
            </ul>
        </div>
    </div>
    <div id="body">
        <div class="scroll">
            <h1 class="beef"> GOT BEEF! </h1>
            <p class="beef"> Can You Handle Our Burgers? </p>
            <p><img class="home" src="http://www.originalgangsterburgers.com/images/home.png" alt="" /></p>
            <h1> This Month's Special </h1>
            <p><img class="home" src="http://www.originalgangsterburgers.com/images/febpromofront.jpg" alt="" /><img class="home" src="http://www.originalgangsterburgers.com/febpromoback.jpg" alt="" /></p>
        </div>
    </div>
    <div id="footer"></div>
</div>
</body>
</html>

I removed that pre-load nonsense as it’s a very bad method. Just include the hover state in the same image as the normal state and then swap the background image on hover.

In the example above I’ve pre-loaded it anyway by applying it to the anchors parent and hiding it. It saves using any extra elemetns but is a little too complicated when you could do it more easily with the double image technique.

Hope it helps anyway.

10

Hey,
This is what I want it to look like (just the image) on a black background:
http://www.originalgangsterburgers.com/images/demo.jpg

The last poster got it to look almost exactly what I wanted (and I’m not too sure exactly how! I’m trying to figure out the code) the only issue is that there is a black line running between the header and the body, also the footer is positioned on the left whereas the body and header are centered.

Thanks for all your help, just hoping someone can help me figure out the line and how to position the footer. You guys are awesome and I’m still learning :slight_smile:

Edit OH and I just realized the demo image doesn’t have the nav links on it but that’s okay, you still get the idea for the layout

11

and I just noticed also that the footer covers part of the body

12

Looks almost exactly like the code I posted :slight_smile:

the only issue is that there is a black line running between the header and the body,

That line seems to be part of your header image itself.

also the footer is positioned on the left whereas the body and header are centered.

Looks exactly like your drawing to me and is centered as it should be unless you mean something else?

and I just noticed also that the footer covers part of the body

Again it looks much like your drawing. You should make sure the footer background sits inside the repeating outer if you don’t want a clash of backgrounds although they seem to merge quite well in the demo I posted.

Here is the code again and I’ve shortened the header height so that your black line will disappear.


<!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">
<head>
<title>Original Gangster Burgers Inc</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="styles2.css" />
<style type="text/css">
html, body {
    margin:0;
    padding:0;
}
body {
    background:#000;
    color: #fff;
}
#outer {
    width:1024px;
    margin:auto;
    color:#000;
    background:url(http://www.originalgangsterburgers.com/images/body.jpg) repeat-y 0 0;
}
#header {
    position: relative;
    height:230px;
}
#header h1, #header h1 em {
    margin:0;
    width:1024px;
    height:230px;
    display:block;
    position:relative;
    overflow:hidden;
}
#header h1 em {
    background:url(http://www.originalgangsterburgers.com/images/header.png) no-repeat 0 0;
    left:0;
    top:0;
    position:absolute;
}
#body {
    width:1024px;
}
#footer {
    width:1024px;
    margin:auto;
    height:72px;
    background:url(http://www.originalgangsterburgers.com/images/footer.jpg) no-repeat 0 0;
}
#navigation {
    position: absolute;
    top: 193px;
    left: 90px;
    display: block;
    width:1024px;
    height:32px;
}
#navigation ul {
    margin: 0;
    padding: 0;
}
#navigation li, #navigation a {
    position:absolute;
    height: 0;
    width: 0;
    top: 0;
    left:0;
}
#navigation a {
    position:absolute;
    height: 29px;
    width: 49px;
}
#navigation li#home {
    background: url(http://www.originalgangsterburgers.com/images/homehover.png) 0 0;
}
#navigation li#home a {
    background: url(http://www.originalgangsterburgers.com/images/homenav.png) 0 0;
    top: 3px;
    left: 1px;
}
#navigation li#home a:hover, #navigation li#home a:active {
    background: url(http://www.originalgangsterburgers.com/images/homehover.png) 0 0;
    top:0;
    left:0;
}
#navigation li#aboutus {
    background: url(http://www.originalgangsterburgers.com/images/aboutushover.png) 0 0;
}
#navigation li#aboutus a {
    background: url(http://www.originalgangsterburgers.com/images/aboutusnav.png) 0 0;
    top: 3px;
    left: 102px;
    width: 78px;
}
#navigation li#aboutus a:hover, #navigation li#aboutus a:active {
    background: url(http://www.originalgangsterburgers.com/images/aboutushover.png) 0 0;
    top:0;
    left:100px;
}
#navigation li#menu {
    background: url(http://www.originalgangsterburgers.com/images/menuhover.png) 0 0;
}
#navigation li#menu a {
    background: url(http://www.originalgangsterburgers.com/images/menunav.png) 0 0;
    top: 3px;
    left: 234px;
    width: 47px;
}
#navigation li#menu a:hover, #navigation li#menu a:active {
    background: url(http://www.originalgangsterburgers.com/images/menuhover.png) 0 0;
    top:0;
    left:233px;
}
#navigation li#photos {
    background: url(http://www.originalgangsterburgers.com/images/photoshover.png) 0 0;
}
#navigation li#photos a {
    background: url(http://www.originalgangsterburgers.com/images/photosnav.png) 0 0;
    top: 3px;
    left: 339px;
    width: 62px;
}
#navigation li#photos a:hover, #navigation li#photos a:active {
    background: url(http://www.originalgangsterburgers.com/images/photoshover.png) 0 0;
    top:0;
    left:338px;
}
#navigation li#directions {
    background: url(http://www.originalgangsterburgers.com/images/directionshover.png) 0 0;
}
#navigation li#directions a {
    background: url(http://www.originalgangsterburgers.com/images/directionsnav.png) 0 0;
    top: 3px;
    left: 457px;
    width: 89px;
}
#navigation li#directions a:hover, #navigation li#directions a:active {
    background: url(http://www.originalgangsterburgers.com/images/directionshover.png) 0 0;
    top:0;
    left:456px;
}
#navigation li#contactus {
    background: url(http://www.originalgangsterburgers.com/images/contactushover.png) 0 0;
}
#navigation li#contactus a {
    background: url(http://www.originalgangsterburgers.com/images/contactusnav.png) 0 0;
    top: 3px;
    left: 582px;
    width: 94px;
}
#navigation li#contactus a:hover, #navigation li#contactus a:active {
    background: url(http://www.originalgangsterburgers.com/images/contactushover.png) 0 0;
    top:0;
    left:581px;
}
.scroll {
    margin-left: 60px;
    width: 902px;
}
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;
}
h2.beef {
    font-size: 2.5em;
    text-align: center;
    padding: 15px 0px 5px 0px;
    margin: 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;
}
</style>
</head>
<body>
<div id="outer">
    <div id="header">
        <h1>Gangster Burgers<em></em></h1>
        <div id="navigation">
            <ul>
                <li id="home"><a  href="http://www.originalgangsterburgers.com/index.html"></a></li>
                <li id="aboutus"><a  href="http://www.originalgangsterburgers.com/aboutus.html"></a></li>
                <li id="menu"><a href="http://www.originalgangsterburgers.com/menu.html"></a></li>
                <li id="photos"><a href="http://www.originalgangsterburgers.com/construction.html"></a></li>
                <li id="directions"><a href="http://www.originalgangsterburgers.com/directions.html"></a></li>
                <li id="contactus"><a  href="http://www.originalgangsterburgers.com/contactus.html"></a></li>
            </ul>
        </div>
    </div>
    <div id="body">
        <div class="scroll">
            <h2 class="beef"> GOT BEEF! </h2>
            <p class="beef"> Can You Handle Our Burgers? </p>
            <p><img class="home" src="http://www.originalgangsterburgers.com/images/home.png" alt="" /></p>
            <h1> This Month's Special </h1>
            <p><img class="home" src="http://www.originalgangsterburgers.com/images/febpromofront.jpg" alt="" /><img class="home" src="http://www.originalgangsterburgers.com/febpromoback.jpg" alt="" /></p>
        </div>
    </div>
    <div id="footer"></div>
</div>
</body>
</html>

That should serve as a base for you to use but you will of course need to tweak things to make them fit where required. I can’t do everything for you as I don’t know exactly how you want it but it should point you in the right direction.

The only absolute positioning is for the navigation and we can do that because the height is preserved in the header so as not to interrupt the flow of the document.

The page is a basic auto margined centred page with elements mainly in the flow so that there is no need to position everything. The background is repeated on the outer wrapper which means it will repeat forever and be as high as the page needs to be. There may be issues if you haven’t made the image start and end positions look the same so that they can repeat seamlessly.

Take some time to deconstruct and understand the layout as it as it will help you later on. If you don’t understand anything in particular then shout and we’ll explain why something is done the way it is.

Bear in mind that you may need to be creative to achieve the desired effect.

Hope it helps anyway. :slight_smile:

13

Thanks so much. I fiddled around and found out that the black line that shows up between the header and the body was caused by the auto padding so I set padding to 0 and it fixed it.

I figured out how you got it to work like that and I’m so greatful because I have a better grasp of how to make layouts. I’m not scared of relative positioning anymore lol :slight_smile:

The thing I can’t seem to get is the footer. When I view it, the footer is positioned to the left while the rest of the page is centered. I have a 19" monitor so I’m not sure if that’s why it appears centered in yours. I checked with other browsers and I’m getting the same problem. I tried setting margin to auto and it doesn’t fix it. I’ll keep fiddling, hopefully I get it. Don’t spend too much more of your time on this, you’ve done more than enough.

Thanks to everyone! I’ll post again once I get it.

14

Okie, last post…

It seems that if I add
left:auto;
to the footer style, it centers the footer image… This would be the new code:

<!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">
<head>
<title>Original Gangster Burgers Inc</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="styles2.css" />
<style type="text/css">
html,body {
    margin:0;
    padding:0;
}
body {
    background:#000;
    color: #fff;
}
#outer{
    width:1024px;
    margin:auto;
    color:#000;
    background:url(images/extendbody.jpg) repeat-y 0 0;
}
#header {
    position: relative;
    height:235px;
}
#header h1,#header h1 em {
    margin:0;
    padding:0;
    width:1024px;
    height:235px;
    display:block;
    position:relative;
}
#header h1 em {
    background:url(images/header.png) no-repeat 0 0;
    left:0;
    top:0;
    position:absolute;
}

#body {
    width:1024px;
}
#footer {
    width:1024px;
    height:72px;
    margin:auto;
    padding:0;
    left:auto;
    background:url(images/footer.jpg) no-repeat 0 0;
}
#navigation {
    position: absolute;
    top: 193px;
    left: 90px;
    display: block;
    width:1024px;
    height:32px;
}
#navigation ul {
    margin: 0;
    padding: 0;
}
#navigation li,#navigation a {
    position:absolute;
    height: 0;
    width: 0;
    top: 0;
    left:0;
}
#navigation a {
    position:absolute;
    height: 29px;
    width: 49px;
}
#navigation li#home{background: url(http://www.originalgangsterburgers.com/images/homehover.png) 0 0;}
#navigation li#home a{
    background: url(http://www.originalgangsterburgers.com/images/homenav.png) 0 0;
    top: 3px;
    left: 1px;
}
#navigation li#home a:hover,
#navigation li#home a:active {
    background: url(http://www.originalgangsterburgers.com/images/homehover.png) 0 0;
    top:0;
    left:0;
}

#navigation li#aboutus{background: url(http://www.originalgangsterburgers.com/images/aboutushover.png) 0 0;}
#navigation li#aboutus a{
    background: url(http://www.originalgangsterburgers.com/images/aboutusnav.png) 0 0;
    top: 3px;
    left: 102px;
    width: 78px;
}
#navigation li#aboutus a:hover,
#navigation li#aboutus a:active {
    background: url(http://www.originalgangsterburgers.com/images/aboutushover.png) 0 0;
    top:0;
    left:100px;
}

#navigation li#menu{background: url(http://www.originalgangsterburgers.com/images/menuhover.png) 0 0;}
#navigation li#menu a{
    background: url(http://www.originalgangsterburgers.com/images/menunav.png) 0 0;
    top: 3px;
    left: 234px;
    width: 47px;
}
#navigation li#menu a:hover,
#navigation li#menu a:active {
    background: url(http://www.originalgangsterburgers.com/images/menuhover.png) 0 0;
    top:0;
    left:233px;
}
#navigation li#photos{background: url(http://www.originalgangsterburgers.com/images/photoshover.png) 0 0;}
#navigation li#photos a{
    background: url(http://www.originalgangsterburgers.com/images/photosnav.png) 0 0;
    top: 3px;
    left: 339px;
    width: 62px;
}
#navigation li#photos a:hover,
#navigation li#photos a:active {
    background: url(http://www.originalgangsterburgers.com/images/photoshover.png) 0 0;
    top:0;
    left:338px;
}
#navigation li#directions{background: url(http://www.originalgangsterburgers.com/images/directionshover.png) 0 0;}
#navigation li#directions a{
    background: url(http://www.originalgangsterburgers.com/images/directionsnav.png) 0 0;
    top: 3px;
    left: 457px;
    width: 89px;
}
#navigation li#directions a:hover,
#navigation li#directions a:active {
    background: url(http://www.originalgangsterburgers.com/images/directionshover.png) 0 0;
    top:0;
    left:456px;
}
#navigation li#contactus{background: url(http://www.originalgangsterburgers.com/images/contactushover.png) 0 0;}
#navigation li#contactus a{
    background: url(http://www.originalgangsterburgers.com/images/contactusnav.png) 0 0;
    top: 3px;
    left: 582px;
    width: 94px;
}
#navigation li#contactus a:hover,
#navigation li#contactus a:active {
    background: url(http://www.originalgangsterburgers.com/images/contactushover.png) 0 0;
    top:0;
    left:581px;
}
.scroll {
    margin-left: 60px;
    width: 902px;
}
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;
}
</style>
</head>
<body>
<div id="outer">
    <div id="header">
        <h1><em></em></h1>
        <div id="navigation">
            <ul>
                <li id="home"><a  href="http://www.originalgangsterburgers.com/index.html"></a></li>
                <li id="aboutus"><a  href="http://www.originalgangsterburgers.com/aboutus.html"></a></li>
                <li id="menu"><a href="http://www.originalgangsterburgers.com/menu.html"></a></li>
                <li id="photos"><a href="http://www.originalgangsterburgers.com/construction.html"></a></li>
                <li id="directions"><a href="http://www.originalgangsterburgers.com/directions.html"></a></li>
                <li id="contactus"><a  href="http://www.originalgangsterburgers.com/contactus.html"></a></li>
            </ul>
        </div>
    </div>
    <div id="body">
	<div class="scroll">
            <h1 class="beef"> GOT BEEF! </h1>
            <p class="beef"> Can You Handle Our Burgers? </p>
            <p><img class="home" src="http://www.originalgangsterburgers.com/images/home.png" alt="" /></p>
            <h1> This Month's Special </h1>
            <p><img class="home" src="http://www.originalgangsterburgers.com/images/febpromofront.jpg" alt="" /><img class="home" src="http://www.originalgangsterburgers.com/febpromoback.jpg" alt="" /></p>
   	</div>
    </div>
    <div id="footer"></div>
</div>
</body>
</html>

Hopefully, there is nothing wrong with this? No rules I’ve broken? :slight_smile:
If it really was this simple, I need to slap myself lol.

15

Since #footer isn’t positioned, it shouldn’t react at all to left: auto : )

Coords like top and left affect “positioned” elements… those with either position: relative or absolute on them.

Normally, on static blocks (boxes who aren’t positioned), setting a width and margin: auto does the trick. When it doesn’t, there’s usually something else going on like boxes on the side who block automargins.

16

Hi,

As Stomme said the code you added will not make any difference as it does not apply.

I’m guessing that you might be linking to the old stylesheet while at the same time have the new styles in the head. - I could be wrong though :slight_smile:

17

I tried setting the width and making margin set as auto but it didn’t work. I’m not linking to another stylesheet. The left:auto works for some reason. The website is running at
www.originalgangsterburgers.com.

Any ideas why it’s working but margin auto isn’t?

18

note:
I realize the code I posted on here linked to another stylesheet but I changed it after and made an external stylesheet with the same styles I used in the above example and only linked to that one. The footer is still centered. No idea why, but it still wouldn’t work when I tried to use margin auto… oy!

19

Margin:0 auto; only works on static (and relative) elements. If an element has position:absolute; then it won’t recognize margin:0 auto; but it will recognize left:auto; and other vlaues :slight_smile:

20

I just went to the site, you nest footer inside of the wrapper thus it’s centered already. You don’t even need margin:auto or the left:auto (though if footer was outisde wrapper then the margin:auto; would be needed but not left:auto)