INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Navbar in CSS

Navbar in CSS

(OP)
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 -->

RE: Navbar in CSS

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

Bye, Olaf.

RE: Navbar in CSS

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

RE: Navbar in CSS

(OP)
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.

RE: Navbar in CSS

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

RE: Navbar in CSS

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

RE: Navbar in CSS

have you tried this ?


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

try it and see what happens.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close