CODEWITHSUNDEEP
htmlcss
G.Hamton
G.Hamton

Reputation: 61

Aligning navigation area

I'm trying to make a simple navigation area but I'm having a small issue getting everything to sit correctly. What I'm trying to do is make each tab slot up next to each other but for some reason underneath each one there is a space. Can anyone see where I'm going wrong here?

Also this has caused my image area and the text area to no longer be inline with each other, so I also can't seem to work out why that has happened as well.

function menu1() {
  document.getElementById("menu1").className = "menuOn";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu2() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOn";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu3() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOn";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu4() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOn";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu5() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOn";
  document.getElementById("menu6").className = "menuOff";
}

function menu6() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOn";
}
.menuOn {
  color: #fff;
  background-color: #2f8fcb;
}

.menuOff {
  text-decoration: none;
  background-color: #e5eff6;
  color: #666;
}

#menuTab {
  width: 25%;
  font-size: 13px;
}

#listPic {
  float: left;
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  margin-top: 13px;
  margin-left: 10px;
  margin-right: 5px;
}

#listName {
  padding-top: 5px;
}

#listName p {
  margin: 15px;
}
<div id="menuTab">
  <div id="menu1" class="menuOn" onclick="menu1()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Health & Safety</p>
    </div>
  </div>
  <div id="menu2" class="menuOff" onclick="menu2()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Enviromental</p>
    </div>
  </div>
  <div id="menu3" class="menuOff" onclick="menu3()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Accounting</p>
    </div>
  </div>
  <div id="menu4" class="menuOff" onclick="menu4()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Haulage</p>
    </div>
  </div>
  <div id="menu5" class="menuOff" onclick="menu5()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Emails</p>
    </div>
  </div>
  <div id="menu6" class="menuOff" onclick="menu6()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Announcements</p>
    </div>
  </div>
</div>

Upvotes: 0

Views: 44

Answers (4)

vijayscode
vijayscode

Reputation: 2015

You haven't clear your floats. You need to clear float after menuOn and menuOff. 

.menuOn {
    overflow: hidden;
    clear: both;
}
.menuOff {
    overflow: hidden;
    clear: both;
}

Upvotes: 0

James Douglas
James Douglas

Reputation: 3446

For a start, you're using id where you should be using class, on listPic and on listName. Personally, I'd recommend using display: inline-block; to align divs, instead of using float: left;.

See snippet:

function menu1() {
  document.getElementById("menu1").className = "menuOn";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu2() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOn";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu3() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOn";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu4() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOn";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu5() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOn";
  document.getElementById("menu6").className = "menuOff";
}

function menu6() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOn";
}
.menuOn {
  color: #fff;
  background-color: #2f8fcb;
}

.menuOff {
  text-decoration: none;
  background-color: #e5eff6;
  color: #666;
}

#menuTab {
  width: 25%;
  font-size: 13px;
}

.listPic {
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  display: inline-block;
  margin: 5px 5px 5px 5px;
}

.listName {
  display: inline-block;
}

.listName p {
  margin: 0;
  padding-top: 12px;
}
#menuTab > div {
  width: 155px;
  height: 34px;
  display: flex;
}
<div id="menuTab">
  <div id="menu1" class="menuOn" onclick="menu1()">
    <div class="listPic">
    </div>
    <div class="listName">
      <p>Health & Safety</p>
    </div>
  </div>
  <div id="menu2" class="menuOff" onclick="menu2()">
    <div class="listPic">
    </div>
    <div class="listName">
      <p>Enviromental</p>
    </div>
  </div>
  <div id="menu3" class="menuOff" onclick="menu3()">
    <div class="listPic">
    </div>
    <div class="listName">
      <p>Accounting</p>
    </div>
  </div>
  <div id="menu4" class="menuOff" onclick="menu4()">
    <div class="listPic">
    </div>
    <div class="listName">
      <p>Haulage</p>
    </div>
  </div>
  <div id="menu5" class="menuOff" onclick="menu5()">
    <div class="listPic">
    </div>
    <div class="listName">
      <p>Emails</p>
    </div>
  </div>
  <div id="menu6" class="menuOff" onclick="menu6()">
    <div class="listPic">
    </div>
    <div class="listName">
      <p>Announcements</p>
    </div>
  </div>
</div>

Upvotes: 0

WizardCoder
WizardCoder

Reputation: 3461

I have just changed the floats to be inline-block and added vertical-align:middle. The floats were messing up the flow of the elements.

function menu1() {
  document.getElementById("menu1").className = "menuOn";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu2() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOn";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu3() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOn";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu4() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOn";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu5() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOn";
  document.getElementById("menu6").className = "menuOff";
}

function menu6() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOn";
}
.menuOn {
  color: #fff;
  background-color: #2f8fcb;
}

.menuOff {
  text-decoration: none;
  background-color: #e5eff6;
  color: #666;
}

#menuTab {
  width: 25%;
  font-size: 13px;
  display: inline-block;
}
#listPic {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  margin-left: 10px;
  margin-right: 5px;
  vertical-align: middle;
}

#listName {
  display: inline-block;
  vertical-align: middle;
}

#listName p {
  margin-left: 15px;
}
<div id="menuTab">
  <div id="menu1" class="menuOn" onclick="menu1()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Health & Safety</p>
    </div>
  </div>
  <div id="menu2" class="menuOff" onclick="menu2()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Enviromental</p>
    </div>
  </div>
  <div id="menu3" class="menuOff" onclick="menu3()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Accounting</p>
    </div>
  </div>
  <div id="menu4" class="menuOff" onclick="menu4()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Haulage</p>
    </div>
  </div>
  <div id="menu5" class="menuOff" onclick="menu5()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Emails</p>
    </div>
  </div>
  <div id="menu6" class="menuOff" onclick="menu6()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Announcements</p>
    </div>
  </div>
</div>

Upvotes: 0

j08691
j08691

Reputation: 207861

Since you float the content of your div, it shrinks as if the content wasn't there. Add overflow:auto; to .menuOn and .menuOff to have it extend over the div's contents.

function menu1() {
  document.getElementById("menu1").className = "menuOn";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu2() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOn";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu3() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOn";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu4() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOn";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu5() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOn";
  document.getElementById("menu6").className = "menuOff";
}

function menu6() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOn";
}
.menuOn {
  color: #fff;
  background-color: #2f8fcb;
  overflow:auto;
}

.menuOff {
  text-decoration: none;
  background-color: #e5eff6;
  color: #666;  overflow:auto;

}

#menuTab {
  width: 25%;
  font-size: 13px;
}

#listPic {
  float: left;
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  margin-top: 13px;
  margin-left: 10px;
  margin-right: 5px;
}

#listName {
  padding-top: 5px;
}

#listName p {
  margin: 15px;
}
<div id="menuTab">
  <div id="menu1" class="menuOn" onclick="menu1()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Health & Safety</p>
    </div>
  </div>
  <div id="menu2" class="menuOff" onclick="menu2()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Enviromental</p>
    </div>
  </div>
  <div id="menu3" class="menuOff" onclick="menu3()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Accounting</p>
    </div>
  </div>
  <div id="menu4" class="menuOff" onclick="menu4()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Haulage</p>
    </div>
  </div>
  <div id="menu5" class="menuOff" onclick="menu5()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Emails</p>
    </div>
  </div>
  <div id="menu6" class="menuOff" onclick="menu6()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Announcements</p>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions