Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: css bullet link

  1. #1
    Senior Coder
    Join Date
    May 2004
    Posts
    1,464
    Thanks
    15
    Thanked 0 Times in 0 Posts

    css bullet link

    I have an image that's a bullet in css -- is there anyway in css to make that image a link?

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    er, what?

    Links are HTML. CSS only applies style to HTML. So to make anything a link, you wrap it in an anchor tag:

    <a href="http://url.com">whatever</a>

    Maybe you could be more specific?

  • #3
    Senior Coder
    Join Date
    May 2004
    Posts
    1,464
    Thanks
    15
    Thanked 0 Times in 0 Posts
    well teh bullet shows up from the css and i want the bullet to be a link -- i guess i need to change the list and put the image in html??

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by esthera
    i guess i need to change the list and put the image in html??
    No, you need to be more specific and post some code of what you have so far. What bullet? A list-item bullet? My mind reading capabilities are slow this time of year.

  • #5
    Senior Coder
    Join Date
    May 2004
    Posts
    1,464
    Thanks
    15
    Thanked 0 Times in 0 Posts
    .mainlistz {
    list-style-image:url(tbullet.jpg);
    vertical-align: super;
    }

    but i want this tbullet.jpg to now be a link. should i remove it from the css?

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    try making it a background image instead:
    Code:
    <ul>
      <li><a href="#">list item</a></li>
    </ul>
    
    li a {
       background: url (../images/bullet.gif) no-repeat left .5em;
       padding-left: 1em;
    }
    Just an example, you'll have to play with the positioning a bit obviously. The idea is to insert the image as a bg image of the link itself and give it enough padding to look like a bullet on the left side.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •