Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Navbar in CSS and XHTML


  • Please log in to reply
3 replies to this topic

#1 garcosta

garcosta

  • Members
  • 4 posts
  • OFFLINE
  •  
  • Local time:10:32 AM

Posted 20 August 2015 - 12:26 PM

I am having a problem getting rid of the bullets showing up on my navbar.  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.

 

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 -->

 

 

 



BC AdBot (Login to Remove)

 


#2 pistol22cal

pistol22cal

  • Members
  • 294 posts
  • OFFLINE
  •  
  • Gender:Female
  • Local time:12:32 PM

Posted 21 August 2015 - 12:52 AM

What are you using to run this code Dreamweaver??

 

Cause your code is fine. 

 

Unless something is wrong somewhere else in some other code I don't see why this code would produce your issue.


I Love Lamp!


#3 wignall6

wignall6

  • Members
  • 37 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:06:32 PM

Posted 20 September 2015 - 09:59 AM

#navbar li{
float:left;

list-style: none;
}

 

that should fix your issue.



#4 pistol22cal

pistol22cal

  • Members
  • 294 posts
  • OFFLINE
  •  
  • Gender:Female
  • Local time:12:32 PM

Posted 20 September 2015 - 10:52 AM

Ahhhhh yes 

 

list-style: none;

 

Good eye!!!


I Love Lamp!





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users