Forums

pettisson

Hi, I'm making, or trying to make, that 3 state menu(with twist) I want the background image to be the same for every un ordered list item - so I can change the text myself for each list item. In my mind, this seems like childs play with CSS but...
I got this really silly problem. The background images wont show up!

Can you guys take a quick peak at the code for me and see if I made some kind of uh - I-dont-know-what-kind of problem, pretty please.

I also tried to make a test DIV at the bottom of my html and add a background image. It didn't show up either.
My image folder IS named "images" and the background image I want to use IS name "button.png" so I'm going mad now because I see no error in my code or anything, and still it wont show!

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

<head>
	<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
	<title>Pettis menutest </title>
	<link rel=\"stylesheet\" type=\"text/css\" href=\"css/styles.css\" />
</head>

<body id=\"home\">

	<div id=\"page-wrap\">
		
		<ul id=\"menu\">
				<li><a href=\"index.html\">Home</a></li>
				<li><a href=\"about.html\">About</a></li>
				<li><a href=\"contact.html\">Contact</a></li>
				<li>Something else</li>
		<ul>
	
		<div id=\"blimp\">
		
			<img src=\"images/blimp.jpg\" width=\"277\" height=\"277\" alt=\"Blimp\" />
			
			<img src=\"images/button.jpg\" width=\"150\" height=\"55\" alt=\"Blimp\" />
		
		</div>
		
		<div id=\"smallhead1\">
			<p>text</p>
		</div>

	</div>

</body>

</html>

and CSS

* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 62.5%;
	font-family: Helvetica, sans-serif;
	background: #ff6677;
}

#page-wrap {
	width: 500px;
	margin: 0 auto;
	background: #ff3530;
	border: solid 1px #000000;
}

	ul#menu {
		list-style: none;
	}
		ul#menu li {
			display: inline;
			background: background: url(images/button.png) no-repeat bottom center;
			display: block;
			height: 55px;
			width: 150px;
			float: left;
		}
				ul#menu li:hover {
				background-position: center center;
				}
			
	#blimp {background: #990000;
	}
	
	#blimp  img {display: block;
	margin: 0 auto 0 auto;
	}
	
	#smallhead1 {background: url(images/head1.jpg);
	width: 264px;
	height: 28px;
	}

Cuddles
Pettis

apostrophe

Your CSS file is in a folder on the same level as your images directory.

The path to your images, relative to the CSS file is

background: background: url(../images/button.png) no-repeat bottom center;

pettisson

Thank you. Yeah two dots made it. But only in the "test div" at the bottom. It still didn't show up in the unordered list. Is it not possible maybe. To make background imags for list items in common?

	ul#menu {
		list-style: none;
	}
		ul#menu li {
			background: background: url(../images/button.png) no-repeat bottom center;
			display: block;
			height: 55px;
			width: 150px;
			float: left;
		}

apostrophe

Look carefully at the code you just posted. You have 'background:' twice, that might have something to do with it.

pettisson

geez, I feel I'm asking such stupid questions :( yeah of course it was that problem. I guess I need some air to clear my head so I wont make these silly mistakes.

Thanks anyway!

treehouse : what would you like to learn today?

Forums

Silly problem really! (background image wont show itself)