mike12255 Posted June 14, 2011 Share Posted 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> Quote Link to comment https://forums.phpfreaks.com/topic/239362-why-do-i-have-black-holes-in-my-menu-bar/ Share on other sites More sharing options...
mike12255 Posted June 14, 2011 Author Share Posted 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; } Quote Link to comment https://forums.phpfreaks.com/topic/239362-why-do-i-have-black-holes-in-my-menu-bar/#findComment-1229655 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.