19 replies [Last post]
ITWeb
ITWeb's picture
Offline
Regular
Last seen: 14 years 44 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

Question...

How can you get a block of links to have different link colors from the overall settings.

Seems the settings in my submenu div work only half the time.

IT

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 15 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Different Link Colors from the Page Settings

You should use IDs and descendant selectors, but your last line intrigued me Laughing out loud

Show us the code that you're using, there may be a conflict further down.

Verschwindende wrote:
  • CSS doesn't make pies

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 14 years 44 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

Different Link Colors from the Page Settings

OK, will post the template page to ITWeb later. Will post link and code here.

thanks...

IT

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 14 years 44 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

Different Link Colors from the Page Settings

Happy TurKEY DAy !! Smile

I've posted a demo of the faulty working top menu.
They seem to work correctly in firefox but not IE.
Again page links are one color, menu buttons are supposed to be white link/hover/active as the background graphic show on hover instead.

I may also not be using <div> .class and #class correctly as I am for sure a newbie at CSS! Am converting table site to CSS - it's tough the first time.

http://www.itweb.com/test/demo.html

Thanks for your help on this.

IT

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 15 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Different Link Colors from the Page Settings

Seems to be working fine for me in both; have you fixed it?

On a sie note; you're suffering from divitis/classitis.

  
  	<div id="menutop">
	<div class="menu"> 
<div class="cssnav"><a href="http://www.mydomain.com" title="Boating, Sailing, Boats, Fishing Boats, Sailboats, Boating, Used Boats and Boats for Sale">HomePort</a></div> 
<div class="cssnav"><a href="http://www.mydomain.com/marine-engines.htm" title="Marine Engines, Inboards, Outboards, SternDrives">Engines</a></div> 
<div class="cssnav"><a href="http://stores.ebay.com/" title="Online Store">Online Store</a></div> 
<div class="cssnav"><a href="http://www.mydomain.com/boat-reviews.htm" title="Boat Reviews, Boat Tests, Powerboat Reviews, Sailboat Reviews, Fishing Boat Reviews">Boat Reviews</a></div> 
<div class="cssnav"><a href="http://www.mydomain.com/marine-electronics.htm" title="Marine Electronics, Radar, ChartPlotters, FishFinders">Electronics</a></div> 
<div class="cssnav"><a href="http://www.mydomain.com/?id=30" title="BookStore">BookStore</a></div> 
<div class="cssnav"><a href="http://stores.ebay.com" title="Clothing, Online Store">Clothing</a></div> 

<div class="cssnav"><a href="http://www.mydomain.com/?id=13" title="Yellow Page">Yellow Pages</a></div> 
<div class="cssnav"><a href="http://www.mydomain.com/?id=35" title="Boat Finance & Insurance">Finance</a></div> 
<div class="cssnav"><a href="http://www.mydomain.com/?id=28" title="Powerboat Racing">Racing</a></div> 
<div class="cssnav"><a href="http://www.mydomain.com/?id=8" title="Regional Cruising">Regional</a></div> 
<div class="cssnav"><a href="http://www.mydomain.com/yacht-charter.htm" title="Yacht Charter & Vacations">Charter</a></div> 
<div class="cssnav"><a href="http://www.mydomain.com/boating-events.htm" title="Boating Events & Boat Show Calendar">Calendar</a></div> 
<div class="cssnav"><a href="http://www.mydomain.com/?id=7" title="Owner's Clubs & Yacht Associations">Owners Clubs</a></div> 
<div class="cssnav"><a href="http://www.mydomain.com/boats-for-sale.htm?visual=26&article=123" title="Yacht Clubs">Yacht Clubs</a></div> 
<div class="cssnav"><a href="http://www.mydomain.com/boats-for-sale.htm" title="Boats for Sale, Used Boats">Boats for Sale</a></div> 

</div>


	</div>

would be better as a list, and not all those surrounding divs:

  
<ul id="menu">
<li><a href="/" title="Return to Homepage">HomePort</a></li>
<li><a href="marine-engines.html" title="Marine Engines">Engines</a></li>
</ul>

Also, don't stuff your title attributes full of text, Google will penalise you for it.

Verschwindende wrote:
  • CSS doesn't make pies

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 14 years 44 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

Different Link Colors from the Page Settings

1. I have not fixed it, IE doesn't work for me some text is black not white. Firefox looks ok.

2. Will your li approach work in the graphic menu? Looks a lot cleaner, so will test it - and ...

3. Google will penalize me for that. Grrrrrrrrrr. You sure?!?
It is keywords yes but meant to help viewers know what was there.
But if it is stuffing I will remove them.

thaks

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 15 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Different Link Colors from the Page Settings

It's not so much stuffing, but the title attribute should be used wisely to let users know where they're going.

For example:

<a href="home.html" title="home">

is bad. Don't repeat the link page.

Something like

<a href="home.html" title="Return to Homepage">

is better.

This one:

<a href="boat-reviews.htm" title="Boat Reviews, Boat Tests, Powerboat Reviews, Sailboat Reviews, Fishing Boat Reviews">Boat Reviews</a>

should be something like:

<a href="boat-reviews.htm" title="Read reviews and tests of powerboats, sailboats and fishing boats">Boat Reviews</a>

Give me a minute, I'll write you some better titles.

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 15 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Different Link Colors from the Page Settings

Here you go. A lot of em were ok, I tweaked some though Laughing out loud

