Welcome Guest   ·   Login   ·   Register   ·   Member List
Forum Home  >  CSS help  >  Help with CSS  >  Thread
Search  
  
  Advanced Search
   
 
Can a rollover menu have text and graphics?
 
joneser
Posted: 19 May 2008 04:57 PM   [ Ignore ]
Newbie
Rank
Total Posts:  2
Joined  2008-05-19

Hello all!  This is my first post, so please take it easy on me…

I need a vertical rollover menu (400px by 400px) where the text changes as well as the button image behind the text.  Here’s my problem: each button has to have a unique image behind it - for both the initial state as well as the hover state.  So in this example, there are eight total images.  Can this be done?

HTML

<ul id="menu">
   <li><a href="">Item 1</a></li>
   <li><a href="">Item 2</a></li>
   <li><a href="">Item 3</a></li>
   <li><a href="">Item 4</a></li>
</ul> 

CSS that I have so far

#menu {
   list-style: none;
   padding: 0;
   margin: 0;
   border-top: 1px solid #000000;
   border-left: 1px solid #000000;
   border-right: 1px solid #000000;
   width: 400px;
}
#menu li {
   border-bottom: 1px solid #000000;
   height: 100px;
}
#menu li a:link, menu li a:visited {
   background-image:url(../images/item1.gif);
   text-decoration: none;
   color: #000000;
}
#menu li a:hover {
   background-image:url(../images/item2.gif);
   color: #cc0000;
} 

Any help would be GREATLY appreciated.  Thank you!

- Brian

Profile
 
 
vishwebdesign
Posted: 21 May 2008 12:12 PM   [ Ignore ]   [ # 1 ]
Member
Avatar
RankRankRank
Total Posts:  52
Joined  2007-11-08

If you have 4 different link interactions, you’ll need 4 ids or classes as per your tastes..

for e.g,

<ul id=“menu”>
  <li id=“link_item1”>Item 1</li>
  <li id=“link_item2”>Item 2</li>
  <li id=“link_item3”>Item 3</li>
  <li id=“link_item4”>Item 4</li>
</ul>

And after having added your general styles as above, you need to specify the styles which are specific to the items, for instance,

#menu li#link_item1 a
#menu li#link_item1 a:hover

#menu li#link_item2 a
#menu li#link_item2 a:hover

etc..

now you can have 2 different states specified for the 4 links seperately..

Profile
 
 
joneser
Posted: 21 May 2008 03:07 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  2
Joined  2008-05-19

Thank you very much for the help.  It seems so simple now that you’ve explained it!  Thanks again!

Profile
 
 
vishwebdesign
Posted: 21 May 2008 04:30 PM   [ Ignore ]   [ # 3 ]
Member
Avatar
RankRankRank
Total Posts:  52
Joined  2007-11-08

You’re welcome..

Profile
 
 
   
 
 
‹‹ a:hover (adjusting text color) not working! :(      Liquid positioning for different screen resolutions ››