Jump to content

Imagery Issue For Css Drop Down Menu


owosso
 Share

Recommended Posts

Here's hoping I can explain this in an understandable manner....I'm using a drop down template done in css. The only alterations I've done is to change background colors or color of imagery. I'd like the menu to be without a background upon initial viewing and then to have a blue tab show up upon rollover.It currently has a white background upon initial viewing. The menu_left, menu_mid and menu_right images for this menu are 70px in height, the top half white, the bottom half blue. How is this rollover currently working? How does the white half show initially and then the blue half show upon rollover? How can I get this to be transparent?I have tried eliminating the white half of the image, leaving only the blue. I've then adjusted the height of the classes by either eliminating the 35px line height, or the 32 px class height. When I do either elimination, the blue image appears upon initial viewing instead of a transparency.I don't understand this layout and code system. Can anyone explain it in simple terms?Here's the link: http://www.adunate.com/Forward/test/testNav.htmlHere's the html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title><link href="menu/menu_style.css" rel="stylesheet" type="text/css" /><!--[if lt IE 7]>		<link rel="stylesheet" type="text/css" href="/menu/menu_style.css" media="screen"/>	<![endif]--></head><body> <div class="wrapper"  style="width:600px;">		<div class="nav-wrapper">			<div class="nav">				<ul id="navigation" style="width:538px";> 					<li class="#">						<a href="#" target="_self">							<span class="menu-left"></span>							<span class="menu-mid">Home</span>							<span class="menu-right"></span>						</a>					</li> 					<li class="#">						<a href="#" target="_self">							<span class="menu-left"></span>							<span class="menu-mid">About Us</span>							<span class="menu-right"></span>						</a>	            	   	<div class="sub">			   				<ul>         			   					<li>									<a href="#" target="_self">History</a>								</li>         			   					<li>									<a href="#" target="_self">Financial Stability</a>								</li>         			   					<li>									<a href="#" target="_self">Operating Territory</a>								</li>			   				</ul>					</li>                                        <li class="#">						<a href="#" target="_self">							<span class="menu-left"></span>							<span class="menu-mid">Contact Us</span>							<span class="menu-right"></span>						</a>					</li> 					 								   	</ul>			</div>			<br><br>	 </div>	</div></body></html>

