CODEWITHSUNDEEP
htmlcss
DJGB
DJGB

Reputation: 21

Why isnt my menu working?

I have a menu as shown in this jsfiddle

Can anyone tell me why its bugged out. It had worked yesterday properly. It is supposed to be all on one line and I cant figure out why the last button is cut off.

I have already tried width:100% and it wasn't working so the figure that is for width was just me messing around trying different things.

My code is below as well

body {
  margin: 0px;
  width: 1510px;
}

#head {
  width: 1507px;
  height: 100px;
  background-color: #03A9F4;
}

#nav {
  background-color: #03A9F4;
  height: 40px;
  width: 1503px;
}

#menu {
  width: 1503px;
  height: 25px;
  background-color: #03A9F4;
  padding-top: 40px;
  direction: ltr;
}

ul {
  margin: 0px;
}

ul#nav li {
  border: 1px solid black;
  border-radius: 5px;
  display: inline;
  padding: 10px;
  font-size: 25px;
  background-color: white;
  margin-right: 10px;
}
<body>
  <form id="form1" runat="server">
    <div id="head">
      <div id="menu">
        <ul id="nav">
          <li><a href="Default.aspx">Home</a></li>
          <li><a href="addnew.aspx">Add new staff member</a></li>
          <li><a href="showall.aspx">Show all staff</a></li>
          <li><a href="changelocation.aspx">Change location of staff</a></li>
          <li><a href="editstaffdetails.aspx">Edit staff details</a></li>
          <li><a href="past24hours.aspx">Show past 24 hour locations</a></li>
          <li><a href="findbylocation.aspx">Find by location</a></li>
        </ul>
      </div>
    </div>
  </form>
</body>

Upvotes: 0

Views: 33

Answers (2)

Abhi Andhariya
Abhi Andhariya

Reputation: 560

Just decrease the font size to 24px in ul#nav li , and it will work.

ul#nav li {
  border: 1px solid black;
  border-radius: 5px;
  display: inline;
  padding: 10px;
  font-size: 24px;
  background-color: white;
  margin-right: 10px;
}

Upvotes: 0

mayersdesign
mayersdesign

Reputation: 5310

You have four explicit widths set, and the items don't fit, simple as that.

In the snippet I commented them both out, and reduced the font size and margin and commented two items just so the snippet looks OK in the little window.

body {
  margin: 0px;
 /* width: 1510px;*/
}

#head {
  /*width: 1507px;*/
  height: 100px;
  background-color: #03A9F4;
}

#nav {
  background-color: #03A9F4;
  height: 40px;
  /*width: 1503px;*/
}

#menu {
  /*width: 1503px;*/
  height: 25px;
  background-color: #03A9F4;
  padding-top: 40px;
  direction: ltr;
}

ul {
  margin: 0px;
}

ul#nav li {
  border: 1px solid black;
  border-radius: 5px;
  display: inline;
  padding: 10px;
  font-size: 10px;
  background-color: white;
  margin-right: 2px;
}
<body>
  <form id="form1" runat="server">
    <div id="head">
      <div id="menu">
        <ul id="nav">
          <li><a href="Default.aspx">Home</a></li>
          <li><a href="addnew.aspx">Add new staff member</a></li>
          <li><a href="showall.aspx">Show all staff</a></li>
          <!--<li><a href="changelocation.aspx">Change location of staff</a></li>-->
          <!--<li><a href="editstaffdetails.aspx">Edit staff details</a></li>-->
          <li><a href="past24hours.aspx">Show past 24 hour locations</a></li>
          <li><a href="findbylocation.aspx">Find by location</a></li>
        </ul>
      </div>
    </div>
  </form>
</body>

Upvotes: 1

Related Questions