SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center aligned horizontal menu problem

    Hi,

    I am working on the following menu and when I enter a long string for a menu link, that link goes above other links.

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8" />
    	<title>Test</title>
    	<style type="text/css">
    	a { text-decoration: none; font-family: Verdana }
    	#menu { padding: 10px 0 0 0; text-align: center }
    	#menu li { display: inline }
    	#menu a { display: inline-block; width: 90px; height: 75px; padding-top: 10px; background: #780000; color: #fff; font-size: 13px }
    	</style>
    </head>
    <body>
    	<ul id="menu">
    		<li><a href=""><img src="image.jpg" /><br /><span>Places To See Around</span></a></li>
    		<li><a href=""><img src="image.jpg" /><br /><span>About</span></a></li>
    		<li><a href=""><img src="image.jpg" /><br /><span>Hours</span></a></li>
    		<li><a href=""><img src="image.jpg" /><br /><span>Places To See Around</span></a></li>
    		<li><a href=""><img src="image.jpg" /><br /><span>Contact</span></a></li>
    		<li><a href=""><img src="image.jpg" /><br /><span>Support</span></a></li>
    	</ul>
    </body>
    </html>
    image.jpg is a 36x36 dummy image. Do you have any idea what's wrong with this menu?

    Thanks for any ideas.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Try adding vertical-align to the <a>s:

    Code:
    #menu a {
    display: inline-block;
    width: 90px;
    height: 75px;
    padding-top: 10px;
    background: #780000;
    color: white;
    font-size: 13px;
    vertical-align: top;
    }

  3. #3
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much Ralph, that worked like a charm.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •