PDA

View Full Version : Changed class but link stays the same


urbanrays
01-13-2009, 07:51 PM
Hi
I have changed the class of a link so I have 2 different link styles in my page the problem is that the links are still staying the same as the other links.

In the top navigation you will see the links are underlined and when you hover over them the blue box appears.

The links below them "tanning Advice" have been given a different class but the only thing that has change from the main navigation links is the text colour on a.hover

The links are as follows

www.urbanrays.co.uk/index1.htm (http://www.urbanrays.co.uk/index1.htm)
www.urbanrays.co.uk/UrbanRays1.css (http://www.urbanrays.co.uk/UrbanRays1.css)

Could someone please tell me what school boy error I have done this time

Thanks for all your help guys & gals

coloeagle
01-13-2009, 08:04 PM
Bets thing I can tell you for now is to take a read of this tutorial.
Multiple Link Styles (http://www.dreamweaverclub.com/css-multiple-link-styles.php)

Corrosive
01-13-2009, 08:53 PM
Bets thing I can tell you for now is to take a read of this tutorial.
Multiple Link Styles (http://www.dreamweaverclub.com/css-multiple-link-styles.php)

I agree mate read the tutorial Colo did. It's very good. Your schoolboy error is this...

a.urbanlarge:link

should be

.urbanlarge a:link

class first and then the link info.

urbanrays
01-14-2009, 08:47 AM
I agree mate read the tutorial Colo did. It's very good. Your schoolboy error is this...

a.urbanlarge:link

should be

.urbanlarge a:link

class first and then the link info.


Hi guys

Already tried this way and also tried #urbanlarge a:link, know that really shouldnt make a difference but still no joy still have the same links as in main nav

Cheers

urbanrays
01-14-2009, 09:05 AM
Should of told you I tried these ways before posting here is the code to see if I have got <div>lexia again

HTML
<div id="navigation">
<div id="main_navigation">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
</ul>
</div>
<div id="tanning_advice">
<h3>Tanning Advice</h3>
<ul>
<li><a href="index.htm" class="urbanlarge">Home</a></li>
<li><a href="index.htm" class="urbanlarge">Home</a></li>
<li><a href="index.htm" class="urbanlarge">Home</a></li>
</ul>
</div>

and CSS

a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
display: block;
width: 170px;
}
a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
display: block;
width: 170px;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-decoration: none;
display: block;
width: 170px;
background-color: #51848c;
}
a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
display: block;
border-bottom: 1px solid #FFFFFF;
width: 170px;
}
.urbanlarge:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}
.urbanlarge:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}
.urbanlarge:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #51848c;
text-decoration: none;
}
.urbanlarge:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}
i have also tried using .urbanlarge a:active but the tutorial says to leave the "a's" out

Hope this helps

Corrosive
01-14-2009, 10:07 AM
Should of told you I tried these ways before posting here is the code to see if I have got <div>lexia again

HTML
<div id="navigation">
<div id="main_navigation">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
</ul>
</div>
<div id="tanning_advice">
<h3>Tanning Advice</h3>
<ul>
<li><a href="index.htm" class="urbanlarge">Home</a></li>
<li><a href="index.htm" class="urbanlarge">Home</a></li>
<li><a href="index.htm" class="urbanlarge">Home</a></li>
</ul>
</div>

and CSS

a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
display: block;
width: 170px;
}
a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
display: block;
width: 170px;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-decoration: none;
display: block;
width: 170px;
background-color: #51848c;
}
a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
display: block;
border-bottom: 1px solid #FFFFFF;
width: 170px;
}
.urbanlarge:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}
.urbanlarge:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}
.urbanlarge:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #51848c;
text-decoration: none;
}
.urbanlarge:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}
i have also tried using .urbanlarge a:active but the tutorial says to leave the "a's" out

Hope this helps

Hi mate. Please wrap code in code tags when you post.

I would tend to leave the 'a' in but Colo knows what he is talking about. Instead of giving each li tag a class have you tried applying the class to the ul tag? I.e.
<ul class="urbanlarge">
<li><a href="index.htm">Home</a></li>
</ul>


That is the way I would do it.

urbanrays
01-14-2009, 10:19 AM
Morning Corrosive,yes tried this, I have just this second managed to cure the fault but I feel there is something conflicting because I have had to use this as my code to make it work

.urbanlarge:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #51848c;
text-decoration: none;
border: none;
background-color: #000000;

Basically putting negatives on the border and the hover bgd colour the same as my main bgd colour.I didnt think I would have to do this when setting up a seperate class I thought this would just work on its own not having to put the negative values in to override what the links were doing anyway. But haho it works.

Corrosive
01-14-2009, 10:27 AM
Morning Corrosive,yes tried this, I have just this second managed to cure the fault but I feel there is something conflicting because I have had to use this as my code to make it work

.urbanlarge:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #51848c;
text-decoration: none;
border: none;
background-color: #000000;

Basically putting negatives on the border and the hover bgd colour the same as my main bgd colour.I didnt think I would have to do this when setting up a seperate class I thought this would just work on its own not having to put the negative values in to override what the links were doing anyway. But haho it works.

You shouldn't need to do that. You might want to continue to have a play with this.

urbanrays
01-14-2009, 10:49 AM
I would tend to leave the 'a' in but Colo knows what he is talking about. Instead of giving each li tag a class have you tried applying the class to the ul tag? I.e.
<ul class="urbanlarge">
<li><a href="index.htm">Home</a></li>
</ul>


That is the way I would do it.[/quote]

Funny you should say that mate but I looked at your site and did it the way you would mate but sorry to say this didnt work either.
God knows what I have done again,
do you think it could be anything to do with my navigation
<div>#navigation
<div>main_nav ul and li sits here</div> (this is where my top nav buttons sit)
<div>tanning_advice ul and li sits here</div>(this is where the problem links sit)
</div>(end of #navigation)

Corrosive
01-14-2009, 11:13 AM
I would tend to leave the 'a' in but Colo knows what he is talking about. Instead of giving each li tag a class have you tried applying the class to the ul tag? I.e.
<ul class="urbanlarge">
<li><a href="index.htm">Home</a></li>
</ul>


That is the way I would do it.

Funny you should say that mate but I looked at your site and did it the way you would mate but sorry to say this didnt work either.
God knows what I have done again,
do you think it could be anything to do with my navigation
<div>#navigation
<div>main_nav ul and li sits here</div> (this is where my top nav buttons sit)
<div>tanning_advice ul and li sits here</div>(this is where the problem links sit)
</div>(end of #navigation)[/QUOTE]

Have you got this live anywhere mate?

urbanrays
01-14-2009, 11:31 AM
Yes mate just put it up

www.urbanrays.co.uk/index1.htm (http://www.urbanrays.co.uk/index1.htm)

Cheers

Corrosive
01-14-2009, 12:11 PM
Yes mate just put it up

www.urbanrays.co.uk/index1.htm (http://www.urbanrays.co.uk/index1.htm)

Cheers

You have a bad case of divitis and your code is more complicated than it needs to be. In fact main_navigation has no styles at all, so why use it?

If you are calling your left column 'navigation' the only things that need to be in there are the list items with the <ul> tag styled how you want it by class or id and your <hx> tags for the headers.

Suggest you start from scratch again and think logically about keeping your code and styles to an absolute minimum. If you use a div then you need to understand why you are using it and, if it serves no purpose, leave it out.

This is the code from the clearwater site with the left nav.

<div id="left_column">
<ul id="nav">
<li><a href="index.htm">Home Page</a></li>
<li><a href="business_support.htm">Business Support</a></li>
<li><a href="home_computing.htm">Home Computing </a></li>
<li><a href="callouts.htm">24/7 Callouts</a></li>
<li><a href="faqs_prices.htm">FAQs &amp; Pricing</a></li>
<li><a href="contact.htm">Contact Us</a></li>
<li><a href="#">Download Flyer</a></li>
<li><a href="links.htm">Links</a></li>
</ul>

See how the ul just sits in the left column and is styled by using an id. The only reason I used an extra positioning div on the Rock4Success page is to force the nav (displayed inline) to do something 'un-natural' I.e. spread out over two lines. More logic, less code :wink:

coloeagle
01-14-2009, 01:56 PM
I don't mean to possibly add more confusion to you, however, if you want to keep the main "navigation" div and have the other div's (main_navigation and tanning_advice) and if what Corrosive has is confusing to you. You can style the ul li links for the specific div.

Example the css;

#main_navigation ul li a:link {text-decoration:none; color:#???; background:#???;}
#main_navigation ul li a:visited {text-decoration:none; color:#???; background:#???;}
#main_navigation ul li a:hover, #navigation ul li a:focus {text-decoration:none; color:#???; background:#???;}
#main_navigation ul li a:active {text-decoration:none; color:#???; background:#???;}You can then leave the html ul list as you have it now;
<div id="navigation">
<div id="main_navigation">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
</ul>
</div>
Then create another set of similar styling rules for the tanning_advice div.

And to add to "more logic, less code", when you start and maintain a logical approach it's easier to go back and understand why you done it the way you did. Also helps those that may follow/add to/ or modify your original work.

urbanrays
01-14-2009, 02:00 PM
tell me if I have this straight on my page I have #navigation and sitting in this is #main_navigation, #tanning_advice #tanning_creams and #tanning_news.

Are you saying just put all the links into one big <ul><li> If so how do I manipulate the #main_navigation, #tanning_advice #tanning_creams and #tanning_news all to be different text styles or do I change these to
.tanning_advice etc and use the class

and then try again with the text and call this .tanning_advice a:link

Cheers for the help Corrosive speak soon

coloeagle
01-14-2009, 02:05 PM
Are you saying just put all the links into one big <ul><li>

NO, if you do this then all the links will follow the same styling rules.

You will need to create a different set of styling rules for each div. ID or class doesn't matter.

coloeagle
01-14-2009, 02:14 PM
What Corrosive is saying (correct me if I'm wrong C) is that you can reduce the number of div's you have by placing the id inside the ul tag.
Currently,
<div id="navigation">
<div id="main_navigation">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
</ul>
</div>
<div id="tanning_advice">
<h3>Tanning Advice</h3>
<ul>
<li><a href="index.htm" class="urbanlarge">Home</a></li>
<li><a href="index.htm" class="urbanlarge">Home</a></li>
<li><a href="index.htm" class="urbanlarge">Home</a></li>
</ul>
</div>Can be reduced down to;
<div id="navigation">
<ul id="main_navigation">
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
<li><a href="index.htm">Home</a></li>
</ul>
<h3>Tanning Advice</h3>
<ul id="tanning_advice">
<li><a href="index.htm" class="urbanlarge">Home</a></li>
<li><a href="index.htm" class="urbanlarge">Home</a></li>
<li><a href="index.htm" class="urbanlarge">Home</a></li>
</ul>
</div>

Corrosive
01-14-2009, 02:15 PM
tell me if I have this straight on my page I have #navigation and sitting in this is #main_navigation, #tanning_advice #tanning_creams and #tanning_news.

Are you saying just put all the links into one big <ul><li> If so how do I manipulate the #main_navigation, #tanning_advice #tanning_creams and #tanning_news all to be different text styles or do I change these to
.tanning_advice etc and use the class

and then try again with the text and call this .tanning_advice a:link

Cheers for the help Corrosive speak soon

Sorry mate. We've probably really confused you. Problem is that there is more than one way to skin a cat and we probably all use a slightly different approach. All I was trying to say is that you can position and style any kind of tag using CSS. Don't think that just because it is a pre-defined tag you have to stick it in another div to get the positioning you want. This leads to bloated code. It's about figuring out the 'skinny' way to get what you need...minimal code.

Corrosive
01-14-2009, 02:16 PM
What Corrosive is saying (correct me if I'm wrong C) is that you can reduce the number of div's you have by placing the id inside the ul tag.

Nope, that is spot on Colo (see above) that is exactly what I am trying to say (but probably badly :( )

coloeagle
01-14-2009, 02:21 PM
Then in your style sheet you still need to create the different style rules for each id;
written a little different from above;
ul#main_navigation li a:link {text-decoration:none; color:#???; background:#???;}
ul#main_navigation li a:visited {text-decoration:none; color:#???; background:#???;
}
ul#main_navigation li a:hover, ul#main_navigation li a:focus {text-decoration:none; color:#???; background:#???;
}
ul#main_navigation li a:active {text-decoration:none; color:#???; background:#???;
}

urbanrays
01-14-2009, 02:30 PM
no not confused me at all its good to get 2 peoples ways of skinning a cat mate "Knowledge is Power" but then again "Power is nothing without Control"

I fully understand where I am going wrong now and see why I am having so many different issues I am trying to line up so many div tags no wonder everthing goes wrong

Thanks Col and Corrosive will start again and try your method

coloeagle
01-14-2009, 02:33 PM
I fully understand where I am going wrong now and see why I am having so many different issues I am trying to line up so many div tags no wonder everthing goes wrong
:-D
Yup, a common human mistake --- try adding to correct something when removing something is the answer.

urbanrays
01-14-2009, 05:39 PM
Right her we go again chaps, I have started again and the complete html is here
<body>
<div id="container">
<h1>Urban Rays</h1>
<h2>Tanning Studio</h2>
<h3>Helping you go brown without going into the Red</h3>
<div id="navigation">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="about_us.htm">About Us</a></li>
<li><a href="index.htm">Tanning Advice</a></li>
<li><a href="index.htm">Tanning Products</a></li>
<li><a href="index.htm">Sunbeds</a></li>
<li><a href="index.htm">Prices</a></li>
<li><a href="index.htm">Special Offers</a></li>
<li><a href="index.htm">Online Store</a></li>
<li><a href="index.htm">Contact Us</a></li>
<li><a href="index.htm">Links</a></li>
</ul>
<h4>Tanning Advice</h4>
<ul id="navigation_lower">
<li><a href="skin_type.htm">Skin Type Guide</a></li>
<li><a href="sunbed_advice.htm">Sunbed Advice</a></li>
<li><a href="eye_care.htm.htm">Eye Care Advice</a></li>
</ul>
</div>
</div>

and the css is here
body {
background-color: #000000;
}
h1 {
font-family: "Century Gothic";
font-size: 50px;
color: #FFFFFF;
text-decoration: none;
}
h2 {
font-family: "Century Gothic";
font-size: 32px;
color: #FFFFFF;
text-decoration: none;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
text-decoration: none;
}
h5 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
}
ul {
list-style-image: none;
list-style-type: none;
padding: 0px;
width: 170px;
margin: 0px;
}
li {
display: block;
list-style-image: none;
list-style-type: none;
}
a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
display: block;
width: 170px;
}
a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
display: block;
width: 170px;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-decoration: none;
display: block;
width: 170px;
background-color: #51848c;
}
a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
display: block;
border-bottom: 1px solid #FFFFFF;
width: 170px;
}
ul#navigation_lower li a:link {
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
ul#navigation_lower li a:visited {
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
ul#navigation_lower li a:hover, ul#navigation_lower li a:focus {
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #00FFFF;
}
ul#navigation_lower li a:active {
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
#container {
margin-right: auto;
margin-left: auto;
border: 1px solid #FFFFFF;
}
#navigation {
float: left;
}

and guess what the text for #navigation_lower is doing exactly the same as earlier lines have appeared underneath......

Really cant see what I am doing wrong here

coloeagle
01-14-2009, 09:53 PM
Your getting there. You need to remove the border from the navigation_lower ul
ul#navigation_lower li a {border:0;}
If you want the hover background to be different, or no color change you will also need to declare this.

urbanrays
01-14-2009, 10:17 PM
The reason I never put border:0 coloeagle is that I thought it was causing a conflict in the page i thought if I had to put negatives to make a positive there is something wrong.

coloeagle
01-14-2009, 10:19 PM
With certain style setups you are correct. In this case you will be ok.