Here's the CSS

	.wrapper1 a{		color: #E5F2FB;		text-decoration: none;		font: 14px Verdana, Arial, sans-serif;		margin: 0;		padding: 4px 0 0;	}	.wrapper1 a:hover {		color: #09548B;	}	.wrapper1 p {		margin: 0 0 17px;		padding: 0;		line-height: 18px;	}.wrapper {	/*width: 710px;*/	margin: 20px auto;	background-color:#F66;}.nav {	float: left;}.nev-wrapper {	clear: both;	float: left;}.nav-left {	float: left;	width: 11px;	height: 41px;}.nav-right {	float: left;	width: 11px;	height: 41px;}.nav ul {	/*width: 648px;*/	height: 38px;	float: left;	margin: 0;	padding-top: 3px;	list-style: none;	font-size: 15px;	}.nav li {	float: left;	padding: 0 7px;	background: url(images/split.png) no-repeat right center;	position: relative;	z-index: 1;}.nav li.last {	background:none;}.nav li:hover {	z-index:2;}.nav li a {	display: block;	line-height: 38px;	overflow: hidden;	float: left;}a .menu-left {	background: url(images/menu_left.gif) no-repeat left top;	width: 8px;	height: 32px;	line-height: 35px;	display: block;	float: left;}a .menu-mid {	background: url(images/menu_mid.gif) repeat-x top left;	height: 32px;	line-height: 35px;	display: block;	float: left;}a .menu-right {	background: url(images/menu_right.gif) no-repeat top left;	width: 8px;	height: 32px;	line-height: 35px;	display: block;	float: left;}.nav li a:hover .menu-left,.nav li.active a .menu-left,.nav li:hover a .menu-left,.nav li a:hover .menu-mid,.nav li.active a .menu-mid,.nav li:hover a .menu-mid,.nav li a:hover .menu-right,.nav li.active a .menu-right,.nav li:hover a .menu-right {	background-position: 0 -37px;	line-height: 35px;}.nav li a:hover,.nav li.active a,.nav li.hover a,.nav li:hover a {	color: #09548B;}.nav li:hover .sub,.nav li.hover .sub {	display:block;}.nav li .sub {	display: none;	position: absolute;	top: 27px;	left: 6px;	background: url(images/submenu_top.png) no-repeat;	width: 186px;	padding-top: 9px;}.nav li ul {	background: url(images/submenu_bg.png) repeat-y;	width: 162px;	height: auto;	margin: 0;	padding: 0 12px 10px;	list-style: none;	font-size: 14px;}.nav li:hover li,.nav li.active li {	width: 100%;	padding: 1px 0 2px;	border-bottom: 1px #C1D9F0 dashed;	background: none !important;}.nav li:hover li a,.nav li.active li a {	color: #09548B;	background: none !important;	line-height: normal;	width: 156px;	padding: 8px 3px 3px;	text-indent: 1px;}.nav li:hover li a:hover,.nav li.active li a:hover {	color: #fff;	background: #165B9F !important;	text-decoration: none;	line-height: normal;}/*IE*/.nav li li a:hover,.nav li li a:hover {	color: #fff;	background: #165B9F !important;	text-decoration: none;	line-height: normal;}/**/.nav .btm-bg {	background: url(images/submenu_bottom.png) no-repeat;	width: 205px;	height: 9px;	overflow: hidden;	clear: both;}.content {	width: 670px;	background: transparent url(images/content_bg.png) repeat-y;	float: left;	padding: 10px 20px;}.content h1 {	color: #333;	font-weight: 400;	text-transform: uppercase;	font-size: 18px;	border-bottom: 1px dashed #C1D9F0;}.content h2 {	font-weight: 400;	text-transform: uppercase;	font-size: 14px;	padding-left: 10px;	margin-bottom: -5px;}.content p {	padding: 0 15px;	text-align: justify;	}.content-bottom {	width: 710px;	background: transparent url(images/content_bottom.png) no-repeat;	height: 13px;	float: left;}

Link to comment
Share on other sites

The menu_left, menu_mid and menu_right images for this menu are 70px in height, the top half white, the bottom half blue. How is this rollover currently working? How does the white half show initially and then the blue half show upon rollover? How can I get this to be transparent?I have tried eliminating the white half of the image, leaving only the blue. I've then adjusted the height of the classes by either eliminating the 35px line height, or the 32 px class height. When I do either elimination, the blue image appears upon initial viewing instead of a transparency.I don't understand this layout and code system. Can anyone explain it in simple terms?
The code makes use of CSS Sprites for the rollover. The top half of the image is shown on default, then when the user hovers over the link, the background is shifted around to show a different part, in this case a different colour.If you want to get rid of this, just remove the css where it calls in the background originally on the a tag, and the hover styles.Hope that helps :)
Link to comment
Share on other sites

The code makes use of CSS Sprites for the rollover. The top half of the image is shown on default, then when the user hovers over the link, the background is shifted around to show a different part, in this case a different colour.If you want to get rid of this, just remove the css where it calls in the background originally on the a tag, and the hover styles.Hope that helps :)
Thanks for your reply. What's a sprite? Also, which tag do I need to remove this from?
Link to comment
Share on other sites

Check out this awesome article - http://css-tricks.com/css-sprites/ for more information on spritesIf you look through the code, you will see some spans encasing the top level <a> tags. Take note of the classes and look throguh the CSS for those classes. In the styles, you will see some background styling with the names of the images on that I guess you altered before.If you remove the background attributes, then the background images will disappear, thus leaving you with no on hover style for the top level menu links.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...