WordPress.org

Ready to get started?Download WordPress

Forums

Horizontal Image links (4 posts)

  1. cbeaman
    Member
    Posted 2 years ago #

    Hi,

    I am trying to make horizontal image link in my navigation menu. I'm not very good with WordPress, so I was hoping someone may be able to give me an easy fix...

    My website is http://www.robotspacebrain.com

    I have a text widget in the top navigation that has this:

    <a href="http://www.robotspacebrain.com/category/robot/" id="yaprakr">&nbsp;</a>
    
    <a href="http://www.robotspacebrain.com/category/space/" id="yapraks">&nbsp;</a>
    
    <a href="http://www.robotspacebrain.com/category/brain/" id="yaprakb">&nbsp;</a>

    and my css style code is this:

    a#yaprakr {
        width: 100px;
        height: 100px;
        background-image: url('bicon160.png');
        display: block;
        text-decoration: none;
        margin-right: 150px;
    }
    
    a#yaprakr:hover {
        background-image: url('ricon160.png');
    }
    
    a#yapraks {
        width: 100px;
        height: 100px;
        background-image: url('bicon160.png');
        display: block;
        text-decoration: none;
        margin-left: 150px;
    }
    
    a#yapraks:hover {
        background-image: url('ricon160.png');
    }
    
    a#yaprakb {
        width: 100px;
        height: 100px;
        background-image: url('bicon160.png');
        display: block;
        text-decoration: none;
        margin-left: 150px;
    }
    
    a#yaprakb:hover {
        background-image: url('ricon160.png');
  2. SpankMarvin
    Member
    Posted 2 years ago #

    How do you want these to display? Horizontally? In that case, you shouldn't be adding the block value to the display attribute. Try inline-block instead and remove the large margin.

    Also, you should be adding classes to these links and assigning common attributes to the class. E.g. the height, width, display and margin values could easily be encompassed by a class rather than re-inventing the wheel each time with unique id values.

    Let me know if I've misunderstood what you are trying to achieve.

    John

  3. cbeaman
    Member
    Posted 2 years ago #

    Hey thanks John!

    that's perfect, easy fix...! Yea, I should probably learn how to use the class thing, but I'm not sure how to do that at the moment. If it works though, I'm happy!

    thanks again,
    Charles

  4. SpankMarvin
    Member
    Posted 2 years ago #

    You're welcome. A note, though: IE7 and below won't recognize the inline-block property. If you have a dedicated IE7 stylesheet, give the elements that have inline-block the following in that stylesheet:

    display: inline;
    zoom: 1;

Topic Closed

This topic has been closed to new replies.

About this Topic