Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Feb 2007
    Thanked 1 Time in 1 Post

    menu item backgroundcolor

    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>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Thanked 1,838 Times in 1,822 Posts
    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">
    <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;}
        <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>

    I have some menu examples up here that might help you.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts