2 CSS menus in one page

[fazlionline]

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

[jlhaslip]

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

[Andrea]

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.

[fazlionline]

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

[newseed]

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.

[fazlionline]

Thanks dear friends

I did it

I am very thankful to all of you

Fazlionline

Edited February 7, 2009 by fazlionline

[fazlionline]

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