Posted on Sat, 2006-05-20 22:01
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. }
|