1. Home
  2. Forums Index
  3. Browser Side / CSS 4:10 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

CSS menu with image for bullets

navbar with image bullets, need help

         

boonedawg

9:45 pm on Apr 16, 2006 (gmt 0)

10+ Year Member



Here is a navbar I made, it has images for bullets, but they are embedded in the link. I was wondering if someone could look at my code and show me how to put the bullet image in using css?

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>
<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="scripts/pageStyles.css" rel="stylesheet" type="text/css" />
<link href="scripts/textStyles.css" rel="stylesheet" type="text/css" />
<link href="scripts/navStyles.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="sidebar">
<div id="sidebarNavContainer">
<ul id="navlist">
<div class="sidebarNavTitle">Main Menu</div>
<li><a href="#"><img class="center" src="imgs/mb.gif" width="11" height="13" border="0" />Test Link</a></li>
<li><a href="#"><img class="center" src="imgs/mb.gif" width="11" height="13" border="0" />Test Link</a></li>
<li><a href="#"><img class="center" src="imgs/mb.gif" width="11" height="13" border="0" />Test Link</a></li>
<li><a href="#"><img class="center" src="imgs/mb.gif" width="11" height="13" border="0" />Test Link</a></li>
<li><a href="#"><img class="center" src="imgs/mb.gif" width="11" height="13" border="0" />Test Link</a></li>
<li><a href="#"><img class="center" src="imgs/mb.gif" width="11" height="13" border="0" />Test Link</a></li>
<li><a href="#"><img class="center" src="imgs/mb.gif" width="11" height="13" border="0" />Test Link</a></li>
<li><a href="#"><img class="center" src="imgs/mb.gif" width="11" height="13" border="0" />Test Link</a></li>
<div class="sidebarPageName"><img class="center" src="imgs/mb.gif" width="11" height="13" border="0" />Page Name</div>
<li><a href="#"><img class="center" src="imgs/mb.gif" width="11" height="13" border="0" />Test Link</a></li>
<li><a href="#"><img class="center" src="imgs/mb.gif" width="11" height="13" border="0" />Test Link</a></li>
<li><a href="#"><img class="center" src="imgs/mb.gif" width="11" height="13" border="0" />Test Link</a></li>
<li><a href="#"><img class="center" src="imgs/mb.gif" width="11" height="13" border="0" />Test Link</a></li>
<li><a href="#"><img class="center" src="imgs/mb.gif" width="11" height="13" border="0" />Test Link</a></li>
<li><a href="#"><img class="center" src="imgs/mb.gif" width="11" height="13" border="0" />Test Link</a></li>
<li><a href="#"><img class="center" src="imgs/mb.gif" width="11" height="13" border="0" />Test Link</a></li>
</ul>
</div>
</div>

</body>
</html>

css

/* Sidebar Nav */
#sidebarNavContainer {
width: 183px;
border-right: 1px solid #e3e3e3;
border-left: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
padding: 0;
margin-top: 5px;
width: 183px;
voice-family: "\"}\"";
voice-family: inherit;
width: 183px;
}
html>body #sidebarNavContainer {
width: 183px;
}

#sidebarNavContainer ul {
list-style-type: none;
font-size: 11px;
padding: 0;
margin: 0;
}

#sidebarNavContainer a {
width: 183px;
display: block;
background-color: #ffffff;
outline: none;
padding: 1px 0 1px 5px;
width: 183px;
voice-family: "\"}\"";
voice-family: inherit;
width: 178px;
}
html>body #sidebarNavContainer a {
width: 178px;
}

#sidebarNavContainer a:link, #sidebarNavContainer a:visited {
color: #001452;
text-decoration: none;
outline: none;
}

#sidebarNavContainer a:hover {
background-color: #efefef;
color: #001452;
outline: none;
}

.sidebarNavTitle {
width: 183px;
background-color: #001452;
font-weight: bold;
color: #ffffff;
padding: 2px 0 2px 5px;
margin: 0;
width: 183px;
voice-family: "\"}\"";
voice-family: inherit;
width: 178px;
}
html>body .sidebarNavTitle {
width: 178px;
}

