100 Web Space http://forum.100webspace.com/ |
|
Make a verticaal menu in CSS http://forum.100webspace.com/viewtopic.php?f=4&t=50106 |
Page 1 of 1 |
Author: | Gollimari [ Thu Aug 20, 2009 5:53 am ] |
Post subject: | Make a verticaal menu in CSS |
I have a vertical menu on my website, made in HTML and javascript. Here under I show you the whole table. How can I change (and shorten!!!) this script in CSS? I'm a beginner with CSS... Thanks for any help. In the head I have already: .menu-on { color: #ffffff; background-color: #662402; border-bottom:1px solid #ffffff;padding-left:10px } .menu-off { color: #ffffff; background-color: #D55F21; border-bottom:1px solid #ffffff;padding-left:10px } .menu-item:link { font-weight: bold; font-family: "Arial, Verdana, Helvetica, sans-serif"; font-size: 75%; color: #ffffff; text-decoration: none } .menu-item:visited { font-weight: bold; font-family: "Arial, Verdana, Helvetica, sans-serif"; font-size: 75%; color: #ffffff; text-decoration: none } .menu-item:hover { font-weight: bold; font-family: "Arial, Verdana, Helvetica, sans-serif"; font-size: 75%; color: #ffffff; text-decoration: none } in the body For the mouse-over of the items I still use javascript, as you can see. How can I make it all in CSS? <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td height="20" width="100%" bgcolor="#919888" class="menu-off" onMouseOver="javascript:this.className='menu-on';" onMouseOut="javascript:this.className='menu-off';"><a href="index.html" class="menu-item">Startpagina</a></td></tr> <tr><td height="50" align="left" valign="middle" bgcolor="#919888" style="border-bottom:1px solid #ffffff;"><img src="closeup4.jpg" alt="Moorslede 1269-1578" width="100%" height="50" border="0"></td></tr> <tr><td height="20" width="100%" bgcolor="#919888" class="menu-off" onMouseOver="javascript:this.className='menu-on';" onMouseOut="javascript:this.className='menu-off';"><a href="situering.html" class="menu-item">Gasthuis - geografische ligging</a></td></tr> <tr><td height="20" width="100%" bgcolor="#919888" class="menu-off" onMouseOver="javascript:this.className='menu-on';" onMouseOut="javascript:this.className='menu-off';"><a href="oudekaarten.html" class="menu-item">Ten Bunderen op oude kaarten</a></td></tr> </table> |
Page 1 of 1 | All times are UTC |
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group http://www.phpbb.com/ |