MCE_MAN Posted December 2, 2005 Share Posted December 2, 2005 Hi all,I want to use the horizontal menu on my site as shown here:http://www.w3schools.com/css/tryit.asp?fil...e=trycss_float5I am quite new to css so i was hoping you might be able to help.What i want is to have a horizontal menu like in the tutorial above, but i also want to have a vertical menu on the same page. I want the same menu style on both horizontal and vertical menus.I have succeeded in doing both ways on their own but i dont know how to apply 2 different styles on the same page. Is this possible? MCE_MAN Link to comment Share on other sites More sharing options...
Chocolate570 Posted December 2, 2005 Share Posted December 2, 2005 Kinda like this too? <html><head><style type="text/css">ul{float:top;width:100%;padding:0;margin:0;list-style-type:none;}a{float:top;width:6em;text-decoration:none;color:white;background-color:purple;padding:0.2em 0.6em;border-right:1px solid white;}a:hover {background-color:#ff3300}li {)</style></head><body><ul><li><a href="#">Link one</a></li><br><li><a href="#">Link two</a></li><br><li><a href="#">Link three</a></li><br><li><a href="#">Link four</a></li></ul></body></html> Link to comment Share on other sites More sharing options...
MCE_MAN Posted December 2, 2005 Author Share Posted December 2, 2005 maybe i wasnt clear what i wanted.I want 2 menu's1 that goes horizontal1 that goes verticalcan you help? Link to comment Share on other sites More sharing options...
Mimika Posted December 2, 2005 Share Posted December 2, 2005 I just played around with that link heheand did this version well i think some other person with more experiance could give a better solution <html><head><style type="text/css">td{float:left;width:100%;padding:0;margin:0;list-style-type:none;}ul{float:left;width:100%;padding:0;margin:0;list-style-type:none;}a{float:left;width:6em;text-decoration:none;color:white;background-color:purple;padding:0.2em 0.6em;border-right:1px solid white;}a:hover {background-color:#ff3300}li {display:inline}</style></head><body><!--- Vertical meny -----><table width="115"> <tr> <td><div align="center"><a href="#">Link one</a></div></td> </tr> <tr> <td><div align="center"><a href="#">Link one</a></div></td> </tr> <tr> <td><div align="center"><a href="#">Link one</a></div></td> </tr> <tr> <td><div align="center"><a href="#">Link one</a></div></td> </tr> <tr> <td><div align="center"><a href="#">Link one</a></div></td> </tr></table><br><!--- horosontal meny -----><ul><li><a href="#">Link one</a></li><li><a href="#">Link two</a></li><li><a href="#">Link three</a></li><li><a href="#">Link four</a></li></ul></body></html> copy and paste this hole code and replace the old one Link to comment Share on other sites More sharing options...
MCE_MAN Posted December 2, 2005 Author Share Posted December 2, 2005 thanks Link to comment Share on other sites More sharing options...
Guest benniecurtis Posted December 4, 2005 Share Posted December 4, 2005 Are you sure you need two menus with identical content? Sometimes, too much repetition of a page feature can confuse the visitor. How does one decide which menu to use?Also, the extra menu uses valuable real estate that could be used for another feature. Link to comment Share on other sites More sharing options...
F-Man Posted December 4, 2005 Share Posted December 4, 2005 ul#main{padding:0;margin:0;list-style-type:none;width: 10em;}ul#main a{display: block;text-decoration:none;color:white;background-color:purple;padding:0.2em 0.6em;width: 100%;}ul#second{float:left;width:100%;padding:0;margin:0;list-style-type:none;}ul#second a{float:left;width:10em;text-decoration:none;color:white;background-color:purple;padding:0.2em 0.6em;border-right:1px solid white;}ul#main a:hover, ul#second a:hover {background-color:#ff3300}ul#main li, ul#second li {display:inline} <ul id="main"><li><a href="#">Link one</a></li><li><a href="#">Link two</a></li><li><a href="#">Link three</a></li><li><a href="#">Link four</a></li></ul><ul id="second"><li><a href="#">Link one</a></li><li><a href="#">Link two</a></li><li><a href="#">Link three</a></li><li><a href="#">Link four</a></li></ul> Hope this helped. Feel free to change the ID names. 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