#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    9
    Rep Power
    0

    Link Image from CSS


    Hello,

    So ive come across this really cool feature I would like to add to my website.

    http://tympanus.net/Tutorials/FixedNavigationTutorial/

    "Ive worked through every and had to of course make a few alterations to make it work properly, but it works.

    However when it comes to particular part im having a few issues.
    Here are the guide lines I have been using to set things up.

    http://tympanus.net/codrops/2009/11/...uery-tutorial/

    Here is what im having trouble with.

    Code:
    ul#navigation .home a{
        background-image: url(../images/home.png);
    }
    ul#navigation .about a      {
        background-image: url(../images/id_card.png);
    }
    ul#navigation .search a      {
        background-image: url(../images/search.png);
    }
    ul#navigation .podcasts a      {
        background-image: url(../images/ipod.png);
    }
    ul#navigation .rssfeed a   {
        background-image: url(../images/rss.png);
    }
    ul#navigation .photos a     {
        background-image: url(../images/camera.png);
    }
    ul#navigation .contact a    {
        background-image: url(../images/mail.png);
    }
    Im unsure how to use the url part properly. I was trying to use images directly from my site that look like
    Code:
    <img src="resources/Info_Icon_Red.png" width="15px">
    but nothing seems to work.

    After playing with it for a few hours, I was able to come up with
    Code:
    <li class="about"><a href="vanguard.php"> <img src="resources/TIER 3 BATTLECRUISERS2.jpg" height="20px" width="200px"</li></a>
    Which came from the HTML Structure.
    Code:
    <li class="home"><a title="Home"></a></li>
    However, in some browsers it looks fine, but other browsers, I get a huge space between each slide out navigation bar.
    Would this be due to making the slide out an image not being retrieved from a url ?
    Is there any way I might be able to fix this ?
    Last edited by Kravvitz; July 22nd, 2013 at 10:03 PM. Reason: made the URLs into links
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Which browsers are you having problems in?

    Please post a link to the page using your code.

    P.S. It's really best to avoid using spaces in names of files on websites.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    9
    Rep Power
    0
    Originally Posted by Kravvitz
    Which browsers are you having problems in?

    Please post a link to the page using your code.

    P.S. It's really best to avoid using spaces in names of files on websites.
    Matter has been solved.
    http://www.webdeveloper.com/forum/showthread.php?281253-Using-images-problem&p=1278513#post1278513

    The spacing was mentioned as well, I wont be using spacing in the files anymore.

    Thank you for your help.

IMN logo majestic logo threadwatch logo seochat tools logo