Change background in CSS menu bar

**mlegg** · 05-17-2010, 04:46 PM

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>

**zip222** · 05-17-2010, 08:44 PM

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 ;
}

**mlegg** · 05-18-2010, 03:50 PM

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">

Thread: Change background in CSS menu bar

Thread Tools

Search Thread

Change background in CSS menu bar

Bookmarks

Bookmarks

Posting Permissions