CSS: How to place/position custom graphic bullets “between” a horizontal list

[robst]

Hi Everyone,

I’m having a little trouble positioning/placing custom bullet graphics in between my horizontal navigation. I’m going to provide a link to a client site that I’m designing/building for so you can see what I’m trying to accomplish. My client has not purchased hosting yet, although he has purchased a domain name, so I’ve got the site started on my server:
http:/robstathem.com/alimmalik
Several folks have suggested I place the custom graphic bullet within the list item tag, but then graphic bullets are placed for every link and it defeats the purpose of having “in-between” bullets. I’ve heard that there are ways to hide the first bullet outside of the first link using the pseudo class element “first”, but I’m not entirely sure I’m understanding that concept.

Have you encountered this issue before, and what has worked best for you? Others have suggested creating an empty div 10×10 pixels to accommodate the bullet. I guess it would look something like this:

• Home
• Biography

etc, etc….

Thanks for your help! :)
-R.S.

[robst]

Duh…yeah I was trying to illustrate the code I have for my main navigation and it propagated as links below without showing the code. Having a brain-dead day! It’s ok! You can just view source code!

Oh..and no, my client is not Matthew McConnaughey..just using a placement photo for the time being until my client sends me his bio photo! Patience I guess is a virtue!? :/

Thanks ya’ll.

[akurtula]

I normaly do this:

link




ul li span{

width:10px; height:10px;

background-image:url();

}

however I personaly like the line to seperate the links; like:

ul li a{

width: 200px;

border-right:1px black solid;

}

to style the first element you do this (I think):

ul li a:first{}

[robst]

Awesome; thanks akurtula! I’ll give that a try! Sometimes I use Dreamweaver, and it comes with pre-packaged snippets. There’s a horizontal separator snippet code in there, BUT it’s in HTML! Bleh!!! :( LOL! Yeah….that’s my reaction. A table-coded navigation list. Oh well…but then you don’t get the same control using that snippet separator list as you would using CSS.

Thanks for your assistance,
R.S.

[Author]

Posts