Sharing is helping.

We offer you this space to share your knowledge about Magento and learn from our experienced customers.

    Home Forums "How do I" questions Need help with my css file

    This topic contains 1 reply, has 1 voice, and was last updated by  Meancebab 4 years, 2 months ago.

    Viewing 2 posts - 1 through 2 (of 2 total)
    • Author
    • #4964



      I am having a real issue with my navigation bar and the spacing between my navigation bar and the top of my helloslide area. Any help would be appreciated. I just can’t get this to work – the menu items are touching the left margin.

      Here is my code that I put for the navbar in the header.phtml file:

      <div class=”menu-header”>
      <ul id=”nav”>
      <li id=”nav”> 

      <li id=”nav”>Button 1
      <li id=”nav”>Button 2
      <li id=”nav”>Button 3
      <li id=”nav”>Button 4


      Here is my nav code in the css:

      #navigation { background: url(../images/background/menu_bg2.gif) no-repeat scroll top left; position:absolute; bottom:0px; left:0px; width: 960px; top: 100px; height: 45px; }

      .nav-container { position:relative; float:left; padding: 11px 0 0 11px; height: 45px; }

      #nav { float:left; height: 44px; font-size:14px; height: 45px; }

      /* ALL Levels */ /* Style consistent throughout all nav levels */
      #nav li { position:relative; text-align:center; z-index:999; }
      #nav li.over { z-index:999; }
      #nav a, #nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
      #nav span { display:block; cursor:pointer; white-space:nowrap; }
      #nav li ul span { white-space:normal; }

      /* 0 Level */

      #nav li { margin-left: 30px; margin-right:3px; }

      #nav a { float:left; color:#fff; text-shadow: 0px 1px #3f3f3f; line-height: 33px; }

      #nav li a { color: white; font-variant: small-caps; font-size: 12px; font-family: Arial; font-weight:semi-bold; padding-left: 5px; background: url(../images/background/menu_tab2.gif) no-repeat top left; width: 125px; margin-top: -58px; z-order: 999; }

      #nav li a span { padding-right: 15px; background: url(../images/background/menu_tab2.gif) no-repeat top right; }
      #nav li.over a { background: url(../images/background/menu_tab.png) no-repeat 0px -46px; }
      #nav li.over a span { background: url(../images/background/menu_tab2.gif) no-repeat 100% -46px; }

      #nav a:hover, #nav li a:hover { color:#FFF; text-shadow: 0px 1px #fff; }
      #nav a:hover { line-height: 43px; }

      #nav li a:hover { color: orange !important; text-shadow: 0px 1px #000; background-position: 0px -46px; }

      #nav li a:hover span { background-position: 100% -46px; }

      #nav a { text-shadow: 0px 1px #fff; color: #444 !important; text-shadow: 0px 1px #fff !important; background: url(../images/background/menu_tab2.gif) no-repeat 0px -92px; }

      #nav a span { background-position: 100% -92px; }

      #nav a:hover { color: #444 !important; text-shadow: 0px 1px #fff !important; }



      World 4 Power Review: Is World For Power The Fraud Very 0bviouse. solar The homemade breeze power power generator or breeze generator is utilized to create renewable power for appliances for the home for the actual house. earth4energy review The whole planet 4 Power program contains over an hour or so of additional super major quality online video with toon showing you may exactly just how solar do the job and it is importance before.
      Earth4Energy (or Planet four Energy) is actually one of the actual latest as well as top offering products and services on the market today. this way

    Viewing 2 posts - 1 through 2 (of 2 total)
    Reply To: Need help with my css file
    Your information:

    <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">