Stylish Vertical links

Vertical links

This tutorial with guide you through how to make a vertical bar with links.

View preview

For the HTML we use this:

<div id="vertlinks"> // This sets everything within the div to use the id vertlinks which is set in the css code.
<a href="http://skeletorscorpse.com/joomla/#">Link 1</a>
<a href="http://skeletorscorpse.com/joomla/#">Link 2 </a>
<a href="http://skeletorscorpse.com/joomla/#">Link 3 </a>
<a href="http://skeletorscorpse.com/joomla/#">Link 4 </a>
</div>

And for the CSS we use this:

#vertlinks {
width: 90px; // sets the width of the div to 90px. Adjust as you want.
}
#vertlinks a {
display: block; // This makes each link start on a new line.
color: #999999; // Makes text grey
text-decoration: none; // No underline
text-align: center; // centers the text
padding: 3px 1px 3px 1px; // adds some padding so the border isnt touching the text
background-color: #FFFFDD; // makes the background a pale yellow
border: 1px solid #CCCCCC; // gives each link a thin border of light grey
margin-bottom: 5px; // seperates each link by 5px
}
#vertlinks a:hover {
background-color: #EEEECC; // changes the background colour of the link on mouseover.
}