Adding Content and a Navigation Bar
If you are here you have either completed the WOS-LA website breakdown and want to learn how to add content and a navigation bar to the website or you know how to create your layout, but you need help with how to insert content. Either way, you will need the wos-la file to join me in this tutorial. If you do not have it you can download a copy of the file here. You will need WinRar to unzip it. The file may be edited in whatever program you would like to use. If you do not have one you can always use notepad!
Lets get started. The rest of the screen shots I show in this tutorial will be zoomed up on the object we are inserting material to. We will start by adding a CSS navigation bar to this webpage. The following code is for a generic navigation bar so you can get used to the ropes. As you become more experiences you may play with more advanced navigation bars. I used listamatic to get the CSS and HTML code for this navigation bar.
The HTML Code you need would look like this:
<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>
</ul>
</div>
The CSS for the code would look like this:
display: inline;
list-style-type: none;
padding-right: 20px;
}
This gives you the bare minimums for a simple horizontal list. The inline display makes the list items appear on one line and the style type of none removes the bullets that an unstyled list would have. Place the HTML code in the div named ‘nav’. If you refresh your webpage it should now look similar to the image below.
Leave a Reply