3 Replies Latest reply on Jan 8, 2009 9:50 AM by Newsgroup_User

    CSS nav question

    brian914 Level 1
      I am working on a nav and I can't seem to get the button to have a certain height.
      The nav is here, at the top of the page: http://www.wnzl.biz/dev_1

      The css I have is below. I tried to have a height attribute in the 'a' or 'li', but neither did it. Why is that? I am not sure what else to look at with this? I am trying to have the buttons fill the whole vertical space inside the topNav div. How can I do that.

      Thanks a lot for any help with this!!!



      The css I have looks like this:

      .topNav {
      float:left;
      width: 960px;
      margin: 7px 0 0 7px;
      background-image:url(../images/general/nav_bg_1.gif);
      }
      #mainnav {
      float: left;
      width: 640px;
      height: 45px;

      font-size: 15px;
      text-transform: uppercase;
      text-align: right;

      background-color:#232323;
      }
      #mainnav ul {

      }

      #mainnav li {
      display: inline;
      list-style: none;
      border-left: #5a5a5a 1px solid;
      }

      #mainnav a {
      text-decoration: none;
      padding: 0 15px;
      }

      #mainnav a:link, #mainnav a:visited {
      color: #fff;
      }

      #mainnav a:hover, #mainnav a:active,
      #uberlink a:link, #uberlink a:visited,
      #uberlink a:hover, #uberlink a:active {
      color: #0296fe;
      }
        • 1. Re: CSS nav question
          Level 7
          "brian914" <webforumsuser@macromedia.com> wrote in message
          news:gk5cc8$u5$1@forums.macromedia.com...
          >I am working on a nav and I can't seem to get the button to have a certain
          > height.
          > The nav is here, at the top of the page: http://www.wnzl.biz/dev_1
          >
          > The css I have is below. I tried to have a height attribute in the 'a' or
          > 'li', but neither did it. Why is that? I am not sure what else to look at
          > with
          > this? I am trying to have the buttons fill the whole vertical space inside
          > the
          > topNav div. How can I do that.
          >
          > Thanks a lot for any help with this!!!


          Try this:

          #mainnav {
          float: left;
          width: 640px;
          height: 40px; /* changed form 45px to 40px*/
          line-height: 40px; /* add this */
          font-size: 15px;
          text-transform: uppercase;
          text-align: right;
          background-color:#232323;
          }



          --
          Thierry | Adobe Community Expert | Articles and Tutorials ::
          http://www.TJKDesign.com/go/?0

          Spry Widgets | http://labs.adobe.com/technologies/spry/samples/ [click on
          "Widgets"]
          Spry Menu Bar samples |
          http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html
          --

          • 2. Re: CSS nav question
            Level 7
            Remove height: 45px; & text-align: right; from #mainnav (as shown below)


            #mainnav {
            float: left;
            width: 640px;
            font-size: 15px;
            text-transform: uppercase;
            background-color:#232323;
            }


            Change display: inline; to float: right; (as shown below)

            #mainnav li {
            float: right;
            list-style: none;
            border-left: #5a5a5a 1px solid;
            }

            Add display: block; and some top and bottom padding 15px (as shown below)

            #mainnav a {
            text-decoration: none;
            padding: 15px 15px;
            display: block;
            }


            Amend order of links as below (because the li's are floated right)

            <li><a href="#">CONTACT</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">HOME</a></li>




            brian914 wrote:
            > I am working on a nav and I can't seem to get the button to have a certain
            > height.
            > The nav is here, at the top of the page: http://www.wnzl.biz/dev_1
            >
            > The css I have is below. I tried to have a height attribute in the 'a' or
            > 'li', but neither did it. Why is that? I am not sure what else to look at with
            > this? I am trying to have the buttons fill the whole vertical space inside the
            > topNav div. How can I do that.
            >
            > Thanks a lot for any help with this!!!
            >
            >
            >
            > The css I have looks like this:
            >
            > .topNav {
            > float:left;
            > width: 960px;
            > margin: 7px 0 0 7px;
            > background-image:url(../images/general/nav_bg_1.gif);
            > }
            > #mainnav {
            > float: left;
            > width: 640px;
            > height: 45px;
            >
            > font-size: 15px;
            > text-transform: uppercase;
            > text-align: right;
            >
            > background-color:#232323;
            > }
            > #mainnav ul {
            >
            > }
            >
            > #mainnav li {
            > display: inline;
            > list-style: none;
            > border-left: #5a5a5a 1px solid;
            > }
            >
            > #mainnav a {
            > text-decoration: none;
            > padding: 0 15px;
            > }
            >
            > #mainnav a:link, #mainnav a:visited {
            > color: #fff;
            > }
            >
            > #mainnav a:hover, #mainnav a:active,
            > #uberlink a:link, #uberlink a:visited,
            > #uberlink a:hover, #uberlink a:active {
            > color: #0296fe;
            > }
            >
            >
            • 3. Re: CSS nav question
              Level 7
              Thierry wrote:

              > Try this:
              >
              > #mainnav {
              > float: left;
              > width: 640px;
              > height: 40px; /* changed form 45px to 40px*/
              > line-height: 40px; /* add this */
              > font-size: 15px;
              > text-transform: uppercase;
              > text-align: right;
              > background-color:#232323;
              > }


              Yup that would work, forgot the simple solution....duh!