CSS Text Styles..Different Tables, Different Text Color [Archive]

Click to See Complete Forum and Search --> : CSS Text Styles..Different Tables, Different Text Color

Dark Dragon

10-21-2003, 12:57 PM

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?

spufi

10-21-2003, 01:05 PM

It would help to see that code, but when in doubt, use the id attribute to define the CSS for a certain area.

#sometext { CSS defined }

<div id="sometext">Blah</div>

If the section you want appears more than once, define it using the class attribute instead.

Dark Dragon

10-21-2003, 01:14 PM

Okay..here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Compendium Draconum Draconis</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
a.link {
color: #40E0D0;
text-decoration: none;
font-weight: bold;
}
a.link:hover {
color: #D02090;
}
</style>
<style type="text/css">
body {background-color: #000000}
<style type="text/css">

</style>
<style type="text/css">
h3 {color: #DCDCDC}
</style>
</head>
<body>
<div id="left" style="width: 284px; height: 455px">
<h3>Compendium Menu</h3>
<p><a href="what.htm" class="link">What are Dragons?</a><br>
<a href="what.htm" class="link">Dragon Habitat</a><br>
<a href="what.htm" class="link">Where Do Dragons Live?</a><br>
<a href="what.htm" class="link">Psychology of Dragons</a><br>
<a href="what.htm" class="link">Life of Dragons</a><br>
<a href="what.htm" class="link">Dragon Magic</a><br>
<a href="what.htm" class="link">Dragon Treasure</a><br>
<a href="what.htm" class="link">Variety of Dragons</a><br>
<a href="what.htm" class="link">Related Species of Dragons</a><br>
<a href="what.htm" class="link">Summoning Dragons</a><br>
</p>
<h3>Artwork</h3>
<p><a href="what.htm" class="link">Different Types of Dragons</a><br>
<a href="what.htm" class="link">Wyverns</a><br>
<a href="what.htm" class="link">Fairy Dragons</a><br>
</div>
<div id="middle" style="left: 285px; top: 100px; width: 381px; height: 457px">Text</div>

</body>
</html>

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.

nkaisare

10-21-2003, 01:32 PM

#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 (http://www.w3.org/TR/CSS2/cascade.html#cascade)).

spufi

10-21-2003, 01:37 PM

You were missing a </p> tag in your code and you only need one <style> tag in youe <head> tag. Cleaned up version follows.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Compendium Draconum Draconis</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

</style>
</head>
<body>
<div id="left" style="width: 284px; height: 455px">
<h3>Compendium Menu</h3>
<p>
<a href="what.htm" class="link">What are Dragons?</a><br>
<a href="what.htm" class="link">Dragon Habitat</a><br>
<a href="what.htm" class="link">Where Do Dragons Live?</a><br>
<a href="what.htm" class="link">Psychology of Dragons</a><br>
<a href="what.htm" class="link">Life of Dragons</a><br>
<a href="what.htm" class="link">Dragon Magic</a><br>
<a href="what.htm" class="link">Dragon Treasure</a><br>
<a href="what.htm" class="link">Variety of Dragons</a><br>
<a href="what.htm" class="link">Related Species of Dragons</a><br>
<a href="what.htm" class="link">Summoning Dragons</a><br>
</p>
<h3>Artwork</h3>
<p>
<a href="what.htm" class="link">Different Types of Dragons</a><br>
<a href="what.htm" class="link">Wyverns</a><br>
<a href="what.htm" class="link">Fairy Dragons</a><br>
</p>
</div>
<div id="middle" style="left: 285px; top: 100px; width: 381px; height: 455px">
Text
</div>
</body>
</html>

nkaisare

10-21-2003, 01:39 PM

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}

2. Your inline styles will override styles specified within <style>...</style>. So the width=33% is redundant. Some good layout examples are available at:
http://www.glish.com/css/
http://www.bluerobot.com/web/layouts/
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

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 (http://www.w3.org/TR/CSS2/selector.html#descendant-selectors) to a good use:
div#left a {/* styles for a.link, a.link:link etc go here */}

spufi

10-21-2003, 01:43 PM

I didn't see it until after I posted my code, but here's one thing you can do to clean up your code a little.

For your link CSS

.link a { color: #40E0D0; text-decoration: none; font-weight: bold; }
.link a:hover { color: #D02090; }

Here's the HTML...

<p class="link">
<a href="what.htm">What are Dragons?</a><br>
<a href="what.htm">Dragon Habitat</a><br>
<a href="what.htm">Where Do Dragons Live?</a><br>
<a href="what.htm">Psychology of Dragons</a><br>
<a href="what.htm">Life of Dragons</a><br>
<a href="what.htm">Dragon Magic</a><br>
<a href="what.htm">Dragon Treasure</a><br>
<a href="what.htm">Variety of Dragons</a><br>
<a href="what.htm">Related Species of Dragons</a><br>
<a href="what.htm">Summoning Dragons</a><br>
</p>

And...

<p class="link">
<a href="what.htm">Different Types of Dragons</a><br>
<a href="what.htm">Wyverns</a><br>
<a href="what.htm">Fairy Dragons</a><br>
</p>

Dark Dragon

10-21-2003, 01:44 PM

Okay..thanks.

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.

spufi

10-21-2003, 01:53 PM

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

Where did you get that info? I'm not sure what they are saying, so I want to read it for myself.

Originally posted by Dark Dragon
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....

The link code nkaisare, or I provided will be the more efficient way of doing it. I used to do menus like your code you had posted, but I don't do it that way anymore.

Dark Dragon

10-21-2003, 02:01 PM

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

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..:D

spufi

10-21-2003, 02:12 PM

Try this with the <span> tag idea.

The css:
#left a span {display: none}
#left a {display: block}

<div id="left">
<a href="url">Link 1</a> <span>|</span>
<a href="url">Link 2</a> <span>|</span>...
</div>

Are you using a tool like Dreamweaver to create your pages? That's the only thing I can think of when you are talking about the Enter key.

spufi

10-21-2003, 02:19 PM

Change that to...

#left span {display: none}

The <span> tag isn't inside of the <a> tag.

nkaisare

10-21-2003, 02:33 PM

Originally posted by Dark Dragon
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 &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.

- Niket

Dark Dragon

10-21-2003, 02:54 PM

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.

spufi

10-21-2003, 03:28 PM

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.

Dark Dragon

10-21-2003, 03:47 PM

Nah..I only have DW4..I wish it did create those tags though..would be cool! :cool:
I just added the tags manually....

But I wanna get DW MX next year..sounds really useful, more than DW4....:D