Building the Website-Week 9

Another day of class and after many hours working with Dreamweaver and changing things I can say that i have learned a lot and I starting to feel comfortable and happy when all of this comes together. As a beginner in coding a website is not easy, but trying and trying to move things around makes fun and sense. Thus, I placed the code for the navigation bar in the site I am building and looks great.  Here is the code I used.


<div id=”navcontainer”>
<ul id=”navlist”>
<li id=”active”><a href=”#” id=”current”>Item one</a></li>
<li><a href=”#”>Item two</a></li>
<li><a href=”#”>Item three</a></li>
<li><a href=”#”>Item four</a></li>
<li><a href=”#”>Item five</a></li>

background: #f0e7d7;
margin: 0 auto;
padding: 1em 0 0 0;
font-family: georgia, serif;
text-transform: lowercase;

/* to stretch the container div to contain floated list */
content: “.”;
display: block;
line-height: 1px;
font-size: 1px;
clear: both;

list-style: none;
padding: 0;
margin: 0 auto;
width: 80%;
font-size: 0.8em;

ul#navlist li
display: block;
float: left;
width: 15%;
margin: 0;
padding: 0;

ul#navlist li a
display: block;
width: 100%;
padding: 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a
background: #f0e7d7;
color: #800000;

ul#navlist li a:hover, ul#navlist li#active a:hover
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;

Categories: Uncategorized | Leave a comment

Post navigation

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Blog at

%d bloggers like this: