• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Rollover Help


Harry

Senior Member
#3
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Nav</title>
	
	<style>
		
		body{
			font-family:Calibri, Arial, Verdana, sans-serif;
		}
		#nav{
			list-style:none;
			padding:0;
			margin:0 0 20px 0;
			width:100%;
			overflow:hidden;
			background:#da1b43;
			background:-moz-linear-gradient(-90deg, #f43059, #da1b43);
			background:-webkit-gradient(linear, left top, left bottom, from(#f43059), to(#da1b43));
		}
		#nav li{
			float:left;
		}
		#nav a{
			padding:5px;
			display:block;
			color:#fff;
			text-decoration:none;
			border-left:1px solid #ff5176;
			border-right:1px solid #b82745;
		}
		#nav a:hover{
			background:#222;
			background:-moz-linear-gradient(-90deg, #666, #222);
			background:-webkit-gradient(linear, left top, left bottom, from(#666), to(#222));
		}
		#nav li:first-of-type a{
			border-left:none;
		}
		#nav li:last-of-type a{
			border-right:none;
		}
		
	</style>
	
</head>
<body>
	
	<ul id="nav">
		<li><a href="/">Home</a></li>
		<li><a href="/about/">About</a></li>
		<li><a href="/services/">Services</a></li>
		<li><a href="/portfolio/">Portfolio</a></li>
		<li><a href="/contact/">Contact</a></li>
	</ul>
	
</body>
</html>
 

wac

Senior Member
#4
Cheers guys.

Harry that's incredibly helpful just what I was looking for, I see by the code what Geoff meant by a css gradient. Did you just whip that code up?
 

Harry

Senior Member
#5
Yup yup, coded it up of the top of my head: it should work.

Before you copy/paste though, make sure you 100% understand every single piece of it.
Any bit you don't understand just lemme know and I'll explain.
 

wac

Senior Member
#7
wow, well thanks for taking the time to do that. It all seems pretty straightforward now, I found this site (CSS3 Gradient Generator) for actually creating the grads by eye. The only thing is 'overflow:hidden' what exactly does that mean/do?
 

Harry

Senior Member
#8
Sunburn said:
@ Harry - Your too generous mate, next your be telling me you work for £5 per hour :) hehee
Haha, five minutes of my time is worth a nice thank-you :)

wac said:
wow, well thanks for taking the time to do that. It all seems pretty straightforward now, I found this site (CSS3 Gradient Generator) for actually creating the grads by eye. The only thing is 'overflow:hidden' what exactly does that mean/do?
No worries.
As for the overflow, see: Float Clearing