I have this piece of CSS code:
body
{
background-color: #000000
}
ul
{
float:none;
width:20%;
heigth:0%;
padding:1;
margin:0;
list-style-type;none;
vertical-align:text-top;
align: left
}
a.links /*Links is the class here*/
{
float:none;
width: 10%
text-decoration:none;
color:white;
background-color:purple;
padding:0em 0.6em;
border-right:0px solid white;
}
a:hover {background-color:#ff3300}
And this piece of HTML code:
<html>
<head><link rel="stylesheet" type="text/css"
href="style0.css"></head>
<ul>
<a class="links" href="">Links</a>
<a class="links" href="">About me </a>
<a class="links" href="">Gallery</a>
<a class="links" href="">Others</a>
</ul>
<body>
</body>
</html>
The problem is that I'd like to have the links displayed, above each other, on the left hand side of the page. I'd also like the "boxes" around the links to be the same length. Could someone explain to me how to do this? I have been changing this for a while, and I can't get it right. I must admit, that I stole this from the w3c site to experiment with (it is not original the original file can be found here.
Could you please also tell me why the a:hover {background-color:#ff3300} is at the bottom, and not in the a.links part (what is the name for this?).
Thank You.