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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...