2 replies [Last post]
mdwebcat
mdwebcat's picture
Offline
Regular
Last seen: 2 years 46 weeks ago
Timezone: GMT-5
Joined: 2010-12-03
Posts: 24
Points: 32

Hi - Puzzled

I am trying to put together a multi-level bulleted list. I would like the bullet to be an image - an arrow specifically that I designed in Photoshop. I cannot get it to work and really need some guidance on what I am doing wrong.

The image name for the bullet is arrow.gif and right now it is at the root level. I will switch over to an images folder later on and will switch out the path in the CSS.

Here is the HTML Code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active">Item one 
      <ul id="subnavlist">
        <li id="subactive">Subitem one</li>
        <li>Subitem two</li>
        <li>Subitem three</li>
      </ul>
 
</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
</ul>
</div>
 
 
</body>
</html>

Here is the CSS:

#navcontainer { margin-left: 20px; }
 
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-image:url('arrow.gif');
font-family: verdana, arial, sans-serif;
}
 
#navcontainer li { margin: 0; }
 
#navcontainer a
{
display: block;
color: #333;
background-color: transparent;
width: 140px;
padding: 2px 10px;
text-decoration: none;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
border-left: 1px solid #aaa;
font-size: 12px;
}
 
#navcontainer ul ul
{
margin-left: -30px;
padding: 0;
 
}
 
#navcontainer li li a
{
display: block;
color: #333;
background-color: transparent;
width: 110px;
padding: 2px 10px;
margin: 0;
border-top: none;
border-bottom: none;
border-left: 1px solid #aaa;
text-decoration: none;
font-size: 12px;
}

Any help is much appreciated!!

Thanks. Puzzled

mdwebcat
mdwebcat's picture
Offline
Regular
Last seen: 2 years 46 weeks ago
Timezone: GMT-5
Joined: 2010-12-03
Posts: 24
Points: 32

Well, I get the arrows to

Well, I get the arrows to show up if I place this style on the HTML page.

ul { list-style-image: url("arrow.gif") }

I still cannot figure it out within the CSS page though. I also need to adjust how much the second level indents.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 11 weeks 6 hours ago
Milton Keynes
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

list style image is difficult

list style image is difficult to get working properly. Set it to none and use a background image instead.

Also, you're missing a doctype.

Verschwindende wrote:
  • CSS doesn't make pies