Div ID and Class
Skills Covered
Pipe |
ASCII Code
Div class
Page Margins
Padding
This lesson will build on the navigation menu you started in the previous project. You will be mixing a span class into the div rules to indicate the "current" page. We will also be exploring margin and padding options. The final project is going to look something like this:
Let's start by getting those little vertical dividing lines between each link. It's easy using the | mark on your keyboard (it's called a "Pipe", by the way). It should be located just above the ENTER key, with the slash key. If it isn't on your keyboard, you can use the ASCII code 124:
Hold ALT
Type 124
Release ALT
Did you know your computer does that? Oh yeah! If you are bored, you can experiment with ASCII codes. Just hold down ALT, type a few numbers, and release! Try ALT+70! You can have a look at a handy ASCII table, with an explanation of just what ASCII is, at http://ascii-table.com/
OK, now edit the menu on your Favorite Band Web Site! Between each link, add a space, a pipe, and another space. Have a look at my code below - (I made the Pipes bright blue so you can see where they go):
<p><a href="index.html">Home</a> | <a href="disco.html">Discogaphy</a> | <a href="audio.html">Audio</a> | <a href="pics.html">Pictures</a> | <a href="tours.html">Tours</a>
| <a href="links.html">Links</a></p>
</div>
Check out what it looks like here
You can change the color of the pipes by changing the text color in the topmenu div. I made mine white:
