why do I have black holes in my menu bar?

mike12255 · June 14, 2011

My menu bar is an image that is placed overtop the header. I am trying to add a login form to the right side of my menu bar (picture below) but for some reason my labels and textboxes have black backgrounds. I want their background to be see-through so that u see the menu bar behind them since its a gradient.

Here is my CSS:

@CHARSET "UTF-8";

* * {
margin:0;
padding:0;
background-color:black;

}

#box {
margin-left:auto;
margin-right:auto;
width: 992px;
margin-top:none;
}

#header {
height: 222px;
background-image:url('../images/header.jpg');
z-index: 5;
}

#menu {
background-image:url('../images/menu_bar.png');
width: 972px;
height: 72px;
position: absolute;
left: 13px;
top: 170px;
z-index: 10;
background-color: transparent;

}


#menu ul{
list-style: none;
padding: 0;
margin: 0;
}
#menu li {
z-index:20;
width:57px;
height:23px;
text-align:center;
float: left;
  	margin: 0 0.15em;
background-image:url('../images/mb1.png');
background-color: transparent;
position:relative;
left: 13px;
top: 27px;

}

#menu li.sel {

z-index:20;
padding-top:1px;
width:57px;
height:23px;
text-align:center;
float: left;
  	margin: 0 0.15em;
background-image:url('../images/mb2.png');
background-color: transparent;
position:relative;
left: 13px;
top: 27px;
}

#menu li a {

background: none;
color: black;
font-size:14px;
text-decoration: none;
text-align: center;	
}

#menu li  a:hover {

z-index:20;
width:57px;
height:23px;
text-align:center;
float: left;
  	margin: 0 0.15em;
background-image:url('../images/mb2.png');
background-color: transparent;
position:relative;
left: 13px;
top: 27px;	
}

#shadow{
background-image:url('../images/dropshadow.png');
width:972px;
background-repeat:repeat-x;
position: absolute;
left: 13.5px;
top: 228px;
z-index: 15;
background-color: transparent;	
}

#login{
position: absolute;
left: 610px;
top: 199px;
z-index: 20;
color:black;
background-color: transparent;
border:none;
}

#login label{
background-color:white;
color: black;
padding:0px;
font-size: 13px;

}
/* Rounded Corner */
#login input.tb5 {
background: url('../images/rounded.png') no-repeat top left;
height: 18px;
padding:2px;
background-color: white;
border:none;	


}
#login inputround.tb5a {
border: 0;
width:220px;
margin-top:3px;
}

and my html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" type="text/css" href=" styles/main_style.css" >
</head>
<body>
<div id = "box">
<div id ="header"><img src="images/header.jpg"/></div>
<div id="menu">
<ul>
<li class="sel"><a href ="index.html">Index</a></li>
<li><a href ="Forums.html">Forums</a></li>
<li><a href ="contact.html">Contact</a></li>
</ul>
</div>
<div id= "shadow"> </div>

<div id="login">

<form>
<label>Username:</label> <input class="tb5" type="text" name="firstname" /><br />
<label>Password:</label> <input class ="tb5" type="password" name="lastname" />
</form>

</div>
</div>

</body>
</html>

mike12255 · June 14, 2011

Wont let me edit it, but I solved the problem.

** {

background-color: black;

}

needed to be moved to

body{

background-color:black;

}

Sign In

why do I have black holes in my menu bar?

Recommended Posts

mike12255

Link to comment

Share on other sites

mike12255

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information