1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Question about link styles in CSS...

Discussion in 'Web Design & Development' started by Hoogs, Nov 22, 2011.

Thread Status:
Not open for further replies.
Advertisement
  1. Hoogs

    Hoogs Thread Starter

    Joined:
    May 26, 2006
    Messages:
    87
    I've used CSS to split my site into two columns, the left one is my navigation bar and the right one is where the main content goes. In my stylesheet I have this to define how the navigation links look:

    li
    {
    float:none;
    }
    a:link,a:visited
    {
    display:block;
    width:150px;
    font-family:sans-serif;
    font-weight:bold;
    color:#f2f2f2;
    background-color:#29b9f2;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:none;
    margin-left:none;
    }
    a:hover
    {
    background-color:#8de0f2;
    }
    a:active
    {
    background-color:#bf064a
    }

    The problem is, whenever I create a link in the right column it ends up having the same style as the links in the left column. How can I fix this?
     
  2. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,302
    First Name:
    Colin
    You need to define how you want links to appear in each separately. So say your left div is defined as #left and your right as #right then in your code you would have

    Code:
    #left a {color:red; etc etc}
    #right a {color:green; etc etc}
    
     
  3. Hoogs

    Hoogs Thread Starter

    Joined:
    May 26, 2006
    Messages:
    87
    I'm pretty sure I tried that at one point... I'm just gonna go ahead and post my entire CSS stylesheet and hopefully someone will be kind enough to show me exactly what's wrong with it. (I know it's probably an unconventional mess, but it's functional.)

    div
    {
    border:0px solid black;
    }

    div.column
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    float:left;
    width:158px;
    height:500px;
    font-family:sans-serif;
    font-weight:bold;
    color:#262526;
    background-color:#f2f2f2;
    text-align:center;
    border:0px solid black;
    }

    div.column2
    {
    float:left;
    width:736px;
    height:500px;
    border:0px solid black;
    }

    div#footer
    {
    clear:both;
    text-align:right;
    border:0px solid black;
    height:25px;
    }

    body
    {
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
    }

    li
    {
    float:none;
    }
    a:link,a:visited
    {
    display:block;
    width:150px;
    font-family:sans-serif;
    font-weight:bold;
    color:#262526;
    background-color:#f2f2f2;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:none;
    margin-left:none;
    }
    a:hover
    {
    background-color:#262526;
    color:#f2f2f2
    }
    a:active
    {
    background-color:#bf064a
    }

    body
    {
    background-color:#262526;
    color:#f2f2f2;
    font-weight:900;
    }

    p
    {
    text-indent: 30pt;
    }
     
  4. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,302
    First Name:
    Colin
    You missed what I was saying totally you need to define the a elements by div not have a global a definition or all your a links will be the same. What you need is something like this
    Code:
    #column1
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    float:left;
    width:158px;
    height:500px;
    font-family:sans-serif;
    font-weight:bold;
    color:#262526;
    background-color:#f2f2f2;
    text-align:center;
    border:0px solid black;
    }
    
    #column2
    {
    float:left;
    width:736px;
    height:500px;
    border:0px solid black;
    }
    
    #footer
    {
    clear:both;
    text-align:right;
    border:0px solid black;
    height:25px;
    }
    
    body
    {
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
    }
    
    li
    {
    float:none;
    }
    #column1 a:link,a:visited {
    					display:block;
    					width:150px;
    					font-family:sans-serif;
    					font-weight:bold;
    					color:#262526;
    					background-color:#f2f2f2;
    					text-align:center;
    					padding:4px;
    					text-decoration:none;
    					text-transform:none;
    					margin-left:none;
    					}
    #column1 a:hover {
    				background-color:#262526;
    				color:#f2f2f2;
    				}
    #column2 a:active {
    				background-color:#111111;
    				}
    #column2 a:link,a:visited {
    					display:block;
    					width:150px;
    					font-family:sans-serif;
    					font-weight:bold;
    					color:#111111;
    					background-color:#ffffff;
    					text-align:center;
    					padding:4px;
    					text-decoration:none;
    					text-transform:none;
    					margin-left:none;
    					}
    #column2 a:hover {
    				background-color:red;
    				color:black;
    				}
    #column1 a:active {
    				background-color:green;
    				}
    					
    body
    {
    background-color:#262526;
    color:#f2f2f2;
    font-weight:900;
    }
    
    p
    {
    text-indent: 30pt;
    }
    
    you need to adjust the #column2 element definitions to suit how you want the a links displayed there
     
As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1028054

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice