...

View Full Version : menu item backgroundcolor



docock
11-23-2009, 05:45 PM
I've got a few lines of code for a menu I'm building, though I need some help with it. How can I change the div's backgroundcolor of the menu item the user moves over? My css isn't very good :S



<div style="width:830px;height:25px;border: 10px solid #fff;margin: 0px auto;background: #F68B1F;">
<div style="float:left;width:100px;height:100%;background: #F17022;border-right:1px solid #fff;text-align:center;"><div style="margin-top:0px;color: #fff;">Home</div></div>
<div style="float:left;width:200px;height:100%;background: #F68B1F;border-right:1px solid #fff;text-align:center;"><div style="margin-top:0px;color: #fff;">Menuitem1</div></div>
<div style="float:left;width:140px;height:100%;background: #F68B1F;border-right:1px solid #fff;text-align:center;"><div style="margin-top:0px;color: #fff;">Menuitem2</div></div>
</div>

Excavator
11-23-2009, 06:32 PM
Hello docock,
Make your buttons a link and then style those links with a hover affect.
Here's an example based on your code, minus the inline styles:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100.1% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#container {
height: 400px;
width: 850px;
margin: 30px auto;
background: #fff;
font-size: 0.8em;
}
#menu {
width: 830px;
height: 25px;
border: 10px solid #fff;
background: #F68B1F;
}
.button a{
float: left;
width: 100px;
height: 25px;
background: #F17022;
border-right: 1px solid #fff;
text-align: center;
}
.button a:hover {background: #f00;}
</style>
</head>
<body>
<div id="container">
<div id="menu">
<div class="button"><a href="#">Home</a></div>
<div class="button"><a href="#">Menuitem1</a></div>
<div class="button"><a href="#">Menuitem2</a></div>
<!--end menu--></div>
<!--end container--></div>
</body>
</html>


I have some menu examples up here (http://nopeople.com/design/CSS%20tips/index.html)that might help you.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum