3 Replies Latest reply on Apr 18, 2011 8:58 PM by mytaxsite.co.uk

    aligning a nar bar left to right

    jennifer0329

      Hi!

      I am trying to align my nav bar to be exactly the width of the header. I checked it on 3 other computers. It looks perfect on 2 of them, but on the 3rd the bars are miscued. How can I know that this is happening? 2 people said it was fine and the 3rd guy sent me the attached photo (BTW, red is now gone) I would like the 6 boxes to line up directly under the header...any help would be appreciated.....

      Here is the website:

      http://kobwebsecure.com/elitedesigner/

      IMG00048-20110418-1411.jpgThanks!

        • 1. Re: aligning a nar bar left to right
          mytaxsite.co.uk Level 6

          Do you mean something like this:

           

          <http://www.mytechnet.talktalk.net/menus02.htm>

           

          If so then have a look at the CSS section and the hml code.

           

          hth

          • 2. Re: aligning a nar bar left to right
            jennifer0329 Level 1

            How do I view the hml code?

            • 3. Re: aligning a nar bar left to right
              mytaxsite.co.uk Level 6
              <style type="text/css">
              * {
                                  margin: 0;
                                  padding: 0;
                                  border: 0;
              }
              body {
                                  font-size: 62.5%;
                                  background-color: white;
                                  text-align: center;
              }
              #wrapper {
                                  font-size: 1.2em;
                                  text-align: left;
                                  margin-left: auto;
                                  margin-right: auto;
                                  width: 800px;
              }
              #MenuBar1 {
                                  margin-left: auto;
                                  margin-right: auto;
                                  padding-left: 0;
                                  float: left;
                                  list-style-type: none;
                                  background: #333;
                                  width: 100%;
                                  text-align: center;
                                  overflow: hidden;
                                  position: relative;
              }
              #MenuBar1 ul {
                                  clear:left;
                                  float:left;
                                  list-style:none;
                                  margin:0;
                                  padding:0;
                                  position:relative;
                                  left:50%;
                                  text-align:center;
              }
              #MenuBar1 ul li {
                                  display:block;
                                  float:left;
                                  list-style:none;
                                  margin:0;
                                  padding:0;
                                  position:relative;
                                  right:50%;
              }
              #MenuBar1 ul li a {
                                  display:block;
                                  float: left;
                                  color: yellow;
                                  padding: .2em 1em;
                                  text-decoration: none;
                                  font-weight: 900;
                                  text-align: center;
                                  margin: auto auto;
              }
              </style>

               


               

               

               

              The html looks like this same as yours except that I have created a separate div called MenuBar1.  The fonts I have used can be ignored because this is just for test.

               


              <div id="wrapper"> <div id="MenuBar1"> <ul class="MenuBarHorizontal"> <li> <a href="index1.html"> Homepage </a> </li> <li> <a tabindex="-1" href="#"> Services </a> </li> <li> <a tabindex="-1" href="#"> Price Rates </a> </li> <li> <a tabindex="-1" href="#"> Staff </a> </li> <li> <a tabindex="-1" href="#"> Location </a> </li> <li> <a tabindex="-1" href="#"> Contact </a> </li> </ul> </div> </div>

               

              To view tha code, you need to use:  View >> Source

               

              in any browsers in Windows.

               

              hth