<a href="index.html" title="Return to Boater&apos;s Life Homepage">HomePort</a>
<a href="marine-engines.htm" title="View and purchase Marine engines, Inboards, Outboards &amp; SternDrives">Engines</a>
<a href="http://stores.ebay.com/" title="Visit the Online Store">Online Store</a>
<a href="boat-reviews.htm" title="Read reviews and tests of powerboats, sailboats and fishing boats">Boat Reviews</a>
<a href="marine-electronics.htm" title="Marine Electronics, Radar, ChartPlotters &amp; FishFinders">Electronics</a>
<a href="http://www.mydomain.com/?id=30" title="Visit the online BookStore">BookStore</a>
<a href="http://stores.ebay.com" title="Browse and purchase clothing at the Online Store">Clothing</a>
<a href="http://www.mydomain.com/?id=13" title="Yellow Page">Yellow Pages</a>
<a href="http://www.mydomain.com/?id=35" title="Boat Finance &amp; Insurance">Finance</a>
<a href="http://www.mydomain.com/?id=28" title="View information on Powerboat Racing">Racing</a>
<a href="http://www.mydomain.com/?id=8" title="Regional Cruising">Regional</a>
<a href="yacht-charter.htm" title="Yacht Charter & Vacations">Charter</a>
<a href="boating-events.htm" title="Boating Events & Boat Show Calendar">Calendar</a>
<a href="http://www.mydomain.com/?id=7" title="Owner's Clubs &amp; Yacht Associations">Owners Clubs</a>
<a href="boats-for-sale.htm?visual=26&article=123" title="Yacht Clubs">Yacht Clubs</a>
<a href="boats-for-sale.htm" title="Browse and Buy used &amp; new boats">Boats for Sale</a> 

Verschwindende wrote:
  • CSS doesn't make pies

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 14 years 44 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

Different Link Colors from the Page Settings

HAHAHA - I get it sorry. Too obivously a list of keywords. OK

Tested your alternate menu list. Seems the DIV itis is needed to get them to layout across the page within the menu blocks.

Wink

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 14 years 44 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

Different Link Colors from the Page Settings

I checked the demo.html file again online. Works in firefox yes,...
But some of the overlay text in the buttons in IE are black not white for me. You don't get that in your IE? What version is it?

IT

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 15 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Different Link Colors from the Page Settings

No it isn't Laughing out loud

The list items can float like that in two ways; by display:inline or float:left

If you give the list items float:left you should get the desired effect.

Let me know how you get on Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 14 years 44 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

Different Link Colors from the Page Settings

OK, I found the answer to my different color text in the Buttons.

I read in Eric Meyers book that id #'s have precidence over . class, so I changed teh menu's . class to id's using #.

Now they are all white with no reversals to the page wide link colors. And all links outside of the menu act correctly as well.

Now I have to work on collapsing my code tighter. Plus Meyer says technically you can only use a # once in a document as it is for single use. Although browsers do not render them correctly yet and recognize them. So, I guess that means as CSS imiplimentation in browsers mature their adhearence to the rules will break my menu again unless I can wrap all my buttons in one # instead of one # for each button. And, it should get rid of my div itis once I figure it out. Happy coding ...

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

Anonymous
Anonymous's picture
Guru

Different Link Colors from the Page Settings

ITWeb wrote:
Plus Meyer says technically you can only use a # once in a document as it is for single use.
Technically? No, absolutely!

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 14 years 44 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

Different Link Colors from the Page Settings

Hmm...

all sixteen buttons work and each one has a seperate call to the #

This I want to cut down to 1, but it does appear to be working?
Maybe not so absolutely?

Bulldog
formerly known as IT

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

Anonymous
Anonymous's picture
Guru

Different Link Colors from the Page Settings

ITWeb wrote:
Maybe not so absolutely?
Try accessing one of them with the DOM and see which is affected.

It is simply not correct.

The "it works so who cares if it is right" attitude really gets my fur up. It makes helping here seem so worthless.

Also looks like you missed a closing div tag: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.itweb.com%2Ftest%2Fdemo.html

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 14 years 44 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

Different Link Colors from the Page Settings

Thank you very much. And, it works so its ok is not may mantra. Laughing out loud

Just seems strange that it does. I will get that missing tag fixed and will get all the buttons within one ID#

By the way, you are from PATucky. So was I, ... thought I was the only person that called it that!

Bulldog

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

Anonymous
Anonymous's picture
Guru

Different Link Colors from the Page Settings

ITWeb wrote:
By the way, you are from PATucky. So was I, ... thought I was the only person that called it that!
Pennsyltucky is the parts of Pennsylvania that are not Philadelphia or Pittsburgh. Laughing out loud

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 14 years 44 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

Different Link Colors from the Page Settings

HAHAHAHAHAHAHA
Absolutely correct!
In my case it was Allentown/Bethlehem area. And if you are familiar with them, I'll tell you where I really am from!

Menu Update:

Ok, I returned everything in the menu to class from id.
(not in the demo version)

Works, but the the link colors have returned to the page overall. The menu link colors no longer have precidence like they did with ID #.

Maybe, I have done the page overall link colors incorrectly.

They are just as follows at the top of the syle sheet:

a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #FF0000;
}
a:active {
color: #000000;
}

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 14 years 44 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

Different Link Colors from the Page Settings

OH, forgot
And, its definatly one of those Firefox IE things. As it renders correctly in Firefox but not in IE.

:roll:

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 14 years 44 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

Different Link Colors from the Page Settings

ONE PROBLEM SOLVED!

Got the button menus to work with the right link colors using class.
Removed the global link colors from the page and added link colors to each block container (top menu-left menu-right menu, etc).

Each block can be controlled seperately with confusing IE. Firefox is happy as well. thanks for making me look at it deeper Triumph

Bulldog
The Bulldog Triumphs Again!

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.