www.webdeveloper.com
Results 1 to 9 of 9

Thread: Using images problem

  1. #1
    Join Date
    Jun 2013
    Posts
    13

    Question Using images problem

    So I have added this really cool Slide Out Navagation thing on my website, but I cant seem to get the image part of it working in the CSS.

    This is the website I used to implement the Slide Out:
    http://tympanus.net/codrops/2009/11/...uery-tutorial/
    This is what it is suppose to look like:
    http://tympanus.net/Tutorials/FixedNavigationTutorial/

    However, when I come to this part:
    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);
    }
    I cant figure out how to add the images I want.
    On my website when I want to use a picture from the file manager on my website it looks like this.
    Code:
    <img src="resources/Info_Icon_Red.png" width="15px">
    Any ideas as to how to load my images ?

    Thank you for your time.
    IG

  2. #2
    Join Date
    Jun 2013
    Posts
    13
    Now that I have had more of a chance to play with it, I have come up with this.

    Code:
    <li class="about"><a href="vanguard.php"> <img src="resources/TIER 3 BATTLECRUISERS2.jpg" height="20px" width="200px"</li></a>
    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 ?

  3. #3
    Join Date
    Jul 2013
    Posts
    66
    Why won't you integrate the picture the way the tutorial tells you to? I don't see a reason why you can't just simply use

    Code:
    ul#navigation .about a      {
        background-image: url(resources/TIER%203%20BATTLECRUISERS2.jpg);
    }
    However, I strongly suggest renaming that file so that it doesn't contain spaces. Spaces in file paths or file names is always a bad idea, even more so on the web.

  4. #4
    Join Date
    Jul 2013
    Posts
    4
    perhaps is it caused by closing the list before the link "</li></a>"

  5. #5
    Join Date
    Jun 2013
    Posts
    13
    Quote Originally Posted by Airblader View Post
    Why won't you integrate the picture the way the tutorial tells you to? I don't see a reason why you can't just simply use

    Code:
    ul#navigation .about a      {
        background-image: url(resources/TIER%203%20BATTLECRUISERS2.jpg);
    }
    However, I strongly suggest renaming that file so that it doesn't contain spaces. Spaces in file paths or file names is always a bad idea, even more so on the web.
    Briliant, not sure why I didnt try that.
    I think I tried pretty close to everything else.

  6. #6
    Join Date
    Jun 2013
    Posts
    13
    Quote Originally Posted by dxter View Post
    perhaps is it caused by closing the list before the link "</li></a>"
    Thus far it does not effect anything.
    I do however need the </li> I can remove the </a> with no effect.

  7. #7
    Join Date
    Jul 2013
    Posts
    66
    You should always close every tag, otherwise you have nothing short of invalid HTML. And, of course, you should close them in the correct order, whether or not it fixes the issue. Sort of sad that you didn't so much as mention my post.

  8. #8
    Join Date
    Jul 2013
    Posts
    66
    Oops. I totally didn't see your other post. Excuse me! Did that actually fix it? I'm not sure now since you said it doesn't affect anything to the other post.

  9. #9
    Join Date
    Jun 2013
    Posts
    13
    Quote Originally Posted by Airblader View Post
    Oops. I totally didn't see your other post. Excuse me! Did that actually fix it? I'm not sure now since you said it doesn't affect anything to the other post.
    Yes sir, my apologies.
    It work's masterfully.
    I've been sitting on this one for a few hours now and tried pretty close to everything.
    I'm very very new to all this stuff, most of which I can figure out but this one tossed me the run around.

    I'm greatly thankful you responded to my post.
    This is only the second forum I brought this question to, and you nailed it.

    Thank you very much for your time and service.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles