Horizontal Image links

  • 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 https://www.robotspacebrain.com

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

    <a href="https://www.robotspacebrain.com/category/robot/" id="yaprakr">&nbsp;</a>

<a href="https://www.robotspacebrain.com/category/space/" id="yapraks">&nbsp;</a>

<a href="https://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');
Viewing 3 replies - 1 through 3 (of 3 total)

  • 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

    Thread Starter cbeaman

    (@cbeaman)

    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

    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;

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Horizontal Image links’ is closed to new replies.