Tabs

I needed to create my tabs that are linked towards my other pages. I had to google this and I found a simple tutorial that gave me instructions to do this.

The code I used in my html is as follows.

<div id="menulist">
  <ul>

<li><a href="index1.html"> Home</a> </li>
<li><a href="Contacts.html"> Contacts</a> </li>
<li><a href="whatIf.html"> What If?</a> </li>
<li><a href="Gallery.html"> Gallery</a> </li>
<li><a href="Courses.html"> Courses</a> </li>

</ul>

</div>

This created a list of links or though these links weren't true as I still had not created my extra pages, but for now this gave me an idea of where the links would go after mouse clicking on them.

The css code for this is as follows.

#menulist li {
         display: inline;
        text-align: center;
        height:80px;
        width:80px;
        background-color:#36ADD8;
        margin: 30px 30px 30px 30px;
        padding-left:35px;
        padding-right:35px;
        box-shadow:10px 10px 5px #000000
       
   


         }
#menulist ul li a { text-decoration: none;
        color:#FFFFFF;
        background-color:#36ADD8;
        text-align: center;
       
}

This css code created a small blue box around each list name, I also added the the effect of a shadow box which gives each of those tabs a hovering look.