a:link, active, hover, visited....

[mcdanielnc89]

Okay, I don't know that it's for this but I think it is. I am wanting to change the color of the word when i'm on that page.. like say i hover over the word forums and it loads the page, I want it to change the color to the hover color and so on. lol.. I hope i explained this good enough.

How do I do that? lol...

[karinne]

I don't get it ... but ... did you look at the CSS Beginner FAQ? There's one on How do I change the color of my links?

[mcdanielnc89]

yes i did look there but didn't find anything.


this is what i'm wanting to do WHEN the page is on monthlysignin

i want it like this
likethis.jpg



not liek this:
notlikethis.jpg

[Marc]

You will need to create a .current class or whatever you want to call it...

[mcdanielnc89]

so in my html i'll put class="current"

and my css would be like...

Code: Select all

a.current {
  background-color: #ffffff;
 color: #000000;
 text-decoration: none;
  padding: 0px 0px 1px 20px;
}

[karinne]

Well ... is that one hover or when you are on THAT page and you want that style?

[mcdanielnc89]

when im on that page i want THAT style, lol.

[AdRock]

Would it not be the active link that you need to add properties for seeing as that link is active

[mcdanielnc89]

I tried that AdRock. lol.. I jsut dunno haha.... I tried it but it didn't work'


And I need to speak with you as well hehe.. So if you get free IM me please, lol.

[AdRock]

Actually, i don't know why i suggested that becuase it will only change while you hold the link down

[Monie]

Originally Posted by mcdanielnc89

when im on that page i want THAT style, lol.

This is not related to hover, active visited or what ever.
I have done this king of technique in my page not long ago, but I can't host it because, mmm... time consuming.

I'll guide you through it tho,

Let's make this clear..
In every page that you visited, you want the menu to have a special different king of color, am I right?

Your CSS:

Code: Select all

.selected a { 
    display: block;
    text-decoration: none;
    font: small verdana; 
    font-size: 12px;
    color: #99cc33;
    margin: 0; 
    padding: 0;
    width: 100%;
    height: 100%;
    background: #000; /* Make the button black for selected page */
}
.nonselected a {
    your default setting all your button color, font, etc..
}

Code: Select all

(home.asp page)
<div class="selected"><a href="default.asp">Home</a></div>
<div iclass="notselected"><a href="aboutme.asp">About Us</a></div>
<div class="notselected"><a href="#">Monthly Sign-In</a></div>
<div class="notselected"><a href="#">Forums</a></div>

Code: Select all

(aboutUs.asp page)
<div class="notselected"><a href="default.asp">Home</a></div>
<div class="selected"><a href="aboutUs.asp">About Us</a></div>
<div class="notselected"><a href="#">Monthly Sign-In</a></div>
<div class="notselected"><a href="#">Forums</a></div>

there you go...

[mcdanielnc89]

hmm nice. I owe u big time, lol..

[Monie]

Originally Posted by Marc

You will need to create a .current class or whatever you want to call it...

Marc "saw" it first, lol.

[mcdanielnc89]

Hmm, I'm now back to working on this problem, lol..

my CSS is

HTML: Select all

.selected a { 
    display: block;
    text-decoration: underline;
    font-family: Arial, Verdana, sans-serif; 
    font-size: 10pt;
    color: #ffffff;
    margin: 0; 
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* Make the button black for selected page */
}
.nonselected a {
    your default setting all your button color, font, etc..
}

them my html is

HTML: Select all

      <ul id="menu">
   <div class="selected"><li><a href="index.php" class="current">Home</a></li></div>
   <div class="notselected"><li><a href="index.php?page=aboutus" class="current">About Us</a></li></div>
   <div class="notselected"><li><a href="index.php?page=signin">Monthly Sign-in</a></li></div>
   <div class="notselected"><li><a href="index.php?page=statementoffaith">Statement of Faith</a></li></div>
   <div class="notselected"><li><a href="http://www.forums.newbreedjesusfreaks.com">Forums</a></li></div>
   <div class="notselected"><li><a href="index.php?page=rules">Rules</a></li></div>
   <div class="notselected"><li><a href="http://www.chat.newbreedjesusfreaks.com">Chatroom</a></li></div>
   <div class="notselected"><li><a href="index.php?page=downloads">Downloads</a></li></div>
   <div class="notselected"><li><a href="index.php?page=requests">Requests</a></li></div>
   <div class="notselected"><li><a href="index.php?page=tencommandments">Ten Commandments</a></li></div>
   <div class="notselected"><li><a href="#">Pictures</a></li></div>
   <div class="notselected"><li><a href="index.php?page=staff">Staff</a></li></div>
   <div class="notselected"><li><a href="index.php?page=memberofthemonth">Member of the Month</a></li></div>
   <div class="notselected"><li><a href="index.php?page=puritypledge">Purity Pledge</a></li></div>
   <div class="notselected"><li><a href="index.php?page=links">Links</a></li></div>
   <div class="notselected"><li><a href="index.php?page=search">Search</a></li></div>
   <div class="notselected"><li><a href="index.php?page=donate">Support Us</a></li></div>
   <div class="notselected"><li><a href="index.php?page=contactus">Contact Us</a></li></div>
      </ul>

I don't rightfully understand this. lol.. if i click another page it doe snothing. only home is selected.. what exactly must I do.. i hope it's not what I'm thinking cuz that would take ages, lol.

[motormaniac]

yes, you have to go into every page and write the selcted class on the link you want selected.

[Stuart]

motormaniac is right, on every page the .selected class needs to be applied to the corresponding link. But, as I was looking through your html, I noticed that you have only one page - index.php, and the content is determined by ?page=NameOfPage. This means that the .selected class won't work! You need a separate page for each link to make all of this work... Am I making sense? Point is, the way you have it set up will fail.

Cheers,
SWagner

[mcdanielnc89]

No possible way to do it the way mine is set up?

[Marc]

You could do it with PHP...

On the index.php?page=aboutUs you would have this:

PHP: Select all

<?php
// tell the php what page it is!
$page = "aboutus";
?>

and on the menu include put somthing like this for your menu:

PHP: Select all

<li><a href="index.php?page=aboutus" class="<?php if(page == "aboutus") {print "current";} ?>">About Us</a></li>

I dont know if that will work but it is just off the top of my head. Just an idea

[mcdanielnc89]

mmk, I kind of see how it's going with the php, but one thing... How wouddl i get it to show that it's on the current page? Like that above would just be getting it to work. No style or anything is applied to it. That's the only thing I'm not understanding how i would do it. (If need be i can explain more,(try to anyhow).

[Marc]

You will need to create a .current {} in your css.....