Forum Moderators: not2easy
So this is my website <snip> I created using HTML. I'm recreating it using only CSS. When you roll your mouse over the navigation each button box fills with a color; and the title off to the right. Also, when you click on the button it stays highlighted until you click a different button. So how do I do this in CSS?
Thanks much.
body,td,th {
font-family: "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
color: #FFFFCC;
}
#wrapper {
background-color: #333333;
width: 640px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
body {
background-color: #000000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#contentNavigation {
padding:7px;
background-image: url(slices1/images/page1_navplaceholder.jpg);
}
#navigation a {
font-size: 90%;
text-decoration: none;
}
#navigation a:hover {
background:url(slices1/images/navbutton_up.gif);
text-decoration: none;
}
#navigation ul {
margin: 0px;
padding: 0px;
}
#navigation li {
list-style-type: none;
display: inline;
margin-right: 5px;
margin-left: 5px;
}
#rightgreyBox {
float: right;
padding: 0px;
margin-top: -246px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align: right;
}
#leftgreyBox {
margin: 0px;
text-align: left;
}
#myPicture {
margin: 0px;
text-align: left;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="top"><img src="slices1/images/page1_header.jpg" alt="Roy Header" width="640" height="60" /></div>
<div id="Body Pic"><img src="slices1/images/page1_graphic.jpg" alt="Man's back" /></div>
<div id="navigation">
<div id="contentNavigation">
<ul>
<li><a href="index2.html"><img src="slices1/images/navbutton_up.gif" /></a></li>
<li><a href="page2.html"><img src="slices1/images/navbutton_up.gif" /></a></li>
<li><a href="page3.html"><img src="slices1/images/navbutton_up.gif" /></a></li>
<li><a href="page4.html"><img src="slices1/images/navbutton_up.gif" /></a></li>
<li><a href="page4.html">Graphic title goes here.</a></li>
</ul>
</div>
</div>
<div id="myPicture"><img src="slices1/images/pic_roy.jpg" alt="Roy" width="146" height="123" /></div>
<div id="leftgreyBox"><img src="slices1/images/page1_btmleft.jpg" alt="leftgreybox" width="146" height="123" /></div>
<div id="rightgreyBox"><img src="slices1/images/page1_btmright.jpg" alt="rightgreybox" width="494" height="246" /></div>
</div>
[edited by: swa66 at 8:39 am (utc) on Nov. 12, 2008]
[edit reason] No personal URLs please, see forum charter [/edit]
It seems that what you are trying to do requires JavaScript. Here's what I would do. I'd have a CSS class for each of the following:
.normal { // style for the regular button when nothing is happening to it
}
.over { // style for the button when the mouse is over it
}
.clicked { // style for the button when it has been clicked
}
The script would have to change the div from .normal to .over upon mouseover, and back to .normal on mouseout. Then, it would have to change the div to .clicked when it is clicked. Also, when one div is clicked, you probably want it to "unclick" the rest of the clicked divs back to .normal
This is how I would do it. The other way you could do it would be to have different images for each button status. Have the script switch the src of the image instead of the class.
If you need help writing the Javascript, please ask! The JavaScript [webmasterworld.com] forum is a helpful place to get started. I also reccomend W3Schools JavaScript tutorial.
I hope this helped!
-webfoo
Thank you so much for your help.
