Log in

View Full Version : Resolved 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.

http://i42.tinypic.com/95x8ow.jpg

CSS is

/*
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

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