If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Hybrid View

CSS Text Styles..Different Tables, Different Text Color

Okay..I have a page I am working on that has two tables.
One table, which is on the left contains the CSS Styles for my rollover links..and it has the <p> tag in both the styles and at the beginning of my block of links

BUT in the center table cell I plan to have some text and I want the color of that text to be different from the attributes set in the intial style..so is it possible to put a CSS Style thing under the <div> tag of my second table cell so I can adjust the coloring of the text that will appear in the second table without it affecting the text for my rollover links?

Humankind cannot gain anything without first giving something in return.
To obtain, something of equal value must be lost.
That is Alchemy's first law of Equivalent Exchange.
In those days we really believed that to be the worlds one, and only truth. - FullMetal Alchemist

In the middle column I want to put some text but I do not want it to be the same color as the text that makes up the links in the left column..so is there a way to do that using CSS or should I just use HTML tags for that?

Thanks.

Humankind cannot gain anything without first giving something in return.
To obtain, something of equal value must be lost.
That is Alchemy's first law of Equivalent Exchange.
In those days we really believed that to be the worlds one, and only truth. - FullMetal Alchemist

#middle {color: #000;}
will do the trick. All the elements within #middle will inherit the color unless that is overruled by element-specific styles (in which case it will follow the rules of cascade).

Additional comments
1. The links should be separated by something more than a white space or line break. Example:
<a href="url">Link 1</a> <span>|</span>
<a href="url">Link 2</a> <span>|</span>...
and the css:
#left a span {display: none}
#left a {display: block}

3. If you are using position: absolute for all your divs, you may want to put your navigation links after the contents, so that persons browsing with non-visual browsers do not have to go through the link-list every time before reaching the contents.

Edit: More comments
4. You don't need class="link" in this example. You can put CSS descendent selectors to a good use:
div#left a {/* styles for a.link, a.link:link etc go here */}

But as I read on W3Schools, the <br> tag was appropriate for line breaks instead of using the ENTER key all the time...

Whew! This gets pretty complex, don't it?

Oh...the link code I used was one that Pyro gave me initially..but if you think this is more efficient, then I will try it....

Anyways, thanks for the help.

Last edited by Dark Dragon; 10-21-2003 at 01:46 PM.

Humankind cannot gain anything without first giving something in return.
To obtain, something of equal value must be lost.
That is Alchemy's first law of Equivalent Exchange.
In those days we really believed that to be the worlds one, and only truth. - FullMetal Alchemist

As far as the <br> tag goes, I really found it in reference to text and I decided it would work rather nicely for vertical menus because the ENTER key puts too much of a space between.

I did try that <span>|</span> thing but then all my links just ended up alongside one another in a line..I really don't want that but it is VERY useful for plain text menus...so thanks.

Boy..just when I thought I was finally doing something right I find I was doing it wrong all along!

P.S..I also used the <br> tags because in some instances I do not want the text to travel to the end of my table and then use word wrap..I use it to help contain my text..

Last edited by Dark Dragon; 10-21-2003 at 02:03 PM.

Humankind cannot gain anything without first giving something in return.
To obtain, something of equal value must be lost.
That is Alchemy's first law of Equivalent Exchange.
In those days we really believed that to be the worlds one, and only truth. - FullMetal Alchemist

But as I read on W3Schools, the <br> tag was appropriate for line breaks instead of using the ENTER key all the time...
You cannot press ENTER key to get line breaks. All extra spaces and linebreaks collapse to a single space in an html document (unless you use a &amp;nbsp; or <br> respectively).

Originally, I had included those comments in my previous reply. But then I edited it and reposted those comments. The reason is that your <br>-based navigation WILL work in IE/NS/Moz/Opera or any visual browser. The problem is with non-visual browsers. Hence you want something like a "|" or "," etc separating the links. In visual browsers, you dont want to display it (hence you use "#left span {display: none}").

Whew! This gets pretty complex, don't it?
At first it is. Because there may be a number of things to learn. But now that you have made a start (and a good one at that), you will find sailing in the CSS-sea a little more fun. I cant guarantee it will be a smooth ride all the way... but if it were smooth, wouldn't you rather stay at home?

but if you think this is more efficient, then I will try it....
Yes, you should try it as a next step. First, understand the code for two/three-column layout that you are using. Tweak it, play with it, explore it. Always keep an eye on what each style rule is supposed to do. Refer to the specs from http://www.w3.org/ - thats the best way to learn.

Spuffi:
You are aware that there is a ENTER key on the keyboard, aren't you? There is no Enter key in DW at all!
As for the <span> tag..I didn't put it in the <a> tag at all..I had put it next to it..in its own < > tags...

But I will try your suggestion..thanks

nkaisare:
It seems like there are so many ways to do CSS that it gets too confusing trying to decipher what ones are best...anyways, thanks for all your help..I am gonna try to clean up my site then.

Last edited by Dark Dragon; 10-21-2003 at 02:56 PM.

Humankind cannot gain anything without first giving something in return.
To obtain, something of equal value must be lost.
That is Alchemy's first law of Equivalent Exchange.
In those days we really believed that to be the worlds one, and only truth. - FullMetal Alchemist

Originally posted by Dark Dragon You are aware that there is a ENTER key on the keyboard, aren't you? There is no Enter key in DW at all!
As for the <span> tag..I didn't put it in the <a> tag at all..I had put it next to it..in its own < > tags...

But I will try your suggestion..thanks

What I was wondering is, if you used Dreamweaver and if you hit the Enter key that it would create a <br> tag, or somethimg like it for you.