SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Algining an Image in a link

    I am trying to create a navigation system so that i have an image within my navigation like a > then the text.

    For E.G

    > Home
    > Conatct Us

    Now i have no idea how to create the list with the image I have tried various ways and just can't get it to work.

    I have found a website where I like the way they have done it but am struggling to recreate the design.

    http://http://www.willasrari.com/blog/

    This what I have so far

    CSS

    Code:
    #navcontainer { width: 160px;  }
    
    #navcontainer ul
    {
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    }
    
    #navcontainer li
    {
    background-image:url(images/button.gif);
    background-repeat:no-repeat;
    }
    
    #navcontainer a
    {
    font: 12px "Arial", Helvetica, Sans-serif;
    display: block;
    margin: auto;
    padding: 4px 0px 4px 15px;
    width: 160px;
    border: 1px solid #eee;
    }
    
    #navcontainer a:link, #navlist a:visited
    {
    color: #000;
    text-decoration: none;
    }
    
    #navcontainer a:hover
    {
    color: #67a779;
    text-decoration:underline;
    }

    HTML

    Code:
    <div id="navcontainer">
    <ul id="navlist">
    <li><a href="#">Item one (35)</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    <li><a href="#">Item four</a></li>
    <li><a href="#">Item five</a></li>
    </ul>
    </div>

    I imagine I have probably done it wrong so any advice would be most appreciated.

    Thank You
    Last edited by Struggling; Jan 15, 2008 at 13:49. Reason: wrong url

  2. #2
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    PHP Code:
    #navcontainer li
    {
        
    background-image:url(images/bullet.gif);
        
    background-repeat:no-repeat;
        
    background-positionleft center;
        
    text-indent:5px;

    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  3. #3
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers that looks miles better.

    However is it possible to move my background image further inside the list???? So there is say a 5px padding on its left side so it isn't right up at the edge of the list????

    At the moment it is like this

    > Link

    I would like it more like this
    > Link


    Cheers for teh help

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Sure, you can set those values in pixels or whatever unit you want : )

    Code:
    #navcontainer li
    {
        background: url(images/bullet.gif) 5px 50% no-repeat;
        text-indent:5px;
    }
    The first value (5px) is pixels from the left. The 50% is really a default, but IE (6 or both not sure) doesn't assume this like the specs say, so 50% is your vertical and sets it in the center.

    You can use whatever you want, but never mix the names (left, right, top, bottom, center) with numbers. Thus, you cannot use 5px center : )


    ---OR you can remove the text-indent: 5px that buildakicker added-- that was becuase usually you need to make some room for the image, otherwise the text will sit over the image. So, you could keep his code and just move the text closer by removing (or making smaller) the text indent : )

  5. #5
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant

    Thanks You both for your help


Bookmarks

Posting Permissions

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