Results 1 to 3 of 3

Thread: Change background in CSS menu bar

  1. #1
    Join Date
    Jan 2009
    Location
    NH
    Posts
    675
    Thanks
    98
    Thanked 26 Times in 26 Posts

    Question Change background in CSS menu bar

    My temp. page is at http://islandestatenh.com/index2.html

    I want to get the background to be white that this navigation bar resides in. Currently the bar is showing but there is a space of the blue (the background for the entire page) showing.



    CSS is
    Code:
    /*
    	tswtabs.css		1.0.2
    	Please use the CSS Menu Button Wizard at
    		http://www.thesitewizard.com/wizards/css-menu-buttons.shtml
    	to generate your own customized menu buttons.
    */
    
    #tswcsstabs ul {
    	margin: 0 ;
    	padding: 0 ;
    	list-style: none ;
    	display: inline ;
    }
    #tswcsstabs ul li {
    	margin: 0 ;
    	padding: 0 ;
    	display: inline ;
    	text-align: center ;
    	list-style: none ;
    	font-family: Arial, Helvetica, sans-serif ;
    }
    #tswcsstabs li a {
    	color: #ff0 ;
    	background-color: #12127d ;
    	border: 1px outset #9191ff ;
    	padding: 8px ;
    	text-decoration: none ;
    	display: inline ;
    }
    #tswcsstabs li a:hover {
    	color: #000 ;
    	background-color: #c8c8ff ;
    }
    HTML for the page is
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <base href="http://IslandEstateNH.com/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>IslandEstateNH.com brought to you by Samonas Realty</title>
    
    <link rel="stylesheet" type="text/css" href="Styles.css">
    <link rel="stylesheet" type="text/css" href="http://IslandEstateNH.com/tswtabs.css" />
    <style type="text/css">
    #links {
        width:770px;
        height:135px;
        padding:419px 0 0 100px;
        background-image:url(images/Front-Web.jpg);
      }
    #video img {
        float:left;
        width:300px;
        height:50px;
        border:0;
        margin-right:42px;
     }
    #gallery img{
        float:left;
        width:300px;
        height:50px;
        border:0;
     }
    </style>
    
    </head>
    <body>
    <div id="mainPicture"></div>
    <div id="tswcsstabs">
    <ul>
    <li><a href="http://islandestatenh.com/">Home</a></li>
    <li><a href="http://islandestatenh.com/video.html">Video Tour</a></li>
    <li><a href="http://islandestatenh.com/gallery.html">Image Gallery</a></li>
    <li><a href="http://islandestatenh.com/mls.html">MLS / Specs</a></li>
    <li><a href="http://islandestatenh.com/map.html">Directions</a></li>
    <li><a href="http://islandestatenh.com/contact.html">Contact</a></li>
    </ul>
    </div>
    <div class="contentBox">
    <div class="innerBox">
    
    <div id="links">
    <a id="video" href="video.html"><img src="images/video_tour.png" alt="video"></a>
    <a id="gallery" href="gallery.html"><img src="images/photo_gallery.png" alt="gallery"></a>
    </div>
    </div>
    Last edited by mlegg; 05-18-2010 at 03:53 PM.

  2. #2
    Join Date
    May 2010
    Posts
    13
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Default

    Try these changes to your css:

    #tswcsstabs ul {
    float: left;
    display: inline;
    font-family: Arial, Helvetica, sans-serif ;
    margin: 0 ;
    padding: 0 ;
    overflow: auto;
    list-style: none;
    background-color: #fff ;
    }

    #tswcsstabs ul li {
    margin: 0 ;
    padding: 0 ;
    float: left;
    display:inline;
    }

    #tswcsstabs li a {
    display: block ;
    padding: 8px ;
    border: 1px outset #9191ff ;
    color: #ff0 ;
    background-color: #12127d ;
    text-decoration: none ;
    }

  3. #3
    Join Date
    Jan 2009
    Location
    NH
    Posts
    675
    Thanks
    98
    Thanked 26 Times in 26 Posts

    Default

    That code didn't make the hover color work. Thanks anyways. I changed the location in my HTML and put the tswcsstabs below the innerBox and it worked well.

    <div class="innerBox">
    <div id="tswcsstabs">

Bookmarks

Posting Permissions

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