homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

This 32 message thread spans 2 pages: < < 32 ( 1 [2]     
problem with image based submenu
due to shape of buttons

Msg#: 4269943 posted 12:25 am on Feb 21, 2011 (gmt 0)

At the moment I'm working on a website with a horizontol image-based menu bar. It also has a submenu. In itself this all works well, but I run into something that is caused by the form of the buttons. They are basically a rectangle, that is afterwards bent in a slight arch-form. All very nice, but the submenu causes me headaches. Since the arch-form is placed on an rectangular transparent image the area functioning as an anchor is basicly too large. When the submenu-buttons are displayed in a vertical row, they only navigate well when there is a lot of space between the arches (the transparent images underneath the arches are neatly positioned below each other without space). Obviously moving the images in a better position, causes overlap and ill-functioning navigation.
I have given it a lot thought yet and tried things with padding and an "empty button" as a background-image using text as an anchor, but the background-image even didn't show up.
I don't know all ins and outs of css possibilities and wonder if there is any way I can get my submenu-buttons closer together in a way the navigation works well. Might a z-index be of any help, can the "area" function be combined with a list ...

This is how the images are used in the submenu:

<li><a href="produkten.html"><img src="images/button_produkten.png" alt="produkten"></a> <!-- hoofdmenu button 2 -->
<li><a href="herkomst.html"><img src="images/button_herkomst.png" alt="herkomst"></a></li> <!-- submenu button 2.1 -->
<li><a href="categorie.html"><img src="images/button_categorie.png" alt="categorie"></a></li> <!-- submenu butoon 2.2 -->

Maybe someone can help me with this "wavy-stuff" ...



Msg#: 4269943 posted 8:53 pm on Mar 9, 2011 (gmt 0)

Thanks, Leosghost, for your compliment. I'm staying for some time, maybe more interesting conversations will follow. If I don't succeed to overcome the "without-table-lay-out" item, I'll consider sticking to text-writing. :-)


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4269943 posted 10:24 pm on Mar 16, 2011 (gmt 0)

Hi Leosghost, hadn't missed your post, just took some time to digest.

Delighted you enjoyed the thread - one never knows how posts read to lurkers.

And thank you for the very positive comments.

But I keep thinking that you bothered to make the post. So a really big thanks back at you (and kudos too) - for taking the time to give someone else such a nice feeling.

This 32 message thread spans 2 pages: < < 32 ( 1 [2]
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