you are here: Home arrow CSS Navigation arrow Stylish Vertical links
Stylish Vertical links
User Rating: / 1
PoorBest 
Saturday, 20 May 2006

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.
}

 





Reddit!Del.icio.us!Google!Live!Facebook!Slashdot!Netscape!Technorati!StumbleUpon!Newsvine!Furl!Yahoo!Ma.gnolia!Squidoo!Free social bookmarking plugins and extensions for Joomla! websites!
 
< Prev   Next >
Based on valid XHTML 1.0 and CSS 2.0 code design by:pixelsparadise.com