Jump to content

Imagery Issue For Css Drop Down Menu

owosso

By owosso
in CSS

Recommended Posts

owosso Member

owosso

Posted
Posted

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
real_illusions Dedicated Member

real_illusions

Posted
Posted
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
owosso Member

owosso

Posted
  • Author
Posted
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
real_illusions Dedicated Member

real_illusions

Posted
Posted

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

Archived

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

Go to topic listing
×
×
  • Create New...