Jump to content
Sign in to follow this  
i can spell html5!

styling my link pages

Recommended Posts

sorry to have to ask such a noob question but here goes. my pages has the all the folders (7 deadly sins, you play too loose!, not understanding starting hands etc.) I'm going to need but I'm not sure how to reference them in css. each page will of course have slightly different styles going on and I'm not sure how to reference them in css. heres the code(s)

 <div class="vbar">
         <div class="vbartitle">In The Beginning</div>
     <ul>
      <li><a href="7.html"> The 7 Deadly Sins</a></li>
   <li><a href="loose.html"> You Play Too Loose!</a></li>
   <li><a href="hands.html"> (Not Understanding) Starting Hands</a></li>
   <li><a href="oop.html"> Playing Out Of Posistion</a></li>
   <li><a href="sel.html"> Be More Selective </a></li>
   <li><a href="co.html"> Commitment</a></li>
   <li><a href="take.html"> Take Advantage</a></li>
   <li><a href="tilt.html"> Stop Tilting!</a></li>
   
   </ul>
</div>

 

 

and the css

 .vbar{
 position:absolute;
 left: 434px;
    top: 87px;
   width: 200px;
 border:1px solid #999;
 margin:100px 0px 10px 12px;
 text-align: center;
 }

 
  .vbartitle{
  background-color:  #ADD8E6;
  padding: 12px;
 text-align: center;
 font-weight:bold;
 
 }
 
 
  .vbar ul {
    list-style:none;
  padding: 0px;
  margin: 0px; 
 }
 
.vbar ul li {
    list-style:none;
  padding: 0px;
  margin: 0px; 
 }
 
 .vbar ul  li a{
   display:block;
  padding: 10px;
    color:#000;
 text-decoration:none; 
 border-bottom:1 px solid #f1f1f1;
 
 }
 
  .vbar ul  li a:hover{
  color: white;
  background-color:         #0000FF;
 border-bottom:1px dashed #000;
 
 }

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×