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> 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; } 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
Archived
This topic is now archived and is closed to further replies.