Loading ...
Sorry, an error occurred while loading the content.

Menu Item Indentation

Expand Messages
  • Ricardo O Maciel
    How can I control the indentation of the menu items (labels) to set them closer to the left edge of the menu background? I have tried a number of CSS padding
    Message 1 of 1 , Jul 27, 2009
    • 0 Attachment
      How can I control the indentation of the menu items (labels)
      to set them closer to the left edge of the menu background?

      I have tried a number of CSS padding and other settings on .yuimenu, .yuimenuitem and .yuimenuitemlabel without success. The left indentation remains unchanged.

      Here is my code:

      CSS:
      ----

      body
      {
      background-color: #00FFFF;
      }

      #custom-doc
      {
      margin: auto;
      text-align: left; /* leave unchanged */
      width: 73em; /* non-IE */
      *width:71.3em; /* IE */
      min-width:950px;/* optional but recommended */
      }

      #H
      {
      font-family: Arial, Helvetica, sans-serif;
      text-decoration: overline;
      font-weight: bold;
      font-size: x-large;
      font-variant: small-caps;
      text-transform: capitalize;
      color: #558532;
      text-align: center;
      margin: 0 0 1em 0;
      padding: .25em .5em;
      }

      div.yui-b p
      {
      margin: 0 0 .5em 0;
      color: #999;
      }

      div.yui-b p strong
      {
      font-weight: bold;
      color: #000;
      }

      div.yui-b p em
      {
      color: #000;
      }

      #basicmenu
      {
      position: static;
      width: 80px;
      margin-left: 15px;
      }


      /*
      For IE 6: trigger "haslayout" for the anchor elements in the root Menu by
      setting the "zoom" property to 1. This ensures that the selected state of
      MenuItems doesn't get dropped when the user mouses off of the text node of
      the anchor element that represents a MenuItem's text label.
      */

      #basicmenu .yuimenuitemlabel
      {
      _zoom: 1;
      }

      #basicmenu .yuimenu .yuimenuitemlabel
      {
      _zoom: normal;
      }

      /*Menu inner items padding*/
      div.yuimenu li.yuimenuitem
      {
      padding: 0px 6px;
      }

      HTML/js
      -------

      <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="m1._Default" %>

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head runat="server">
      <title>Marlucia Maciel - Arquiteta</title>
      <meta name="description" content="Site da arquiteta Marlucia Maciel" />
      <meta name="keywords" content="arquiteta, marlucia, brasília, brasilia, projeto, arquitetura, df, consultoria, gdf, "administração regional", aprovação, residência, casa, loja, prédio" />
      <meta name="author" content="Marlucia Maciel" />
      <meta name="copyright" content="Copyright 2009 Marlucia Maciel - Todos os direitos reservados" />
      <meta name="robots" content="all" />
      <meta name="revisit-after" content="60 days" />
      <meta name="rating" content="safe for kids" />
      <!-- Combo-handled YUI CSS files: -->
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/reset-fonts-grids/reset-fonts-grids.css&2.7.0/build/carousel/assets/skins/sam/carousel.css&2.7.0/build/menu/assets/skins/sam/menu.css" />
      <link rel="stylesheet" type="text/css" href="CSS/Stylesheet1.css" />
      <!-- Combo-handled YUI JS files: -->

      <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/element/element-min.js&2.7.0/build/carousel/carousel-min.js&2.7.0/build/container/container_core-min.js&2.7.0/build/menu/menu-min.js"></script>

      <!-- Page-specific script -->

      <script type="text/javascript">

      /*
      Initialize and render the Menu when its elements are ready
      to be scripted.
      */

      YAHOO.util.Event.onContentReady("basicmenu", function() {

      /*
      Instantiate a Menu: The first argument passed to the
      constructor is the id of the element in the page
      representing the Menu; the second is an object literal
      of configuration properties.
      */

      var oMenu = new YAHOO.widget.Menu("basicmenu", {
      position: "static",
      hidedelay: 750,
      lazyload: true
      });

      /*
      Call the "render" method with no arguments since the
      markup for this Menu instance is already exists in the page.
      */

      oMenu.render();

      });

      </script>

      </head>
      <body class="yui-skin-sam">
      <form id="form1" runat="server">
      <div id="custom-doc" class="yui-t1">
      <!-- change class to change preset -->
      <div id="hd">
      <h1 id="H">
      <br />
      Marlucia Maciel: Arquiteta</h1>
      </div>
      <div id="bd">
      <div id="yui-main">
      <div class="yui-b">
      carrossel
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      </div>
      </div>
      <div class="yui-b">
      <div id="basicmenu" class="yuimenu">
      <div class="bd">
      <ul class="first-of-type">
      <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#Home">Home </a></li>
      <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#Home">Bio </a></li>
      <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#Home">Portfolio </a></li>
      <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#Home">Serviços </a></li>
      <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#Home">Contato </a></li>
      <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#Home">Links </a>
      <div id="communication" class="yuimenu">
      <div class="bd">
      <ul>
      <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#Home">Materiais </a></li>
      <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#Home">Aprovação GDF </a>
      </li>
      <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#Home">Custos </a></li>
      </ul>
      </div>
      </div>
      </li>
      </ul>
      </div>
      </div>
      </div>
      </div>
      <div id="ft">
      copyright
      </div>
      </div>
      </form>
      </body>
      </html>
    Your message has been successfully submitted and would be delivered to recipients shortly.