Home arrow Style Sheets arrow CSS: Continuing the Clarification of CSS Classification
STYLE SHEETS

CSS: Continuing the Clarification of CSS Classification


In our last CSS tutorial, published about a month ago, we covered some of the Classification properties, which allow you to display elements, position them, choose where they will appear, control their visibility, and a whole lot more. In this article we will finish the discussion.

Author Info:
By: James Payne
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
May 12, 2008
TABLE OF CONTENTS:
  1. · CSS: Continuing the Clarification of CSS Classification
  2. · Absolutely Relatively Speaking
  3. · Changing the Way You Curse
  4. · Attack of the Invisible Man

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
CSS: Continuing the Clarification of CSS Classification
(Page 1 of 4 )

Creating a Vertical Menu

In the last episode we learned how to make a horizontal menu with some CSS style. Here we will learn to create a vertical menu. First we will create the .css file:


<style type="text/css">

#vmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 150px;
padding: 0px;
margin: 0px;
}

#vmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vmenu ul li {
margin: 0px;
padding: 0px;
}
#vmenu ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:160px;
}

#vmenu ul li a:hover, #vmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}

</style>

Next we will create the HTML:


<div id="vmenu">
<ul>
<li><a href="#" tabindex="1">Home</a></li>
<li><a href="#" tabindex="2">Content</a></li>
<li><a href="#" tabindex="3">Pictures</a></li>
<li><a href="#" tabindex="4">Games</a></li>
<li><a href="#" tabindex="5">Contact Us</a></li>
<li><a href="#" tabindex="6">Links</a></li>
</ul>
</div>

You can also design the menu in one file, like so:


<html>

<head>

<title>Your Website</title>

<style type="text/css">

body {

background-color: #D5D6AE;

}

ul.vmenu {

padding: 0;

margin: 0;

list-style: none;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 0.8em;

border-bottom: 1px solid #6F3E04;

width: 100px;

background-color: #EEEEDC;

}

ul.vmenu li {

border-top: 1px solid #6F3E04;

border-left: 1px solid #6F3E04;

border-right: 1px solid #6F3E04;

}

ul.vmenu li a {

text-decoration: none;

display: block;

width: 78px;

color: #333333;

font-weight: bold;

padding: 2px 10px;

}

ul.vmenu li a:hover {

background-color: #B9BB79;

color: #EEEEDC;

}

</style>

</head>

<body>

<ul class="vmenumenu">

<li><a href="home.html">Home</a></li>

<li><a href="images.html">Images</a></li>

<li><a href="aboutus.html">About Us</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</body>

</html>


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 2 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials