Your SlideShare is downloading. ×
Css Single Navigation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Css Single Navigation

181

Published on

Register domain names and web domains - Hostgee.com offers domain name registration and is a top web hosting provider. Our professional website design and hosting services ensure quality solutions for …

Register domain names and web domains - Hostgee.com offers domain name registration and is a top web hosting provider. Our professional website design and hosting services ensure quality solutions for your business.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
181
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Create super fast navigation with a single image & CSS This tutorial will show you how create roll over navigation for your website using CSS and a single image so there’s no loading times for the rollover states, resulting in smoother transitions. The trick to creating a seamless rollover is to have both the normal and hover (Rollover) states in a single image and then use CSS to move the image accordingly. HTML Code: (This goes between your <body> </body> tags) <div id=”navigation”> <ul> <li class=”navhome”><a href=”#” mce_href=”#”>Homepage</a></li> <li class=”navhosting”><a href=”#” mce_href=”#”>Hosting Packages</a></li> <li class=”navcontact”><a href=”#” mce_href=”#”>Contact Us</a></li> </ul> </div> Stylesheet Code: #navigation ul { width: 333px; height: 27px; background: url(navigation.gif) no-repeat 0 0; list-style: none; padding: 0; margin: 0 auto; } #navigation li { display: inline; } #navigation li a:link, #navigation li a:visited { display: block; text-indent: -7000px; outline: none; height: 27px; width: 100px; float: left; } #navigation li.navhome a:hover { background: url(navigation.gif) no-repeat 0 -27px; } #navigation li.navhosting a:hover { background: url(navigation.gif) no-repeat -100px -27px; } #navigation li.navcontact a:hover { background: url(navigation.gif) no-repeat -200px -27px; } You can download all these files here: http://www.hostgee.com/blog/HI_Tutorial_Navigation.zip Page 1

×