homepage Welcome to WebmasterWorld Guest from 54.204.182.118
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Image in Menu, Newbie Questions
How to use an image in a menu
yerkin

10+ Year Member



 
Msg#: 582 posted 6:28 am on Feb 1, 2003 (gmt 0)

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!

 

SuzyUK

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



 
Msg#: 582 posted 11:11 am on Feb 1, 2003 (gmt 0)

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

yerkin

10+ Year Member



 
Msg#: 582 posted 11:37 am on Feb 1, 2003 (gmt 0)

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....
:)

SuzyUK

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



 
Msg#: 582 posted 3:38 pm on Feb 2, 2003 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved