Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Rollover Help

Discussion in 'Website Design Forum:' started by wac, Nov 30, 2010.

  1. wac

    wac Senior Member

    Hey guys,
    whats peoples opinions on the best way to make a rollover for the web like the one here (http://www.goldsmiths.co.uk/) don't need a drop down menu, just a similar effect.

    many thanks
     
  2. Sunburn

    Sunburn Active Member

    You could do it with css and an image sprite, or you could do it using css(3) and specifiy a linear grad.
     
  3. Harry

    Harry Senior Member

    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>
     
  4. wac

    wac Senior Member

    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?
     
  5. Harry

    Harry Senior Member

    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.
     
  6. Sunburn

    Sunburn Active Member

    @ Harry - Your too generous mate, next your be telling me you work for £5 per hour :) hehee
     
  7. wac

    wac Senior Member

    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?
     
  8. Harry

    Harry Senior Member

    Haha, five minutes of my time is worth a nice thank-you :)

    No worries.
    As for the overflow, see: Float Clearing
     
  9. wac

    wac Senior Member

    many thanks :)
     

Share This Page