Member Avatar for Reliable

Hello,

Yes, I've googled it, but want to check for confirmation (mire if a trust issue). If I make colored tabs for my navigation elements that are at least as large as the largest element if not larger and set them as background images for a:hover will the image put itself into the smaller space so I have nice looking tab effect? For example, the biggest link on my nav bar my be "Services". If i may a tab image at least that big if not bigger w, when the user hovers over "Home" will the image still fit nicely in the background giving the desired effect?

Thanks for your time.

  • 2 Contributors
  • 4 Replies
  • 99 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by Reliable
Member Avatar for Tsakaki

I'm not sure if I'm understanding you're question properly, but it sounds like you want to use a single background image made to fit the largest tab you will have and apply it to ALL the tabs regardless of size?

If this is the case, I have a few questions.

1) Is the background image just a single solid color? Or a solid color with a border/outline? If so, you could easily accomplish this with CSS properties as opposed to using background images.

2) If the image is more complex than that, what are you including? Rounded corners, gradients, etc? If so, there are many ways of achieving this that require only slices of images as opposed to the whole solid image.

I'm not sure exactly what you're trying to accomplish, if you could clarify your question, I'll do my best to help you out!

Member Avatar for Reliable

Thank you for your help, and, you'r right. I should have been more clear. I didn't think about that. I have already accomplished one of the goals you mentioned with CSS whereby the background changes in a square shape. I was looking for the rounded corner look and was hoping to make a "one size fits all" image when it came to a solid color.

Member Avatar for Tsakaki

http://www.daniweb.com/forums/thread334507.html

The above is a link to another thread discussing rounded corners. Multiple methods have been posted and elaborated on, depending what browsers/methods you want. Including css3, using images and javascript.

Member Avatar for Reliable

Thanks. I'll check out the article behind the link. I won't be using CSS3, though until it becomes more supported in browsers.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.