Welcome to WebmasterWorld Guest from 54.80.97.221

Forum Moderators: not2easy

Message Too Old, No Replies

Horizontal menu and different color + images

     
8:39 am on Jun 30, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 1, 2005
posts:109
votes: 0


how can creat css for this...

added

¦ Home ¦ Contact ¦ About ¦

3 different images, text for 'Home' different color

[edited by: SuzyUK at 11:05 am (utc) on June 30, 2007]
[edit reason] No images/samples per guidelines [WebmasterWorld.com] [/edit]

8:56 am on June 30, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts:2248
votes: 49


First, welcome to WebmasterWorld. Just so you know, you can't post URL's (see TOS) That said, what you want to do is fairly easy.

First, of course, you need three images, let's say home.jpg, contact.jpg, and page.jpg. Then you have to create a style sheet. Of course, the specifics of the style would be adjusted to your site.

ul { display:inline; padding; 2px; font-family:arial,sans-serif;text-align:center;border: thin solid #000;}
li.home { background: url(home.jpg; color:#F00;}
li.page { background: url(page.jpg; color:#000;}
li.contact { background: url(contact.jpg; color:#000;}

Then the HTML
<ul>
<li class=”home”>Link Text</li>
<li class=”page”>Link Text</li>
<li class=”contact”>Link Text</li>
</ul>

And that’s the basics.

Marshall

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members