Main?What It Is
Here's a little applied CSS to get a neat "rollover" effect.
This is what I'm going to show you how to do. When you navigate over the menu, you will notice that this "rollover" effect occurs.
This isn't too hard to do, but I'll break this down piece by piece.
How To Do It (In A Nutshell)
The full HTML for that document is a bit involved, but really it can be broken down to this:
<style type="text/css">
a.roll {
background-color: #FFFFFF;
color: #000000;
}
a.roll:hover {
background-color: #000000;
color: #FFFFFF;
}
</style>
Now, whatever link has thier class attribute set to "roll" will have a rollover effect, like this: Click to See Index
(The HTML for that link looks like this: <a href="index.html" class="roll">Click to See Index</a>)
How To Do It (In Depth)
Let's look at the entire HTML that I used:
<html>
<head>
<title>HTML Guide</title>
<style type="text/css">
body {
font-family : verdana;
font-size : 12px;
}
.head {
background-color: #990000;
width: 200px;
color: #FFFFFF;
text-align: right;
padding: 2px;
}
.box {
border: #000000 1px solid;
width: 200px;
}
a.roll {
background-color: #FFFFFF;
color: #000000;
width: 200px;
text-align: center;
text-decoration: none;
border-top: #000000 1px solid;
padding: 2px;
}
a.roll:hover {
background-color: #000000;
color: #FFFFFF;
}
</style>
</head>
<body bgcolor="#FFFFFF">
<div class="box">
<span class="head">HTML</span><br>
<a href="015.html" class="roll">Text</a><br>
<a href="015.html" class="roll">List</a><br>
<a href="015.html" class="roll">Images</a><br>
</div>
<br><br>
<div class="box">
<span class="head">CSS</span><br>
<a href="015.html" class="roll">Fonts and Text</a><br>
<a href="015.html" class="roll">List Controls</a><br>
<a href="015.html" class="roll">Mouse Controls</a><br>
<a href="015.html" class="roll">Color and Background Controls</a><br>
</div>
<br><br>
(<small>pssst, those links work, but they all link back to this document!</small>)
</body>
</html>
Now let's break it down:
body {
font-family : verdana;
font-size : 12px;
}
I want all the text in my HTML document to be 12px verdana, so I assigned this to my body.
.head {
background-color: #990000;
width: 200px;
color: #FFFFFF;
text-align: right;
padding: 2px;
}
Remember the red parts of the menus? The ones with the headers? Well, here is thier style sheet specs. The background color is a shade of red (#990000), I want the red box to be 200 pixels wide, so I assigned the width attribute as such, and I didn't want the white text to touch the edges of the box so I used the padding attribute.
Most importantly, the selector is .head, so that means whatever has class="head" in it well have these specs.
.box {
border: #000000 1px solid;
width: 200px;
}
This is what makes the box around the menu.
a.roll {
background-color: #FFFFFF;
color: #000000;
width: 200px;
text-align: center;
text-decoration: none;
border-top: #000000 1px solid;
padding: 2px;
}
This is the actual specs for the link, but not just any link, only links with this in them: class="roll". That way, if I make links that are not supposed to be part of that menu, they well not format like they are.
Okay, these are the specs for the links when you do not hover the mouse over them. The background is set to white, and the text is black. I wanted the link to fill up the 200 pixel box that I made earlier, so I set the width to 200 px. You might be wondering, why did I make it border-top, and not just border? Well, these links will be stacked on top of each other, and if the links had a border on all sides, then that means when the borders are pressing up against one another, then the top and bottom borders will look more like 2 pixels wide.
a.roll:hover {
background-color: #000000;
color: #FFFFFF;
}
This is where the actual rollover effect comes in. This is the link on "hover". The background of the link has been set to black, and the text color has been set to white (so you can read it of course!)
Okay, now let's put it to use in the HTML.
<div class="box">
<span class="head">HTML</span><br>
<a href="015.html" class="roll">Text</a><br>
<a href="015.html" class="roll">List</a><br>
<a href="015.html" class="roll">Images</a><br>
</div>
I made a set of <div> ... </div> tags, and assigned the "box" class to them. That means that they will have the properties of the .box section in the CSS up there, which makes a box to contain the menu. Next, I want to create the header of my menu, so I assign the "head" class to my set of <span> tags, and now whatever the span tags will contain will have all the .head specs in the CSS. The last part is making the links in the menu. All I have to do is make a standard link, and place class="roll" in them so they will have the specs that I made in the CSS.
Thats all there is to it. If you would like to copy and paste, be my guest.