<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PACES</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div class="navigation">
<ul class="nav">
<li><a class="home" href="index.html">Home</a></li>
<li><a class="events" href="events.html">Events</a></li>
<li><a class="team" href="team.html">Team</a></li>
<li><a class="prices" href="prices.html">Prices</a></li>
<li><a class="contact" href="contact.html">Contact</a></li>
</ul>
</div><!-- end navigation-->
<div class="scrollbox">
</div><!-- end scrollbox-->
</div><!-- end wrapper-->
<div id="footer">
<ul class="bottom-nav">
<li><a class="home" href="index.html">Home</a></li>
<li><a class="events" href="events.html">Events</a></li>
<li><a class="team" href="team.html">Team</a></li>
<li><a class="prices" href="prices.html">Prices</a></li>
<li><a class="contact" href="contact.html">Contact</a></li>
</ul>
</div> <!--end footer-->
</body>
</html>
It was in my CSS where these things started to come together in the shape of a website. As you can see my navigation has been made up of unordered lists, this is the CSS, I used to get them to sit on the page and look as they did in my mock ups.
ul.nav {
display:block;
list-style-type: none; (this is to get rid of bullet points on my list)
-moz-border-radius: 30px; (this is part of the code to get the corners of my box to curve in firefox)
border-radius: 30px; (this is part of the code to get the corners of my box to curve in other browsers)
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
margin: 110px 0px 0px 0px; (here I have used margins to make sure the box is in the right place on the page)
width: 70px;
padding: 10px 10px 10px 30px;
float:left; (here you can see the div is floated left to make it sit against my content box)
height: 170px;
line-height: 32px;
opacity:0.7; (this is here to drop the opacity of my box to 70% on most browsers)
filter:alpha(opacity=70); (this is here to drop the opacity of my box to 70% on internet explorer)
}
ul.nav li a{
text-decoration: none; (this is to get rid of the blue link colour and underline)
color: #fff; (here I have set the colour of the font to white)
Below you can see the code I used to make each link have a rollover of a different colour
ul a.home:hover {
color: #e94445;
}
ul a.events:hover {
color: #f0e753;
}
ul a.team:hover {
color: #68b657;
}
ul a.prices:hover {
color: #5a6eb3;
}
ul a.contact:hover {
color: #ad68a8;
}
No comments:
Post a Comment