Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    simple style sheet with links

    Hey all.....this i ssimple and works once in frontpage.

    the rules is the code:
    ========================================================
    <STYLE type=text/css>

    A.os:link
    {
    FONT-SIZE: x-small; COLOR: #000000; FONT-FAMILY: monospace; TEXT-DECORATION: none
    }

    A.os:visited
    {
    FONT-SIZE: x-small; COLOR: #0000aa; FONT-FAMILY: monospace; TEXT-DECORATION: none
    }


    A.os:active
    {
    FONT-SIZE: x-small; COLOR: #0000ff; FONT-FAMILY: monospace; TEXT-DECORATION: none
    }
    A.network:link
    {
    FONT-SIZE: x-small; COLOR: #FFFFFF; FONT-FAMILY: monospace; TEXT-DECORATION: none
    }

    A.network:visited
    {
    FONT-SIZE: x-small; COLOR: #0000aa; FONT-FAMILY: monospace; TEXT-DECORATION: none
    }


    A.network:active
    {
    FONT-SIZE: x-small; COLOR: #0000ff; FONT-FAMILY: monospace; TEXT-DECORATION: none
    }

    A.drivers:link
    {
    FONT-SIZE: x-small; COLOR: #0000aa; FONT-FAMILY: monospace; TEXT-DECORATION: none
    }

    A.drivers:visited
    {
    FONT-SIZE: x-small; COLOR: #0000aa; FONT-FAMILY: monospace; TEXT-DECORATION: none
    }


    A.drivers:active
    {
    FONT-SIZE: x-small; COLOR: #FFFFFF; FONT-FAMILY: monospace; TEXT-DECORATION: none
    }

    A:hover
    {
    FONT-SIZE: x-small; COLOR: #ffffff; FONT-FAMILY: monospace; TEXT-DECORATION: none
    }


    </STYLE>
    </head>

    <body bgcolor="#616161">

    <a href="#" class="os">test1</a><br>
    <a href="#" class="network">test1</a><br>
    <a href="#" class="drivers">test1</a><br>

    ========================================================

    what I am looking for is having different link colors, but all have the same hover color. Right no there is a hover for all link classes but I'm trying to shorting the code.

    with just putting the
    a:hover

    when previewing in frontpage is works....go back to design....back to preview and it stops working.
    When trying to view in IE is never works.

    Anyone try something liek this? got any ideas?

    h

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Howdy and welcome to the forums. Glad you could make it!

    I think that if you make all the "a"s in your style sheet lowercase, this will work. The links in your source code are all lowercase, so the style sheet should be, too. But here's the answer to what I think is your question:

    Since the links all point to "#" and since the page you are on is "#," then the colors won't change because you've visited the page the links point to, resulting in the link colors being "#0000aa." Just try to point the links to a page that doesn't exist to see what happens. Change "#" to "sillypage.html" and you should see those colors happen.

    Does that do it for you? Post back with results.
    -ts
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #3
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks tsguitar2004

    I tried putting them to lowercase "a" instead of uppercase and no go.

    tried changing the link to point somehwere else "silly.html"
    and poof..the link i change the href is changing color on hover, the other two do not ( as the are still "#" )

    Thanks for the advise

    All I'm hoping to do is save on code....I do alot php coding, very little ( if any ) on the design and presentation ( table layout, css sheets, etc. )

    I know you can do
    a.test:link
    a.test:visited
    a.test:hover
    a.test:active

    there are about 7 or 8 different link classes..in which i would specify at least 3 lines of code for every class
    thats a lot of lines
    I'm hoping to just use the a:hover once.
    The links and not pointing anywhere but the same page. It is using onclick javascripts to do something when they click on it ( basically changing values in the form )
    so i need them on the same page..
    hmmmmmm.......
    hang on a sec....
    well that didn't work.....thought if i used javascript:void(0) as the link it would work but no go.

    well i think i explained it
    want the same hover for every link class will out redundent code.

    any other suggestions?

  • #4
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>46187</title>
    		<style type="text/css">
    			body	{
    				background-color:#aaa;
    			}
    			a:link	{
    				font-family:monospace;
    				text-decoration:none;
    			}
    			a:hover	{
    				color:#fff !important;
    			}
    
    			#os:link	{
    				color:#000;
    			}
    			#os:visited	{
    				color:#00a;
    			}
    			#os:active	{
    				color:#00f;
    			}
    
    			#network:link	{
    				color:#fff;
    			}
    			#network:visited	{
    				color:#00a;
    			}
    			#network:active	{
    				color:#00f;
    			}
    
    			#drivers:link,
    			#drivers:visited	{
    				color:#00a;
    			}
    			#drivers:active	{
    				color:#fff;
    			}
    		</style>
    	</head>
    	<body>
    		<ul>
    			<li><a id="os" href="/os/">OS</a></li>
    			<li><a id="network" href="/network/">Network</a></li>
    			<li><a id="drivers" href="/drivers/">Drivers</a></li>
    		</ul>
    	</body>
    </html>

  • #5
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    WOW...nice call

    That looks like it is gonna do it.....gotta go back and change everything now so I'll post back if it all works

    Thanks again

  • #6
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well oddly enough if not working in my page....it seems to cancell out everything.

    I'm just gonna leave it the way it is for now and look into your code and see why its not working right...

    thanks for tips guys.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •