Welcome to WebmasterWorld Guest from 54.226.143.14

Forum Moderators: not2easy

Message Too Old, No Replies

Image in Menu, Newbie Questions

How to use an image in a menu

   
6:28 am on Feb 1, 2003 (gmt 0)

10+ Year Member



Hi!
I'm new on css, and now i'm traying to making a menu with buttons with css.

My problem is that it don't look so fine in opera and nn, but in ie it displays the way i want it.

How i have made the menu?

<a href="exampellink.asp" title="Link"><img src="images/meny_left.gif" alt="" width="7" height="15" />Link<img src="images/meny_right.gif" alt="" width="7" height="15" /></a>

And the css:


div.mainmenu a{
color:white;
font-size:12px;
vertical-align:bottom;
text-decoration: none;
background-image: url(meny_center.gif);

}
div.mainmenu a.active{
background-color:#A0C8DF;
}

div.mainmenu a:hover, div.mainmenu a.active:hover{
background-color:#DEE7EC;

}

So i have a tranparent .gif on each side of the link text, and a tranparent .gif as background.
The problem is that in opera and nn the background-image and the images don't displays correctly, or the way i want it.

How can i make the box around the link text to be the same size as the images, so that the background image ( same size as the images) displays correctly.

left.gif bg.gif right.gif
____
[ ____ ]

Sorry for my bad english, and i hope you understand what i mean!

11:11 am on Feb 1, 2003 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hi Yerkin, Welcome to Webmasterworld [webmasterworld.com]

Is your menu meant to be horizontal (across the page) or vertical (up/down the page)

the reason I ask is that if it is vertical you can use display: block for your links then give them width and height attributes so there would be possibly no need to use transparent gifs at all.. you could use padding left and right to make the space at either side.

there is a good article on formatting menu links at alistapart [alistapart.com] there is a full example at the bottom of the page.

If this is not what you're after then post again

I think possibly that the line-height attribute would answer your original question, but I'm not sure about the support for it as I've not used it

Suzy

11:37 am on Feb 1, 2003 (gmt 0)

10+ Year Member



Hi SuzyUk and thanks!

My menu is meant to be horizontal.

The gif's is not all transparent, it's the left and right side of the button.
In the middle, where the text is, the background is the up, and downside of the button.
Hmm, hard to explain this, but i hope you got the picture.

In this way, the "buttons" adjust to the width of the text.

But the problem is that in opera and nnn, the middle part of the "button", don't displays correctly, or the way i want it....
:)

3:38 pm on Feb 2, 2003 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hi Yerkin

Opera definitely doesn't support background images on Pseudo Classes, in the case the link class a

NN can be patchy..

but borders will work so try just having the middle bit change on hover with the top and bottom borders matching in to your gifs at the sides...

Suzy

 

Featured Threads

Hot Threads This Week

Hot Threads This Month