WordPress.org

1. cbeaman
   Member
   Posted 8 months 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 8 months 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 8 months 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 8 months 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;

Reply

You must log in to post.