Css Single Navigation
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Css Single Navigation

  • 275 views
Uploaded 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......

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
275
On Slideshare
275
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
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