www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: CSS Text Styles..Different Tables, Different Text Color

  1. #1
    Join Date
    Apr 2003
    Posts
    853

    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

  2. #2
    Join Date
    Nov 2002
    Posts
    2,632
    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.

  3. #3
    Join Date
    Apr 2003
    Posts
    853
    Okay..here is the code:

    PHP 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-decorationnone;
        
    font-weightbold;
    }
    a.link:hover {
        
    color#D02090;
    }
    </
    style>
    <
    style type="text/css">
    body {background-color#000000}
    <style type="text/css"
    <!-- 
    body margin:0pxpadding:0pxcolor:#FFF; } 
    #left { width:33%; position:absolute; top:100px; left:0%; background-color:#333; } 
    #middle { width:33%; position:absolute; top:100px; left:33%; background-color:#666; } 

    --> 
    </
    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.
    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

  4. #4
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    #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).

    Last edited by nkaisare; 10-21-2003 at 01:34 PM.

  5. #5
    Join Date
    Nov 2002
    Posts
    2,632
    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">
    <!--
    a.link { color: #40E0D0; text-decoration: none; font-weight: bold; }
    a.link:hover { color: #D02090; }
    body { background-color: #000000; margin:0px; padding:0px; color:#FFF; }
    h3 {color: #DCDCDC; }
    #left { width:33%; position:absolute; top:100px; left:0%; background-color:#333; }
    #middle { width:33%; position:absolute; top:100px; left:33%; background-color:#666; }
    -->
    </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>

  6. #6
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    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/tut...son/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 to a good use:
    div#left a {/* styles for a.link, a.link:link etc go here */}
    Last edited by nkaisare; 10-21-2003 at 01:41 PM.

  7. #7
    Join Date
    Nov 2002
    Posts
    2,632
    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>

  8. #8
    Join Date
    Apr 2003
    Posts
    853
    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.
    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

  9. #9
    Join Date
    Nov 2002
    Posts
    2,632
    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.

  10. #10
    Join Date
    Apr 2003
    Posts
    853
    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

  11. #11
    Join Date
    Nov 2002
    Posts
    2,632
    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.

  12. #12
    Join Date
    Nov 2002
    Posts
    2,632
    Change that to...

    #left span {display: none}

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

  13. #13
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    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 &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.

    - Niket

  14. #14
    Join Date
    Apr 2003
    Posts
    853
    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

  15. #15
    Join Date
    Nov 2002
    Posts
    2,632
    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.
    Last edited by spufi; 10-21-2003 at 03:46 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles