Jump to content

why do I have black holes in my menu bar?


mike12255

Recommended Posts

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.

 

issue.png

 

 

 

 

 

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>

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.