The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #33164

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

    Thanks for your help! :)


    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.


    I normaly do this:

    ul li span{
    width:10px; height:10px;

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

    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,

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.