fazlionline Posted January 27, 2009 Report Posted January 27, 2009 (edited) Hello Dear I want to create 2 CSS menus in one page which should have different colors and mouse over effects. I tried a lot but I was failed. If I change behavior for one menu, the second get effected automatically. Can anyone help me? fazlionline Edited February 7, 2009 by fazlionline Quote
jlhaslip Posted January 27, 2009 Report Posted January 27, 2009 (edited) Add the class to the link rukes for the second set of links. I changed the a:link color to red to show how to do it. Change the rest of the information as you need to. <br /><!--<br />.second_menu<br /> {<br /> font-family: Verdana, Arial, Helvetica, sans-serif;<br /> font-size: 12px;<br /> color: #333333;<br />}<br />.second_menu a:link {<br /> text-decoration: underline;<br /> color: #ff0000;<br />}<br />.second_menu a:visited {<br /> text-decoration: underline;<br /> color: #333333;<br />}<br />.second_menu a:hover {<br /> text-decoration: none;<br /> color: #000000;<br />}<br />.second_menu a:active {<br /> text-decoration: underline;<br /> color: #333333;<br />}<br />--><br /> Edited January 27, 2009 by jlhaslip Quote
Andrea Posted January 27, 2009 Report Posted January 27, 2009 And while you're learning, consider this: Use the proper doctype - HTML or XHTML You have a second set of styles between your and your tag - that's wrong, they all belong into the head - that is, ideally, they belong into an external stylesheet. is a paragraph tag - it goes around each paragraph. Don't use s in there - they are linebreaks only and not meant to gain space. Don't use tables unless for tabular data - and navigation links are lists and should be written as such. Don't use - If you need space, add paddings or margins into your CSS. Quote
fazlionline Posted January 28, 2009 Author Report Posted January 28, 2009 (edited) Thanks jlhaslip & Thelma, i found it very usefull. but if i want to make another menu in same page with a different style, where can I write its code. & how can i separate both of tehm? fazlionline Edited January 28, 2009 by fazlionline Quote
newseed Posted January 28, 2009 Report Posted January 28, 2009 This has been explained to you but your code is not showing the changes that was given to you. You incorrectly placed class="first_menu" within a tag. It should be move to the cell of the first menu: [/b] The class="second_menu" is in the correct location and so you don't have to change anything there. You didn't even adjust the CSS to have each class name assigned to the styles that you want to adjust. In your CSS you must assign .first_menu to each of the link call out you wish to change. This is how your CSS code looks like now: .first_menu { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #CCCCCC; } a:link { text-decoration: underline; } a:visited { text-decoration: underline; color: #CCCCCC; } a:hover { text-decoration: none; color: #FFFFFF; } a:active { text-decoration: underline; color: #CCCCCC; } You need to assign .first_men to a:link, a:visited, a:hover, and a:active like this: .first_menu { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #CCCCCC; } .first_menu a:link { text-decoration: underline; } .first_menu a:visited { text-decoration: underline; color: #CCCCCC; } .first_menu a:hover { text-decoration: none; color: #FFFFFF; } .first_menu a:active { text-decoration: underline; color: #CCCCCC; } The same thing applies for the .second_menu of the CSS. Quote
fazlionline Posted January 31, 2009 Author Report Posted January 31, 2009 (edited) Thanks dear friends I did it I am very thankful to all of you Fazlionline Edited February 7, 2009 by fazlionline Quote
fazlionline Posted February 8, 2009 Author Report Posted February 8, 2009 Thanks dear you code helped me, and my work is done. now if I want to make an external css sheet only for one menu forexample for first menu so what i can wrote before and after this code in that as you know the oroginal code is .first_menu { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #CCCCCC; } .first_menu a:link { text-decoration: underline; } .first_menu a:visited { text-decoration: underline; color: #CCCCCC; } .first_menu a:hover { text-decoration: none; color: #FFFFFF; } .first_menu a:active { text-decoration: underline; color: #CCCCCC; } thanks Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.