+ Reply to Thread
Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: CSS simple problem

  1. #1
    Parsa44 is offline x10 Sophmore Parsa44 is an unknown quantity at this point
    Join Date
    Aug 2008
    Posts
    232

    CSS simple problem

    I have always wanted to have some red rollover links and some green rollover links on my page i followed this guide to try and do this:

    http://www.echoecho.com/csslinks.htm


    i did exactly as it said but for some reason it doesnt work for me, here is my code:

    The problem is that the links appear already underlined, and when i roll over they are still underlined.

    Code:
    body  {
        font-size: 24px;
        font-family:  Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
        color: #FFFF00;
        background: #000000;
        margin: 0;
        padding: 0;
        text-align: left;
    }
    .SmallGreen {
        Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
        color: #00FF00;
        font-size: 20px;
        text-align; left;
    }
    .SmallGreen a:link  {
        color: #00FF00;
        text-decoration: none;
        font-size: 24px;
    }
    .SmallGreen a:visited  {
        color: #00FF00;
        text-decoration: none;
        font-size: 20px;
    }
    .SmallGreen a:hover {
        color: #00FF00;
        text-decoration: underline;
        font-size: 20px;
    }
    .SmallGreen a:active {
        color: #00FF00;
        text-decoration: none;
        font-size: 20px;
    }
    
    
    .HeaderLink {
        color: #FF0000;
        Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
        text-align: center;
        font-size:25px;
    }
    .HeaderLink a:link  {
        color: #FF0000;
        text-decoration: none;
        font-size: 25px;
    }
    .HeaderLink a:visited  {
        color: #FF0000;
        text-decoration: none;
        font-size: 25px;
    }
    .HeaderLink a:hover {
        color: #FF0000;
        text-decoration: underline;
        font-size: 25px;
    }
    .HeaderLink a:active {
            color: #FF0000;
            text-decoration: underline;
            font-size: 25px;
    }
    
    
    .Title {
        color: #FF0000;
        font-family: Algerian, Stencil, Rockwell Extra Bold, Arial Black, Times New Roman;
        font-size: 30px;
        text-align: center;
    }
    .SubTitle {
        color: #FF0000;
        Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
        text-align: center;
        font-size:25px;
        text-decoration: underline;
    }
    .Text {
        color: #FFFF00;
        Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
        font-size: 24px;
        text-align: left;
    }
    .TextCentered {
        color: #FFFF00;
        Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
        font-size: 24px;
        text-align: left;
    }
    .container { 
        width: 46em; 
        background: #000000;
        margin: 0 auto; 
        border: 1px solid #000000;
        text-align: left; 
    } 
    .header { 
        background: #000000; 
    } 
    .mainContent {
        border: 1px solid #FF0000;
        margin: 0 1.5em 0 13em;
        background: #000000;
    } 
    .navigation {
        float: left; 
        width: 12em; 
        background: #000000; 
        padding: 5px 0; 
        border: 1px solid #FF0000;
    }

  2. #2
    kbjradmin's Avatar
    kbjradmin is offline x10 Elder kbjradmin is an unknown quantity at this point
    Join Date
    Feb 2008
    Location
    Washington State, USA
    Posts
    512

    Re: CSS simple problem

    try this:

    Code:
    .SmallGreen a:link, .SmallGreen a:active, .SmallGreen a:visited{
    font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
    color: #00ff00;
    size: 24px;
    text-decoration: none;
    }
    
    .SmallGreen a:hover{
    font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
    color: #00ff00;
    size: 24px;
    text-decoration: underline;
    }

  3. #3
    Parsa44 is offline x10 Sophmore Parsa44 is an unknown quantity at this point
    Join Date
    Aug 2008
    Posts
    232

    Re: CSS simple problem

    why does hover get its own tag and the rest dont?


    btw thanks for your support i really appriciate it.
    Last edited by Parsa44; 01-27-2009 at 02:14 PM.

  4. #4
    nightscream is offline x10 Lieutenant nightscream is an unknown quantity at this point
    Join Date
    Feb 2006
    Location
    Hallaar, Belgium
    Posts
    474

    Re: CSS simple problem

    hover = while mouse is over the link.
    the rest has nothing to do with that.
    ------------------------------------------------------------------------------------------
    If you have any troubles with a website or a script, just send me a pm.

    I also code websites in xHTML/css, can code javascript and php too if needed

  5. #5
    xPlozion's Avatar
    xPlozion is offline x10 Elder xPlozion is an unknown quantity at this point
    Join Date
    Mar 2008
    Location
    Delaware, USA
    Posts
    872

    Re: CSS simple problem

    also, if :link, :active and :visited aren't used, they will get their looks from the standard a tag. i just use a and a:hover when doing links on my site.

  6. #6
    Parsa44 is offline x10 Sophmore Parsa44 is an unknown quantity at this point
    Join Date
    Aug 2008
    Posts
    232

    Re: CSS simple problem

    unfortunatley it still doesnt work, i really cannot understand where the problem is here.

    when i use:

    Code:
    body a:link  {
        color: red;
    	text-decoration: none;
    }
    body a:visited  {
    	color: red;
    	text-decoration: none;
    }
    body a:hover {
    	color: black;
    	text-decoration: none;
    	background-color: yellow;
    }
    body a:active {
            color: blue;
    		text-decoration: none;
    }
    it works fine, but that doesnt help me because i need three diffrent link hovers....
    Last edited by Parsa44; 01-27-2009 at 03:24 PM.

  7. #7
    Scoochi2's Avatar
    Scoochi2 is offline x10 Sophmore Scoochi2 is an unknown quantity at this point
    Join Date
    Aug 2008
    Location
    Southport!
    Posts
    185

    Re: CSS simple problem

    Code:
    a:hover.hovergreen {
    	color: yellow;
    }
    
    a:hover.hoverred {
    	color: red;
    }
    
    a:hover#hoverblue{
    	color: red;
    }
    Use the above snippet as a quick example of using multiple styles for the same type of element. In your HTML:
    Code:
    <a href='redpage.html' class='hoverred'>This link is red on hover.</a><br>
    <a href='greenpage.html' class='hovergreen'>This link is green on hover.</a>
    <a href='bluepage.html' id='hoverblue'>This link is blue on hover.</a><br>
    The name of the class/id is irrelevant, so long as it matches up with your markup.
    Last edited by Scoochi2; 01-27-2009 at 07:16 PM.
    If anyone can see it, my post was meant for anyone who reads it. Don't take it personally or think I'm being condescending... :nuts:

  8. #8
    Parsa44 is offline x10 Sophmore Parsa44 is an unknown quantity at this point
    Join Date
    Aug 2008
    Posts
    232

    Re: CSS simple problem

    Im still extreamly confused, how does that relate back to my problem? Shall i remove a:link a:active and a:visited?

  9. #9
    goldy300's Avatar
    goldy300 is offline x10Hosting Member goldy300 is an unknown quantity at this point
    Join Date
    Jul 2008
    Location
    Australia
    Posts
    33

    Re: CSS simple problem

    You were putting your class first and then a:hover second.

    .class a:hover{}

    Make it

    a:hover.class{}

  10. #10
    Scoochi2's Avatar
    Scoochi2 is offline x10 Sophmore Scoochi2 is an unknown quantity at this point
    Join Date
    Aug 2008
    Location
    Southport!
    Posts
    185

    Re: CSS simple problem

    Quote Originally Posted by Parsa44 View Post
    Im still extreamly confused, how does that relate back to my problem? Shall i remove a:link a:active and a:visited?
    Actually, yes. In your initial post you mentioned that you only wanted different links to be different colours when you hover on them. If you're happy with everything else staying at the defaults, the only thing you need to do is to tell it what you want to do on the hover.

    See my above post for how to do that, using classes or ids.

    (note, the 'blue id' in my previous post will make the text red because I copy pasted from the red and forgot to change the colour, you'll see why when you look at it ;))
    If anyone can see it, my post was meant for anyone who reads it. Don't take it personally or think I'm being condescending... :nuts:

+ Reply to Thread
Page 1 of 2 12 LastLast

Similar Threads

  1. A problem with certificate
    By eon01 in forum Free Hosting
    Replies: 1
    Last Post: 07-31-2008, 01:27 PM
  2. GRR! Simple problem with mysql - HELP!!
    By cursedpsp in forum Programming Help
    Replies: 6
    Last Post: 07-01-2008, 12:19 PM
  3. DB number problem
    By lionheart8 in forum Free Hosting
    Replies: 5
    Last Post: 04-08-2008, 08:26 AM
  4. Ad code problem!
    By Akkarin in forum Free Hosting
    Replies: 8
    Last Post: 08-29-2005, 10:39 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
x10hosting free hosting for the masses
dedicated servers