|
| |
|
|
boonedawg
Posts: 36
Joined: 4/8/2006
Status: offline
 |
CSS menu with image for bullets - 4/16/2006 16:37:09
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;
}
|
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
