Week 07

We are already in Week 7 and our Web pages are starting to look like a real one. This week, our task was to link the Web pages together in order to start building a Web site, as well as adding a drop down menu in our links. It is a rather important mark today to link all Web pages in one big Web site.

Here is some of the code that allowed us to do that:



<nav id="navegacao">
<div id = "dropbox1">
Home
<ul class="clearfix">
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week07/About/AboutUs.html">About Us</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week07/Contact/ContactUs.html">Contact Us</a></li>
<ul>
</div>

<div id = "dropbox2">
Equipment
<ul class="clearfix">
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week07/Error/UnderConstruction.html">Mobile phones</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week07/Error/UnderConstruction.html">Computers</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week07/Error/UnderConstruction.html">Tablets</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week07/Error/UnderConstruction.html">Hard Drives</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week06/MovicelGallery.html">Cables</a></li>
<ul>
</div>
</nav>


These are 2 div tags inside the navigation bar and each one of them as it's own drop down menu. I tried to create a class instead of 2 different ID's with rather similar styling, but it did not work for one simple reason: although the colors and styling are the same, the drop down box has to "drop" under each link, meaning it will drop in different places if we put the mouse over the first link or the second, and that detail prevented me to use a class.

Some CSS3 code:



#dropbox1{ border: 2px solid #004C67 ;
background-color:  #5095C9 ;
margin : 2px 20px 0px 20px ;
padding: 5px 20px 5px 20px;
border-radius: 5px;
display: inline;}

#dropbox1 ul{         list-style-type : none ;
display: none;
margin-top: 8px;
margin-left: 16px;
padding : 10px;
float: left;
position: absolute}

#dropbox1:hover ul {display:block;}


I currently have the "Home" page, the "Cable Section" (gallery) page, and an "Under Construction" page. All of these pages are link together, and all of them have a navigation bar so the user has total freedom to navigate through the website, even if there is not much to see for now. I spent part of this week also working on the header, making it the exact same size in all pages and the navigation bar the same. When browsing through the pages those two boxes are exactly in the same place, making it easier to understand where exactly we are on the Web site, and how to go move to another page:



#cabeca { background-color: #A7E8FF ;
margin : auto ;
padding: 10px;
border-radius: 10px;
border : 2px solid #004C67 ;
color : #004C67 ;
text-align: center;
width: 1310px;
height: 150px
                }

In order to be the same, these two properties were made constant throughout the styling pages.
Here are some screenshots:

All HTML files were checked for Errors in the Validator and, as expected, 0 errors.

http://1202236.studentplus.abertay.ac.uk/Index/Index.html