.sidebarPageName {
width: 183px;
font-weight: bold;
color: #001452;
padding: 2px 0 2px 10px;
margin: 0;
width: 183px;
voice-family: "\"}\"";
voice-family: inherit;
width: 173px;
}
html>body .sidebarPageName {
width: 173px;
}

zackattack

9:59 pm on Apr 16, 2006 (gmt 0)

10+ Year Member



Hi boonedawg

You are almost there, this is very easy , just add the bullet as a background image to the <li> in the stylesheet. You can adjust the position of the bullet (depending on its size) by using the padding and the background image position

#sidebarNavContainer ul {
list-style-type: none;
font-size: 11px;
padding: 0;
margin: 0;
}

#sidebarNavContainer ul li {
padding: 0 0 4px 12px; /*adjust padding to make space*/
line-height: 1.4em;
background: url(bullet.gif) no-repeat 0 5px; /*adjust background position here, the first value is the x and the second the y position */
}

Good Luck

ZA

boonedawg

11:09 pm on Apr 16, 2006 (gmt 0)

10+ Year Member



Zach,

Thanks so much for the quick reply. I changed my css style sheet and work out the positioning. The only thing is I don't know how to get the bullet to be inside the <li></li> tags. Currently it is floating outside. :(

#sidebarNavContainer {
width: 193px;
border-right: 1px solid #e3e3e3;
border-left: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
padding: 0;
margin-top: 5px;
width: 193px;
voice-family: "\"}\"";
voice-family: inherit;
width: 183px;
}
html>body #sidebarNavContainer {
width: 183px;
}

#sidebarNavContainer ul {
list-style-type: none;
font-size: 11px;
padding: 0;
margin: 0;
}

#sidebarNavContainer li{
background: url(../imgs/mb.gif) no-repeat 5px 5px;
list-style-type: none;
padding: 0 0 0 13px;
margin: 0;
}

#sidebarNavContainer a {
width: 170px;
display: block;
background-color: #ffffff;
outline: none;
padding: 1px 0 1px 5px;
width: 170px;
voice-family: "\"}\"";
voice-family: inherit;
width: 165px;
}
html>body #sidebarNavContainer a {
width: 165px;
}

#sidebarNavContainer a:link, #sidebarNavContainer a:visited {
color: #001452;
text-decoration: none;
outline: none;
}

#sidebarNavContainer a:hover {
background-color: #efefef;
color: #001452;
outline: none;
}

.sidebarNavTitle {
width: 183px;
background-color: #001452;
font-weight: bold;
color: #ffffff;
padding: 2px 0 2px 5px;
margin: 0;
width: 183px;
voice-family: "\"}\"";
voice-family: inherit;
width: 178px;
}
html>body .sidebarNavTitle {
width: 178px;
}

.sidebarPageName {
width: 170px;
background: url(../imgs/mb.gif) no-repeat 15px 5px;
font-weight: bold;
color: #001452;
padding: 2px 0 2px 25px;
margin: 0;
width: 170px;
voice-family: "\"}\"";
voice-family: inherit;
width: 160px;
}
html>body .sidebarPageName {
width: 160px;
}

Also I would like to ask another question. What I would like to achieve is something slightly different than the previous menu bar. What I want to do is have the image bullet change colors instead of the background color changing in the <li></li> tags. Is this possible? I am unsure as to how to do this, any suggestions would be greatly appreciated.

boonedawg

11:12 pm on Apr 16, 2006 (gmt 0)

10+ Year Member



Also the Page Name is currently a <div> tag. Is there a way I can achieve the same effect using <li> tags? Thanks in advance for any help in any of my questions.

boonedawg

8:16 am on Apr 17, 2006 (gmt 0)

10+ Year Member



I figured it out, thanks for your help.

[edited by: SuzyUK at 11:13 am (utc) on April 19, 2006]
[edit reason] removed URL : see TOS #13 [WebmasterWorld.com] [/edit]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 4:10 am May 2, 2026