View Full Version : Need help with linking using CSS images and <dt>, images aren't switching...

Jun 30th, 2010, 07:08 PM
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:
<div id="main-nav">

<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>


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/creating-a-css-layout-from-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!


Uploaded it to my webserver.

Thanks again everyone!!!!

Jun 30th, 2010, 07:21 PM
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.


Jun 30th, 2010, 07:23 PM
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!

Jun 30th, 2010, 08:36 PM
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:

#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...??

Jun 30th, 2010, 08:40 PM
The images are actually doing what you've told them to do. From your css:

#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.

Jul 1st, 2010, 02:00 AM
the tutorial is horrible then lol. Does anyone know where I can go to achieve what I'm trying to do?

Jul 1st, 2010, 02:05 AM
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.

Jul 1st, 2010, 02:18 AM
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....

Jul 1st, 2010, 03:53 AM
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.


Jul 1st, 2010, 04:10 AM
I still see the same css online as before.

Jul 1st, 2010, 04:16 AM
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.

Jul 1st, 2010, 12:17 PM
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!

Jul 1st, 2010, 05:11 PM
here's a quick bit of css to do what you need

border:1px solid #000;
background:#fff url(images/ragged-right.gif) repeat-y left top;

background:transparent url(images/ragged-left.gif) repeat-y right top;
padding:1em 0;
.outerx p{padding:0 20px;margin:0 0 1em 0}

and here's the page I got it from.