Norman Posted March 6, 2007 Share Posted March 6, 2007 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 More sharing options...
roondog Posted March 6, 2007 Share Posted March 6, 2007 do you mean like this? Link to comment Share on other sites More sharing options...
Norman Posted March 6, 2007 Author Share Posted March 6, 2007 Yes, but little. I need to put it here: Link to comment Share on other sites More sharing options...
roondog Posted March 6, 2007 Share Posted March 6, 2007 <!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 More sharing options...
Norman Posted March 6, 2007 Author Share Posted March 6, 2007 Really thanks man!But one question: if I have another unordered list in my page.. ? Link to comment Share on other sites More sharing options...
roondog Posted March 6, 2007 Share Posted March 6, 2007 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 More sharing options...
Norman Posted March 6, 2007 Author Share Posted March 6, 2007 Now I get this:And I want something like this:(I'm not a good designer, no. Lol.)However, man, really thanks again for your help! Link to comment Share on other sites More sharing options...
jlhaslip Posted March 6, 2007 Share Posted March 6, 2007 Post a link to the page on a server or post the code here. Link to comment Share on other sites More sharing options...
roondog Posted March 6, 2007 Share Posted March 6, 2007 just reduce the widths in the a{} Link to comment Share on other sites More sharing options...
Norman Posted March 6, 2007 Author Share Posted March 6, 2007 Thanks. Link to comment Share on other sites More sharing options...
Norman Posted March 7, 2007 Author Share Posted March 7, 2007 Ok, this is what I want right now:Now I have this:Here 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 More sharing options...
Norman Posted March 8, 2007 Author Share Posted March 8, 2007 Hey, please, can you help me? Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now