SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question specifying the width of menu based on the text

    Hello,

    I was working on the following menu. Everything seems to be okay to me, except when you hover on/away from the first menu item, which is "Item 1", it seems to be resizing the size of the list slightly. I've looked at all the css statements, but can't find the cause of it. Strangely, it's only happening to the first menu item. Rest of them are just fine. Hope someone could show me what I'm missing.

    My second question is, right now the menu has a fixed width. How can I set the width of the menu so that it depends on the text size of the menu item.

    Thanks in advance for your time.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>gmw test</title>
    </head>
    
    <style media="all" title="Test Style" type="text/css">
    
    body
    {
    	background: #FFFFFF ;
    }
    
    #gmwContainer
    {
    	position: relative ;
    }
    
    #gmwMenuBar .gmwMenu
    {
    	padding: 3px 4px 2px 3px ;
    	margin: 0 ;
    	cursor: default ;
    }
    
    #gmwMenuBar
    {
    	padding: 3px 4px 2px 7px ;
    	background: #F5F3EB ;
    	border: 1px solid #999999 ;
    }
    
    #gmwMenuBar .gmwMenu:hover
    {
    	background: #A5C3EC url(images/mainmenu-officexp.png) repeat-x ;
    	border: 1px solid #A5C3EC ;
    	padding: 2px 3px 1px 2px ;
    }
    
    #gmwMenuBar .gmwMenu:active, #selectedMenu
    {
    	background: #A5C3EC url(images/mainmenu-officexp.png) repeat-x ;
    	border: 1px solid #0066CC /*#A5C3EC*/ ;
    	border-bottom: 2px solid white ;
    }
    
    .gmwMenuHolder
    {
    	list-style-type: none ;
    	margin: -1px 0 0 8px ;
    	padding: 0 ;
    	border: 1px solid #0066CC ;
    	background: url(images/menu-officexp.png) repeat-y left ;
    	width: 200px ;
    }
    
    .gmwMenuItem
    {
    	margin: 2px ;
    	padding: 3px 0 ;
    	color: black ;
    	cursor: default ;
    
    	font-family: Arial, Helvetica, sans-serif ;
    	font-size: 9pt ;
    	text-decoration: none ;
    	cursor: default ;
    
    }
    
    .gmwMenuItem:hover
    {
    	margin: 1px ;
    	padding: 2px 0 ;
    	border: 1px solid #3169C6 ;
    	background-color: #FFF0C0 ;
    }
    
    .gmwMenuItem span
    {
    	padding-left: 30px !important;
    }
    
    #gmwMenuPanVrt span
    {
    	background: url(images/panVrt.gif) left center no-repeat ;
    }
    
    #gmwMenuPanHrz span
    {
    	background: url(images/panHrz.gif) left center no-repeat ;
    }
    
    
    </style>
    
    <body>
    
    <h1>Menu Design Test</h1>
    
    <div id="gmwContainer">
    <div id="gmwMenuBar">
    	<span id="selectedMenu" class="gmwMenu">File</span><span class="gmwMenu">Edit</span><span class="gmwMenu">View</span>
    </div>
    <ul class="gmwMenuHolder">
    	<li id="gmwMenuPanVrt" class="gmwMenuItem"><span title="Title of this item">Item 1</span></li>
    	<li id="gmwMenuPanHrz" class="gmwMenuItem"><span title="Title of this item">Item 2: longer</span></li>
    	<li id="gmwMenuZoom" class="gmwMenuItem"><span title="Title of this item">aother item</span></li>
    </ul>
    </div>
    
    </body>
    </html>
    With Regards
    Pman
    http://www.pmansLab.com

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adding border: 1px solid #FFF to .gmwMenuItem should fix it.

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    I would mark it up a little differently too,

    Code:
    <div id="menu">
      <ul class="bar">
        <li class="selected">File</li>
        <li>Edit</li>
        <li>View</li>
      </ul>
      <ul>
        <li id="gmwMenuPanVrt"><a title="Title of this item">Item 1</a></li>
        <li id="gmwMenuPanHrz"><a title="Title of this item">Item 2: longer</a></li>
        <li id="gmwMenuZoom"><a title="Title of this item">aother item</a></li>
      </ul>
    </div>
    You can make better use of decendant selectors and save some space in your markup.


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
  •