Jump to content

How can I do a double table CSS vertical menu?

Norman

By Norman
in CSS

 Share

Recommended Posts

Norman Member

Norman

Posted
Posted

I need something like this:

__________________|	Link	|  Link	  ||	Link	|  Link	  ||	Link	|  Link	  ||	Link	|  Link	  ||________|________|

With a hover/selected/etc configuration. How can I do this two tables?

Link to comment
Share on other sites
roondog Member

roondog

Posted
Posted 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /><style type="text/css">ul{display:inline;float:left;list-style: none;margin: 0;}ul.right{float:right;}li{margin-top:3px;}a{text-decoration: none;display: block;width: 100px;height: 25px;background-color:white;line-height: 23px;font-size: .65em;font-weight: bold;color: black;padding-left: 3px;}a:link{text-decoration:none;}a:visited{text-decoration:none;}a:hover{text-decoration:none;background-color:black;color:white;}a:active{text-decoration:none;}</style><body><ul><li><a href="#">link</a></li><li><a href="#">link</a></li><li><a href="#">link</a></li><li><a href="#">link</a></li></ul><ul class="right"><li><a href="#">link</a></li><li><a href="#">link</a></li><li><a href="#">link</a></li><li><a href="#">link</a></li></ul></body></html>

You can mess about with the heights,widths, colours etc. until its right for you.

Link to comment
Share on other sites
roondog Member

roondog

Posted
Posted

try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /><style type="text/css">ul.left{display:inline;float:left;list-style: none;margin: 0;}ul.right{float:right;display:inline;list-style: none;margin: 0;}ul.left li,ul.right li{margin-top:3px;}ul.left a,ul.right a{text-decoration: none;display: block;width: 150px;height: 25px;background-color:green;line-height: 23px;font-size: .65em;font-weight: bold;color: black;padding-left: 3px;}ul.left a:link,ul.right a:link{text-decoration:none;}ul.left a:visited,ul.right a:visited{text-decoration:none;}ul.left a:hover,ul.right a:hover{text-decoration:none;background-color:black;color:white;}ul.left a:active,ul.right a:active{text-decoration:none;}</style><body><ul class="left"><li><a href="#">link</a></li><li><a href="#">link</a></li><li><a href="#">link</a></li><li><a href="#">link</a></li></ul><ul class="right"><li><a href="#">link</a></li><li><a href="#">link</a></li><li><a href="#">link</a></li><li><a href="#">link</a></li></ul></body></html>

Link to comment
Share on other sites
Norman Member

Norman

Posted
  • Author
Posted

Ok, this is what I want right now:immaginexy9.th.jpgNow I have this:immagine2uf1.th.jpgHere the CSS (now I have this):

/* ***** Top Menu ***** */.top_menu{border-bottom: 1px solid gray;width: 90%; margin-bottom: 1em;}.top_menu ul{padding: 3px 0;margin-left: 0;margin-top: 1px;margin-bottom: 0;font: bold 12px Verdana;list-style-type: none;text-align: center; }.top_menu li{display: inline;margin: 0;}.top_menu li a{text-decoration: none;padding: 3px 7px;margin-right: 3px;border: 1px solid #778;color: #2d2b2b;background: white url(newvbstyle/menu/shade.gif) top left repeat-x;}.top_menu li a:visited{color: #2d2b2b;}.top_menu li a:hover{color: #2d2b2b;top: 1px;background-image: url(newvbstyle/menu/shadeactive.gif);border-bottom-color: white;}.top_menu li.selected{position: relative;}.top_menu li.selected a{ background-image: url(newvbstyle/menu/shadeactive.gif);border-bottom-color: white;}.top_menu li.selected a:hover{ text-decoration: none;}

Here the HTML:

<!-- Top Menu --><div class="top_menu" align="center"><ul><li class="selected"><a href="#">Home</a></li><if condition="$show['member']"><li><a href="#">$vbphrase[user_cp]</a></li></if><li><a href="#">$vbphrase[faq]</a></li><li><a href="#">$vbphrase[members_list]</a></li><li><a href="#">$vbphrase[calendar]</a></li><li><a href="#">$vbphrase[search]</a></li><if condition="$vboptions['forumleaders']"><li>			<a href="#">Forum Staff</a></li></if><if condition="$show['contactus']"><li><a href="#>$vbphrase[contact_us]</a></li></if><if condition="$show['member']"><li><a href="#>$vbphrase[log_out]</a></li></if></ul></div><!-- / Top Menu -->

Please please please, can you help me.. ?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...