SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,618
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    text to tabs in nav

    Im trying to make the text links in the navbar,
    http://www.urturt.com/
    to be images, what part of the css to I need to modify for this to happen, so far I tried

    div.nav {
    height: 45px;
    }
    .header .nav li a{
    text-decoration: none;
    font-size:20px;
    font-weight:300;
    text-indent:-999px
    }

    .nav li.page-item-896 a {
    background-image:url(images/nav_shop.png);
    width:100px;
    }
    "Oh, and Jenkins--apparently your mother died this morning."

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Honestly, I'd leave it as it is. Text is much more accessible that images.

    Anyhow, if you must have images, you can just put the images in the HTML. BUT ... that's not good on lots of levels, as it means the fallback text won't show if images are off, and you won't have hover effects etc.

    The best method currently is to leave the text where it is (so that it appears if images are off) and place the images over the top of the the text, as shown here:

    http://www.pmob.co.uk/temp/headerreplacement3.htm
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,618
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    thanks
    "Oh, and Jenkins--apparently your mother died this morning."


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
  •