Topic: CSS Question Pages that link to <a href="https://ozoneasylum.com/backlink?for=11015" title="Pages that link to Topic: CSS Question" rel="nofollow" >Topic: CSS Question\

 
Author Thread
The Jackal
Paranoid (IV) Inmate

From: The Dark Side of the Moon
Insane since: Jun 2000

IP logged posted posted 07-24-2003 17:52 Edit Quote

OK, here is the problem. My main menu has a BG color of white. I want to CSS file to make all links with a yellow background and a green background when you hover over the link. How do I do this without effecting my main menu? Basically I want the CSS file to make the hover effect skip my main menu or keep the links in my main menu with no hover effect. Is this even possible? Thanks.

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 07-24-2003 18:11 Edit Quote

Sure.
Just give the main menu and the regular links different classes in your html and then write a different style for the two different classes.
Ask more if you are confused.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 07-24-2003 18:16 Edit Quote

Rather than using a class for every single link, I suggest you structure your page like this (I wouldn't be surprised if it's already structured similarly):

<div id="menu"> <!-- needn't be a div tag, just the ID is important -->
...menu here...
</div>

<div id="content">
...content here...
</div>

Then, you can use this CSS to change only the links in the content area:

#content a:link { /* only links which are somewhere within (the element with id="content") */
...
}
#content a:hover {
...
}
etc.

Separately, you can set the menu's link color with

#menu a:link {
...
}
etc.

The Jackal
Paranoid (IV) Inmate

From: The Dark Side of the Moon
Insane since: Jun 2000

IP logged posted posted 07-24-2003 18:17 Edit Quote

An example would help. I am unfamiliar with hw to uses classes.

The Jackal
Paranoid (IV) Inmate

From: The Dark Side of the Moon
Insane since: Jun 2000

IP logged posted posted 07-24-2003 18:27 Edit Quote

Slime, thanks. That did the trick. I appriciate the help guys.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 07-24-2003 20:57 Edit Quote

Yup, Slime's method is what you would want for this particular scenario.

As far as using classes -

As opposed to an ID, which should only appear once in document (such as the above example - <div id="menu"> that ID applies to that one div, and *only* that div. It can't be used to refer to another div or other element further down the page), a CLASS can be applied to any number of elements.

Say you want certain paragraphs to have a border around them, or a larger text-size (or whatever). You define a class in your CSS -

.special-paragraph (<-- the '.' defines this in the CSS as a class)
{
border:#f00 1px solid; (<-- creates a red 1 pixel thick border for the element)
}

Then, in your HTML you specify the class as needed in the element's tag

<p class="special-paragraph">

As often as you want to, to any element (not just <p> tags).




Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu