Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Need help with linking using CSS images and <dt>, images aren't switching...

    Hello everyone, I followed this really old tutorial on how to make a full CSS site and everything turned out kinda nice except my links aren't working and I can't figure out why.

    I have three images for the heading navigation based on the page's name. Example: Contact Us - contact.gif (when its idle), contact_hover.gif, and contact_selected.gif.

    The images aren't switching when I click them and also the navigation images are suppose to bleed into the banner images in which I have a separate banner image for each of the pages. If you need more explanation then that I will be happy to elaborate more but here is the code to say it all:

    The Main Div with the links in them:
    Code:
    	<div id="main-nav">
    	
    		<dl>
    	        <dt id="home"><a href="#">Home</a></dt>
    	        <dt id="about"><a href="#">About Me</a></dt>
    	        <dt id="contact"><a href="#">Contact</a></dt>
    	        <dt id="resume"><a href="#">Resume</a></dt>
    			<dt id="social"><a href="#">Social</a></dt>
    			<dt id="media"><a href="#">Media</a></dt>
    	    </dl>
    	
    	</div>
    And here is the CSS sheet code related to the links and a quick link to the tutorial I followed: http://www.subcide.com/articles/crea...m-scratch/P12/

    I will actually attach the very small css file and index.html to make this so much more simple.

    By the way, thank you to everyone who is willing to help me out and who have helped me out in the past, it is greatly appreciated!

    http://www.whatwereplaying.com/test

    Uploaded it to my webserver.

    Thanks again everyone!!!!
    Last edited by talimore1; 06-30-2010 at 07:23 PM.

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    the web link only gives the option to save or open the file with something. I guess you need to give us a web link.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry about that, I updated the link to the uploaded site.

    EDIT: It's 3 am here though so I'm going to go to sleep now, hopefully there is a response by morning.

    Thanks again everyone!

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Just had a quick look, and unless I've missed something, your alternate state gifs don't appear in your css anywhere - I cannot see contact_hover.gif for example.

    Your css does include:

    Code:
    #main-nav dt a:hover {
    	background-position: 0 -50px;
    }
    which implies you are using css sprite images - but the background image on your menu are not sprites.

    Or have I totally misunderstood...??

  • #5
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    The images are actually doing what you've told them to do. From your css:
    Code:
    #main-nav dt a:hover {
    	background-position: 0 -50px;
    }
    
    #main-nav dt#home,
    #main-nav dt#home a { width: 122px; background-image: url(../images/nav/home.gif); }
    dt#home and the dt#home anchor have the same background image. When hovered, the -50px shoots the anchor's background off the screen leaving the dt's background still visible. Since it's the same image, there's no obvious change.
    Are you a Help Vampire?

  • #6
    New Coder
    Join Date
    Oct 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the tutorial is horrible then lol. Does anyone know where I can go to achieve what I'm trying to do?

  • #7
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    That depends on if you're intention is to use sprites, as SB65 mentioned, or just dumb images. If the latter, all you need to do to start is to split out the dt and anchor css for those and change the background images on one.
    Are you a Help Vampire?

  • #8
    New Coder
    Join Date
    Oct 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tomws View Post
    That depends on if you're intention is to use sprites, as SB65 mentioned, or just dumb images. If the latter, all you need to do to start is to split out the dt and anchor css for those and change the background images on one.
    I reuploaded the site and got the hover images working but not the banner image... What I did was make the entire navigation image into one image rather then three. So when it moves the image up 50px it goes to the hover portion of the image and when you move 100px up it goes to the clicked part of the image.

    But the banner still isnt changing and neither is the navigation when I actually click something

    EDIT: Thats upsetting it appears to be working in IE but not FireFox.... but it works locally if I use firefox.... evern more interesting....
    Last edited by talimore1; 07-01-2010 at 02:28 AM.

  • #9
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    check you have cleared your cache and that you have also uploaded the new css file.

    you may still be seeing the old css file??

    also, I haven;t tested this but, the active state image may not be showing because your links don't take you to the next page.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #10
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    I still see the same css online as before.
    Are you a Help Vampire?

  • #11
    New Coder
    Join Date
    Oct 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the css wasnt the problem it was the images, I needed to make them longer. and i made copies of the index and renamed them to the appropriate linked names but how do I make it so when you click a link the banner changes with that link, I'm still not getting the desired result.

  • #12
    New Coder
    Join Date
    Oct 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I got the navigation working but now I have one last question to ask. This site is a remake of an HTML site that I made with very little css but the last site had a table layout and in the table it had a left and right border of a transparent gif that I want to reprogram in CSS to work on this site. Here is a link to the OLD site that will look a lot like this one and it shows the left and right borders Im talking about. Its the small black 3D effect that I'm going for.

    Link: www.whatwereplaying.com/test2

    Thanks in advance for any help given and thanks so much for helping me work out the problems I have already been having, this community is clear cut the best!

  • #13
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    here's a quick bit of css to do what you need

    Code:
    .outerx{
    width:50%;
    margin-left:25%;
    border:1px solid #000;
    background:#fff url(images/ragged-right.gif) repeat-y left top;
    }
    
    .innerx{
    background:transparent url(images/ragged-left.gif) repeat-y right top;
    width:100%;
    padding:1em 0;
    }
    .outerx p{padding:0 20px;margin:0 0 1em 0}
    and here's the page I got it from.

    http://www.pmob.co.uk/pob/side-borders.htm

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

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