CSS Background image for UL

I'm trying to put a background image on a horizontal nav bar using

Page 1 of 1

5 Replies - 13696 Views - Last Post: 02 June 2009 - 11:24 PM

#1 dini_barbie   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 02-June 09

CSS Background image for UL

Posted 02 June 2009 - 10:20 AM

Hi everyone,

I am trying to put a background on a horizaontal menu that was created using an unordered list. Im trying to use CSS to add the background.However, when I do this the image isn't coming out properly. The first 5th shows and then it repeats itself. When I change the width to 800px which is the width of the menu box it then repeats itself vertically.

Anyway this is the HTML
<body>
<head>
<link href="index.css" rel="stylesheet" type="text/css" />



<div id="container">
<div id="header"></div>

<div id="menu">
<ul>
	
	<li><link href="index.html">Home</a></li>
	<li><link href="ausstores.html">Australian Stores</a></li>
	<li><link href="intstores.html">International Stores</a></li>
	<li><link href="trendreport.html">Trend Report </a></li>
	<li><link href="Designertricks.html">Designer Tricks</a></li>
	
</ul>
</div>




and the CSS to go with it

body {
	font-family: "Park Avenue BT", Arial , Helvetica;
	font-size: 12px;
	color:#FFFFFF;
	background-color:#000000;
	margin: 0;
	padding: 0;
}

#container {
	height:auto;
	width:960px;
	margin-right:auto;
	margin-left:auto;
	background-color: #FF9999;
	padding: 0;
	
}

#header {
	height: 120px;
	width: 800px;
	background-color:#FFFFFF;
	background-image: url(../images/logo.png);
	background-repeat: no-repeat;
	float: left;
	
}


#leftCol {
	width: 160px;
	height: auto;
	background-color: #FFCC66;
	float: left;
	margin: 0;
}

#menu {
	float: left;
	width: 800px;
	margin:0;
	padding:0;

}

#menu li {
	background-color:#000000;
	list-style-type: none;
	float: left;
	height: 87px;
	width: 160px;
	text-align: left;
	font-size: 20px;
	line-height: 1.5em;
	margin: 0px;
	padding: 0px;
	border:solid
	display: inline;
	color:#FFFFFF;
	font-family:"Tempus Sans ITC", Tahoma, Comic Sans MS;
	font-weight:bold;
	background-image: url(navbackground.gif);width:800px;
	background-repeat:no-repeat;
	
	
	
		


}

#menu ul {
	padding: 0px;
	margin: 0px;
	
}



#menu li a {
	height: inherit;
	color:#FFFFFF;
	display: block;
	text-decoration: none;

}
	
#menu li a:hover {
	background-color: #FF66CC;
	color: #CCCCCC;

}



#content {
	height:auto;
	width: 780px;
	background-color:#000000;
	line-height: 18px;
	float: left;
	margin-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	color:#FFFFFF;
	font-family:"Tempus Sans ITC",Bradely Hand ITC, Tahoma, Comic Sans MS;
	font-weight:bold;
	
}





I think I may have put the background img tag in the wrong place. I'm not really sure though.

This post has been edited by dini_barbie: 02 June 2009 - 10:21 AM


Is This A Good Question/Topic? 0
  • +

Replies To: CSS Background image for UL

#2 Toxicterror   User is offline

  • blub

Reputation: 15
  • View blog
  • Posts: 687
  • Joined: 10-March 09

Re: CSS Background image for UL

Posted 02 June 2009 - 11:59 AM

hi and welcome to DIC
i see you got used to the rules already and to the [code] tags [/code]


did you upload these files anywhere already? would make it easier for me to help, since im very lazzy :P

This post has been edited by Toxicterror: 02 June 2009 - 12:00 PM

Was This Post Helpful? 0
  • +
  • -

#3 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: CSS Background image for UL

Posted 02 June 2009 - 02:35 PM

Reading your CSS your area with the background is going to be 87px high, if your image is higher than 87px than that would be your reason.

Let me know exactly where you plan on putting the background and I can help you out more - currently it is on the LI but it seems to me that you MAY want it on the whole UL.

--

Greg
Was This Post Helpful? 0
  • +
  • -

#4 SixOfEleven   User is offline

  • Planeswalker
  • member icon

Reputation: 1055
  • View blog
  • Posts: 6,643
  • Joined: 18-October 08

Re: CSS Background image for UL

Posted 02 June 2009 - 03:03 PM

I think part of your problem is this:

	background-image: url(navbackground.gif);width:800px;



The ; between the url of the image and the width shouldn't be there. That might be of help. Can you add a thumbnail of your navbackground.gif?
Was This Post Helpful? 0
  • +
  • -

#5 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: CSS Background image for UL

Posted 02 June 2009 - 09:28 PM

Quote

The ; between the url of the image and the width shouldn't be there. That might be of help. Can you add a thumbnail of your navbackground.gif?


I do believe it should actually, because after each CSS argument you put the ';' - he did this correctly.

--

Greg
Was This Post Helpful? 0
  • +
  • -

#6 Toxicterror   User is offline

  • blub

Reputation: 15
  • View blog
  • Posts: 687
  • Joined: 10-March 09

Re: CSS Background image for UL

Posted 02 June 2009 - 11:24 PM

i assume that navbackground.gif is in the same directory as the stylesheet! (if not, this could be the mistake)


ah no!!! got it ;)

Quote

border:solid

see what you forgot in the CSS file on this line??
the ;
thats why it repeats itself!
the no-repeat is underneath the missing semicolon and than it gets ignored!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1