[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


Verticle image menu with horizontally overlapping mouseover points

Posted on 2008-11-06
Medium Priority
Last Modified: 2012-05-05
I have been handed a design to code which has stumped me a bit: the main menu is a verticle list of words, but the eords have very little space between them so the tops of T's and the tails of Y's ( for example) are on the same horizontal plane as the button above (or below).  

Look forward to comments,
I have to cater for mouseover states and active state.  My initial thoughts are to implement in flash - but can this be done successfully with images and javascript/ map areas?
Question by:Treder
LVL 11

Expert Comment

ID: 22901358
Yea, it can be done with images and map areas.
Is there a reason there is so little space? It woudl seem that the simple solution would be to give that couple of extra pixels space that would be needed to avoit the problem alltogether.
LVL 44

Accepted Solution

scrathcyboy earned 2000 total points
ID: 22901446
You don't need either images or mapareas for mouse over.  If it is just words, then use this


UL  {margin:0px; padding:0px; }
LI  {margin:0px; padding:0px; }


  <LI>first menu item</LI>
  <LI>second menu item</LI>

that should eliminate most of the spacing between the lines.

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses
Course of the Month19 days, 3 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question