4 replies [Last post]
Stealthspy589
Offline
newbie
Last seen: 6 years 4 weeks ago
Joined: 2008-10-16
Posts: 2
Points: 0

This has been REALLY stressing me out. Not a single css background image is showing up.

This is my CSS:

body
{
	background-color: #000000;
	color: ffffff;
	padding: 0;
}
 
#navcontainer
{
	height: 35px;
	margin-left: 35px;
	margin-right: 50px;
	margin: 0 40px 0 30px;
}
 
#navcontainer ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}
 
#navcontainer ul li
{
	display: inline;
	text-align: center;
	padding: 0;
	margin: 0;
	float: left;
}
 
#navcontainer ul li a
{
	background: url(graphics/layout/button.png);
	width: 100px;
	height: 35px;
	padding: 0;
	margin: 0 0 5px 0;
	color: #ffffff;
	text-decoration: none;
	display: block;
	text-align: center;
	border-left: 1px solid #97695b;
	border-bottom: 2px solid #97695b;
}
 
#navcontainer ul li a:hover
{
	background: #282828 url(graphics/layout/h_button.png);
}
 
#master
{
	background-image: url(graphics/layout/master_bg.png);
	width: 740px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	border: thin solid #97695b;
}
 
 
 
#banner
{
	width: 740px;
	height: 250px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
}

And this is my XHTML page.

<html>
<head>
<title>GearedGamer.net</title>
<meta http-equiv="Page-Exit" content="blendTrans(Duration=1.0)">
<link href="css/css.css" rel="stylesheet" type="text/css" media="all">
 
</head>
<body>
 
<div id="master">
	<div id="banner"><img src="graphics/layout/banner.png"></div>
	<div id="navcontainer">
		<ul id="navlist">
		<li><a id="active" href="#">Home</a></li>
		<li><a href="#">Ratings</a></li>
		<li><a href="#">Reviews</a></li>
		<li><a href="#">Forum</a></li>
		<li><a href="#">Contacts</a></li>
		<li><a href="#">Support</a><img src="graphics/layout/button.png"></li>
		</ul>
	</div>
	<div id="main">All text</div>
</div>
 
</body>
</html>

thedooropens
Offline
Enthusiast
Last seen: 5 years 3 weeks ago
Timezone: GMT-7
Joined: 2008-10-02
Posts: 81
Points: 2

Can't see the forest for the trees!

Well, I'm just a fellow newbie looking for answers of my own, but I spotted several problems.

First off, your code for "background-image" in #navcontainer is just "background" which only sets the color

Second, and remember I'm new, I have found that CSS won't find my bgrd img unless I use the path: (../graphics/layout/button.png);

Third, and maybe you should search around for this one, but you should declare the states for a in proper order ie - link, visited, hover, active...

Keep plugging away, I'm off to find my solution Good Luck!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 23 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3570
Points: 675

assuming you have your url

assuming you have your url correct, it should not be:

background: url(graphics/layout/button.png);

but rather:

background: #fff url(graphics/layout/button.png);

The first paramater being the default background color.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 17 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9252
Points: 3258

But I wouldn't assume the

But I wouldn't assume the path to the images is correct. The path is relative to the css file.

Does the directory of your css file have a subdirectory "graphics/layout/"?

cheers,

gary

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.

Stealthspy589
Offline
newbie
Last seen: 6 years 4 weeks ago
Joined: 2008-10-16
Posts: 2
Points: 0

Thanks to all!

Thanks to all!