CSS navigation

AdRock · #1 Jul 15th, 2006, 11:35

Hello nice people

I am really stumped on this one

I have some CSS i useto ge the effect i want using an unordered list to create my navigation. The only problem is that it is taking out the bullet but what I want to do is to be able to use either a square bullet or use my own. Apart from that it is perfect.

Can someone please have a look at the code and see what is going wrong?

Many thanks

Adam

Code: Select all

 
#navigation {padding: 0; margin: 0;
  font: bold 12px Verdana, sans-serif;
  border-bottom: 1px solid gray; width: 13em;}
#navigation li {list-style: square; margin: 0; padding: 0.25em;
  border-top: 1px solid gray;}
#navigation li a {text-decoration: none;}

Code: Select all

 
<ul id="navigation">
<li><a href="index.html" id="home">Home</a></li>
<li><a href="products.html" id="products">Products</a></li>
<li><a href="services.html" id="services">Services</a></li>
<li><a href="fun.html" id="fun">Fun!</a></li>
<li><a href="support.html" id="support">Support</a></li>
<li><a href="about.html" id="current">About Us</a></li>
<li><a href="contact.html" id="contact">Contact</a></li>
</ul>

ukgeoff · #2 Jul 15th, 2006, 11:56

The symbol selected using list-style or list-style-type actually appears in the left-hand margin space.

If you give your ul a margin-left: 20px for example, you will see the square.

This has the issue that the squares are to the left of your seperation lines but that may not be an issues for you. If it is, the best way around it I think is to provide your own image.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Navigation	inkz	Web Page Design	2	Apr 22nd, 2008 16:33
CSS Navigation Help	penguin	Starting Out	3	Mar 15th, 2008 15:43
Navigation help	elephantinc	Flash & Multimedia Forum	9	Feb 13th, 2008 23:46
CSS Navigation Help!	crackafaza	Web Page Design	3	Jan 21st, 2008 16:56
Navigation	Frankiiei	Starting Out	15	Sep 14th, 2007 16:03

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS navigation