Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    9
    Rep Power
    0

    Text links and hovers


    Hello great forum you guys got here!

    I am kinda new to CSS and need some help :S

    I have this link and I wrapped it with a plain simple box, but I also want the text to change from its default blue when I roll over it as well.

    Here is the CSS code

    Code:
    .navigation {
    			width: 160px;
    			height: 18px;
    			padding:6px 6px;
    			padding-left: 15px;
    			margin-bottom:2px;
    			font-size:10px;
    			color: #333;
    			background-color: transparent;
    			display:block
    		}
    		
    		.navigation:hover {
    			background-color: #CCC;
    		}
    I want it so that the color turns red upon hover!


    Regards & Thank you in advance!
  2. #2
  3. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Try something to this effect:
    Code:
    a:hover{
            color:red;
    }
    Cheers
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    9
    Rep Power
    0
    Originally Posted by Skipt
    Try something to this effect:
    Code:
    a:hover{
            color:red;
    }
    Cheers
    Hi no I do not want it to be a global deceleration for all links, only this particular navigation class that will make it for all links :S

    I appreciate the help though



    Regards.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2006
    Location
    IL, USA
    Posts
    584
    Rep Power
    26
    I am guessing .navigation is the class name for your link(s)?

    If so than just add the color..
    Code:
    .navigation {
    			width: 160px;
    			height: 18px;
    			padding:6px 6px;
    			padding-left: 15px;
    			margin-bottom:2px;
    			font-size:10px;
    			color: #333;
    			background-color: transparent;
    			display:block
    		}
    		
    		.navigation:hover {
    			background-color: #CCC;
                            color: #FF0000;
    		}
  8. #5
  9. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    My example was to just show you how it would be done. As the above post states, just apply a class/id in that selector to effect the elements you want to have the changed color Sorry for the confusion...

    Cheers
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    9
    Rep Power
    0
    Originally Posted by AvsH
    I am guessing .navigation is the class name for your link(s)?

    If so than just add the color..
    Code:
    .navigation {
    			width: 160px;
    			height: 18px;
    			padding:6px 6px;
    			padding-left: 15px;
    			margin-bottom:2px;
    			font-size:10px;
    			color: #333;
    			background-color: transparent;
    			display:block
    		}
    		
    		.navigation:hover {
    			background-color: #CCC;
                            color: #FF0000;
    		}
    that unfortunately doesn't work in fact that was one of the first things I did before coming here

    I also tried

    Code:
    .navigation a:hover {
    	background-color: #CCC;
    	color: red;
    }
    this how ever does work but only problem with this is it disregards the block width and height and wraps it only around the link text with a working red rollover :S

    I am appreciating all the help and Thank you for it all! but any other solution to enlighten my situation?


    Regards.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2007
    Posts
    18
    Rep Power
    0
    Please could you post all the relevant HTML and other CSS too?
  14. #8
  15. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Why not set the <a> to display:block; and use padding to make it look like it is as high and wide as its container. I did a poor job of explaining it, but if you would post a link, I'm sure I can be more in depth. But for starters, try this out:
    Code:
    .navigation a{
            display:block; /* allow box dimensions */
            padding:6px; /*makes it bigger so to speak..*/
    }
    Cheers
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    9
    Rep Power
    0
    Here is the HTML markup!

    Code:
    <span class="navigation"><a href="../test.php">Link 1</a></span>
    <span class="navigation"><a href="../test.php">Link 2</a></span>
    <span class="navigation"><a href="../test.php">Link 3</a></span>

    Skipt, sorry could you elaborate?


    Very much Thank you for all the help, I'm lovin' this place more than McDonalds now =D

    Cheers.
  18. #10
  19. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Ok, I'm going to demonstrate with code. I made a <div> 400 by 100pixels wide and tall. The <a> inside it is going to have display:block; and padding on it with a background color of red. The <div> is going to have a 1px black border. You will notice that as I hover on the link the color changes from red to blue. Check this code out:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Kansas Outlaw Wretling - "The True Outlaws Of The Midwest"</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    div{
    	width:400px;
    	height:100px;
    	border:1px solid black;
    }
    a{
    	display:block;
    	padding:40px;
    	background-color:red;
    	color:black;
    }
    a:hover{
    	background-color:blue;
    	color:white;
    }
    </style>
    </head>
    <body>
    <div>
     <a href="#">Check this out</a>
    </div>
    </body>
    </html>
    Cheers
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2007
    Posts
    18
    Rep Power
    0
    I was thinking spans may not be the best idea..
  22. #12
  23. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Why is that? You can always have it retain block qualities, either by display:block; or if you wanted, display:inline-block. Why exactly don't you think <span>'s would be the best idea here? (Not saying they are, just wondering your reasoning )
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  24. #13
  25. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2007
    Posts
    18
    Rep Power
    0
    That was a pretty unreasonable answer from me, the only reason being that it doesn't seem to be working :P
  26. #14
  27. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2006
    Location
    IL, USA
    Posts
    584
    Rep Power
    26
    I agree though the span's aren't best in this certain situation. I would only use them to change a portion of a paragraph/text. Though, if you wish you could do this instead and just use plain links

    Code:
    <a href="../test.php" class="navigation">Link 1</a>
    <a href="../test.php" class="navigation">Link 2</a>
    <a href="../test.php" class="navigation">Link 3</a>
    Code:
    a.navigation, a.navigation:link, a.navigation:visited, a.navigation:active {
        width: 160px;
        height: 18px;
        padding: 6px 0px 0px 15px;
        margin: 0px 0px 2px 0px;
        font-size: 10px;
        color: #333333;
        display: block;
    } 
    a.navigation:hover {
        background-color: #CCCCCC;
        color: #FF0000;
    }
    OH! And You forgot to put a semi-colon after the this

    Code:
     display: block
    Also, what is with the different padding values?
  28. #15
  29. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2007
    Posts
    18
    Rep Power
    0
    Is using a UL impossible?
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo