Navbar in CSS

[garcosta]

I am having a problem getting rid of small black bullets showing up on my navbar at the right side. Can anyone figure this one out for me please? I would like a 1 px vertical line to separate each of the buttons. Here is the code I am using. I attached the two jpg files I am using for the Navbars and a photo of what the bullets look like.



CSS Stylesheet

/* Navigation Bar */
/* Navbar hover, active, and current page links */
#navbar a:hover,
#navbar a:active,
#navbar li.selected a:link,
#navbar li.selected a:visited{
text-decoration: underline;
font-family: Verdana, Geneva, Arial, Sans-Serif;
font-size:medium;
border-right: solid 1px #000000;
color:#ffffff;
background:url(pics/button2.jpg) repeat-x center;
display:block;
height:2.5em;
line-height:2em;
text-align:center;
}

/* Navigation Bar */
#navbar{
text-decoration:none;
font-family:Verdana, Geneva, Arial, Sans-Serif;
font-size:medium;
color:#000000;
background:url(pics/button1.jpg) repeat-x center;
display:block;
height: 2.5em;
width: 100%;
line-height: 2em;
border-bottom: solid 1px #000000;
border-right: solid 1px #000000;
text-align:center;
}
#navbar li{
width:25%;
}

#navbar li{
float:left;
}

ul, ol, li {
margin : 0;
padding : 0;
}


Index.htm File

<div id="navbar">
<ul>
<!-- The selected class identifies current page or category -->
<li class="selected"><a href="Index.htm">Home</a></li>
<li><a href="bernedoodles.htm">Bernedoodles</a></li>
<li><a href="puppies.htm">Puppies</a></li>
<li><a href="contract.htm">Ordering or Purchasing</a></li>
</ul>
</div><!-- End navbar -->

 

[Olaf Doschke]

Take a look at the li list-style-type, this is a filled circle (disc) as default. You want none.

Bye, Olaf.

 

[vacunita]

Un-ordered list elements or ULs have by default a bullet list-style-type. You need to set that to none at some point. Your code does not do this.

http://www.w3schools.com/css/css_list.asp

You can also use an image for the bullets if you want to.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[garcosta]

Thank you for that information. I added that coding and it took away the dots.

Now I'm trying to figure out how to add the vertical lines but I may have an idea. Will try it later.

 

[garcosta]

I was not able to figure out how to get vertical lines between my navbars. Any ideas?

 

[ChrisHirst]

Use border-left or border-right properties on the appropriate element and a first-child or last-child selector to turn the border off at the extreme end element(s)





Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[c0deM0nK424]

have you tried this ?


#navbar li{
width:25%;
list-style-type:none;
}

try it and see what happens.