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 -->
<ul>
<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 -->
</ul>
Maybe someone can help me with this "wavy-stuff" ...
