Jump to content
Stef's Coding Community
fazlionline

2 CSS menus in one page

Recommended Posts

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 by fazlionline

Share this post


Link to post
Share on other sites

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 by jlhaslip

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by fazlionline

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...