Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: How to insert this Icon within navigation

Bottom of Page

1 to 5 of 5

  1.  
    • CommentAuthormumford
    • CommentTimeFeb 7th 2006 edited
     permalink
    Hi

    I am trying to achieve this http://www.boostnowbreaks.co.uk/test/navigation.gif

    What I have at the moment is this http://www.boostnowbreaks.co.uk/test/navigation.htm

    I have tried everything but I cannot get the home icon to be inline with the navigation as the gif example, could someone please throw some light on how i can achieve this please!!

    Thank You

    moved to the right category by droppyale
  2.  permalink
    Add the home link in an li just like the other links...

    <ul id="nav">
    <li><a id="home" href="#">Home</a></li>
    <li><a href="#">Racing</a></li>
    <li><a href="#">Hospitality</a> ...


    Then style the anchor to use the image of the home icon as a background image and hide the text:

    a#home {
    background: url(home-icon.gif) no-repeat;
    display: block;
    float: left;
    height: 40px;
    width: 40px;
    text-indent: -5000em;
    }
  3.  permalink
    One thing you should probably resolve before continuing is the problem that your navigation design relies upon li:hover, which is not supported in Internet Explorer. You could apply the "Whatever:hover" fix, or better, you could redesign your navigation bar to rely on a:hover's which are supported in IE.

    To include the image in the nave bar I would do something along those very lines adjustafresh mentioned above.
    • CommentAuthorNick Presta
    • CommentTimeFeb 8th 2006 edited
     permalink
    list-style-image is the correct way to apply a list icon via CSS.

    However, you may have to rely on the incorrect, background property to give each list an image.
    • CommentAuthormumford
    • CommentTimeFeb 9th 2006
     permalink
    Thanks for the comments

    adjustafresh - that got the icon within the nav but if you take a look now the navigation does not fit and the last item drops below the others.

    I have adjusted the widths but it becomes a mess.

    I know we are fairly close to cracking this, so your help in this would be greatly appreciated!

1 to 5 of 5

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page