• Locked
No replies
Sun, 2011-11-20 08:52
cdt415
cdt415's picture
Offline
Last seen: 1 year 26 weeks ago
newbie
Timezone: GMT-8
Joined: 2011-11-20
Posts: 1
Points: 2

hi everyone,

currently im trying to build a vertical navigation menu, and in it im trying to embed a custom made .png arrow to go with the headings in the navigation menu, which is Link List 1, and Link List 2.

however, the "background:(images/arrow.png)" attribute does not work when called out in the .css file. I currently have it called in a "li.break" rule in the css file...here is how my html and css code is structured:

<-- html code -->

<!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" />
 
<link href="testnav.css" rel="stylesheet" type="text/css" />
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
 
<script type="text/javascript" src="nav.js"></script>
 
<title>Untitled Document</title>
</head>
 
<body>
 
<ul id="nav">
 
<p class="break">Project Gallery</p>
 
  <li class="break"><a href="#"><span class="head_space">Link List 1</span></a>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
 
    </ul>
  </li>
  <li><a href="#"><span class="head_space">Link List 2</span></a>
    <ul>
      <li><a href="#">Link 1 </a></li>
      <li><a href="#">Link 2</a></li>
 
    </ul>
  </li>
</ul>
 
</body>
</html>

<-- css code -->

body
 
{
 
 
font:Arial, Helvetica, sans-serif;
font-size:11px;
color:#898989;
 
}
 
#nav 
 
{
 
float: left; 
width: 250px;  
list-style:none; 
font-family:Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
letter-spacing:1px;
line-height:170%;
border:1px solid red;
 
 
}
 
#nav li a 
 
{
 
font-size:11px;
color:#898989;
display: block; 
text-decoration: none; 
 
 
}
 
#nav li a:hover, #nav li a.active 
 
{
 
 
color: #F58025; 
 
 
}
#nav li ul 
 
{
 
display: none; 
list-style:none;
 
}
 
#nav li ul li a 
 
{
 
text-indent:-25px;
 
}
 
li.break
 
{
 
margin-top:0px;
margin-bottom:12px;	
padding:0px;
background:url(images/arrow.png) no-repeat 0px 0px;
 
}
 
.head_space
 
{
 
margin-left:0px;
letter-spacing:2px;
line-height:150%;
 
 
}
 
#nav .head_space
 
{
 
 
 
}
 
.indent
 
{
 
text-indent:-40px;
 
}
 
p.break
 
{
 
margin-top:0px;
margin-bottom:8px;
 
 
}

any help is greatly appreciated. Thank you!

Top
Tags: