Question about link styles in CSS...

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

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?
 

colinsp

Colin
Joined
Sep 5, 2007
Messages
2,355
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}
 

Hoogs

Thread Starter
Joined
May 26, 2006
Messages
87
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}
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;
}
 

colinsp

Colin
Joined
Sep 5, 2007
Messages
2,355
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
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

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 807,865 other people just like you!

Latest posts

Members online

Top