It is currently Mon Oct 07, 2024 1:46 pm


All times are UTC


Forum rules


Please click here to view the forum rules



Post new topic Reply to topic  [ 1 post ] 
Author Message
 Post subject: Make a verticaal menu in CSS
PostPosted: Thu Aug 20, 2009 5:53 am 
Noobie
Noobie

Joined: Thu Aug 20, 2009 5:48 am
Posts: 3
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>

_________________
formation par correspondance


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 1 post ]  Moderators: fhmagic, KJ, Moderators, Support Team

All times are UTC


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
100WebSpace © 2011