Web Design Forum: Having problems making resizable hover in CSS - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Having problems making resizable hover in CSS

#1 User is offline   chenci 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 1
  • Joined: 09-February 12
  • Reputation: 0

Posted 09 February 2012 - 07:19 PM

Hi, i'm new here, some friends told this site has a lot of expert, so i'm here to ask how this page did the navigation bar with the dynamic hover? I'm just trying to learn how it works, not the exact design.
The only thing i could do was a static one (just like the "Home" in that page) with this code
CSS
#nav {
	width: 960px;
	height: 65px;
	margin: 0 auto;
	padding-top: 10px;
	position:relative;
	overflow:hidden;
	background: url(nav.png) no-repeat; /* the navegation bar*/
}
 
#nav ul {
   clear: left;
   float: left;
   list-style: none;
   margin: 0px;
   padding: 0px;
   position: relative;
   left: 50%;
   text-align: center;
 
}
 
#nav li {
   display:block;
   float:left;
   list-style:none;
   font-style: normal;	
   margin:0;
   padding:0;
   position:relative;
   right:50%;
   background: url(nav-divider.gif) no-repeat 0% 14px;
}
 
#nav li.first a {
	background: url(nav-left.png) left top no-repeat;
	height: 44px;
	margin:0;
	padding: 12px 10px 13px 15px;
	text-decoration: none
}
 
#nav li.first a span {
	background: url(nav-right.png) right top no-repeat;
	font-style: normal;
	padding: 12px 15px 13px 0;
}
 
#nav li.first a span2 {
	background: #d23e2c;
	height: 44px;
	padding: 12px 0 13px 0;
	font-style: normal;	
}
 
#nav li a {
	text-decoration: none;
	font-family: 'Oswald', sans-serif;
	padding:3px 10px;
	font-size: 17px;
	line-height: 44px;
	font-weight: bold;
	color: #FFFFFF;
	font-style: normal;	
	text-transform: uppercase;
}

HTML
<div id="nav">
	<ul>
	<li class="first"><a href="index.php" title=""><span><span2>Menu</span2></span></a></li>
	<li>...</li>
	</ul>
</div>

But when i use the same code to hover, it doesn't work well: if you point the cursor in the left of an menu item, it shows only nav-left.png and nav-right.png (leaving the middle in blank), only if you point the cursor in the center, you can see the complete hover.
Hope someone knows what i'm trying to explain because for me is very difficult to explain. Thanks for your time
0

#2 User is offline   Wickham 

  • Web Guru
  • View gallery
  • Group: Moderators
  • Posts: 2,876
  • Joined: 11-June 09
  • Reputation: 257
  • Gender:Male
  • Location:Salisbury UK
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 09 February 2012 - 07:38 PM

Google cssplay menus because it's much better to choose on which works and then edit it.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users