Treehouse: Grow your CSS skills. Land your dream job.

problem with aligning image links

  • # March 20, 2010 at 4:58 pm

    I’m having a small dilemma with some pictures. (that and I think I’m over thinking again).

    the way my site is set up, I have header with a bg pic, menu div under it, under that I have 2 divs side by side one for another menu and one for the main content, than the footer.

    my problem is that the menu div (under the header), I made the background pic to give the impression that a button is pressed in (the one for whatever page you’re on, so if you’re on the home page the home button looks pressed in, and the rest of the links are just words). I than made 6 on mouse over image links. now for the problem. I’m trying to align each of the on mouse over links, so they’re over the respective link, but I’m having issues with spacing and putting them side by side. I tried to put home in h1 and set the css h1 attribute position: relative, left 20px, than h2 position relative left 80px and so on, but h2 automatically gets put below h1.

    how can I put all these in a strait line and be able to control how many pixels it is from the left or other pic ? because all the pics are a different size, I cant just go with one size fits all, I need to be able to set them manually.

    any suggestions ? opinions ?
    thanks in advance for your help

    # March 20, 2010 at 6:58 pm

    If you can take a screen shot, give us a link, and tell us what browser you’re using it would really help us to help you.

    # March 20, 2010 at 7:38 pm


    I’m using a background like the above and am trying to make it so when you put your mouse over any of the other words a pic comes up over it that makes it look like the word is popping out so you can click it.

    sorry I’m bad at explaining things at times, and I hope that makes more sense

    # March 21, 2010 at 7:03 am

    Have you tried using CSS sprites? That way each image would have the right size indent.

    # March 21, 2010 at 4:33 pm

    -bangs head against desk-

    wish I ran into that earlier. almost all I’ve found in my searches is the splicing way so after about 20 tutorials that all said the same thing, and not finding a better way (sprites) I went with splicing. good news is that it’s only 6 menu buttons, so they can be re-done

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.