Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Senior Member mikeycorn's Avatar
    Join Date
    Mar 2003
    Posts
    272
    Member #
    891
    Look, ma! I just incorporated my very first bit of CSS into my web page!

    Code:
    <style type = "text/css">
    tr {background-color: #333333}
    </style>
    *mom wipes tear from eye*

    Okay, you may be laughing but we all gotta start somewhere and that little three liner just eliminated 80 lines from this massive table I have.

    The problem is, I have one more table that needs black bg and plugging it straight into that table or that table's rows is not working. Obviously, the css is overriding it.

    Help?
    ~ mikeycorn
    With over 72,000 questions worth of user submitted quizzes, it's the world's most popular quiz creation software:
    PEST - The Personal Exam Self-Tester

  2.  

  3. #2
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    add style="background-color:#333333;" to the <tr> tag (or whatever needs it)
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  4. #3
    Senior Member mikeycorn's Avatar
    Join Date
    Mar 2003
    Posts
    272
    Member #
    891
    Nice. Thanks a bunch.

    Two quick questions come to mind.

    1. what's the semi-colon there for?

    2. even though it's only a five row table that needs to have a different bgcolor for the rows, do you think it would be better technique to add another style to the css and then use that style for the smaller table instead of adding inside the <tr>?
    ~ mikeycorn
    With over 72,000 questions worth of user submitted quizzes, it's the world's most popular quiz creation software:
    PEST - The Personal Exam Self-Tester

  5. #4
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    1. Just a habit... if you use more than one property you need them. I.E.

    tr {
    background-color:white;
    font-weigth:bold;
    }

    2. I would reccomend it simply because you may in the future (although unforseen now) need to change all of the tables at once for multiple pages (as I would reccomend external style sheets as well) or you may add more tables of that color. It's just an expandability issue there.. your choice
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  6. #5
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    You shouldn't use style="" to override CSS (even though I do it, lol).

    W3C suggests using id specific overrides, or classes like so:
    Code:
    <style>
        tr {
            background-color: #0000FF;
        }
    
        tr.black {
            background-color: #000000;
        }
    
        #whiteRow {
            background-color: #FFFFFF;
        }
    </style>
    
    <table>
        <tr>
            <td>This is a normal row</td>
        </tr>
        <tr>
            <td>This is a normal row</td>
        </tr>
        <tr class="black">
            <td>This is a black row</td>
        </tr>
        <tr class="black">
            <td>This is a black row</td>
        </tr>
        <tr class="black" id="whiteRow">
            <td>This is my white row</td>
        </tr>
    </table>
    Notice that the class overrides the default style, and the id overrides everything.

  7. #6
    Senior Member mikeycorn's Avatar
    Join Date
    Mar 2003
    Posts
    272
    Member #
    891
    Thank you guys both, big time! You wouldn't believe how much that bit of info can propel me forward.
    ~ mikeycorn
    With over 72,000 questions worth of user submitted quizzes, it's the world's most popular quiz creation software:
    PEST - The Personal Exam Self-Tester

  8. #7
    Senior Member mikeycorn's Avatar
    Join Date
    Mar 2003
    Posts
    272
    Member #
    891
    Okay, one last question (I'm pretty sure this'll set me for sure! )

    On my table:

    http://www.vellosoft.com/dloads/list.html

    I'm going to ignore the first row for now so that there are then three types of text to apply style to.

    1. Headings in green, left-justified

    2. Hyperlinks in yellow, right-justified

    3. #Q and Upload date in green, center justified

    I was thinking h1, h2, h3 but h1 turned out huge, I'm sure I could override that (although I don't like the font-size using percentage instead of the 1 - 7 I'm used to.)

    If it was you, would you be thinking of those three types in the table as h1, h2, h3 or p.head, p.link, p.nums or something else?
    ~ mikeycorn
    With over 72,000 questions worth of user submitted quizzes, it's the world's most popular quiz creation software:
    PEST - The Personal Exam Self-Tester

  9. #8
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    if it's for INSIDE a table, you should use the TH (table header) element. Like this:
    Code:
    <table>
        <thead>
            <tr>
                <th>Header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Content</td>
            </tr>
            <tr>
                <td>Content</td>
            </tr>
            <tr>
                <td>Content</td>
            </tr>
        </tbody>
    </table>
    Then, set your styles for each element appropriately.

  10. #9
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    Also... just a quick note on font-size, UNITS matter in CSS you can use sizes like: 10pt, 10px, 10in, etc. I reccomend using pixels as 12pt font has a different pixel height (real height) on macs an PC's.

    so, if you want to take down the size of the <h1> you would do:

    Code:
    h1 {
      font-size:12px;
      color:green;
      text-align:left;
    }

    I would reccomend using header tags as that's what's reccomended by W3C, and search engines weight on such tags. It's a good practice to get into. Although, for the upload one's I'd just use classes.

    also hyperlinks, a quick short lesson:

    a:link - regular link
    a:hover - hovering over a link
    a:active - pressing on the link
    a:visited - visited link

    you can set these to different properties using CSS

    I probably went over quite a bit you already knew, but I don't know exactly how much ya know so just wanted to cover my bases Good luck!
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  11. #10
    Senior Member mikeycorn's Avatar
    Join Date
    Mar 2003
    Posts
    272
    Member #
    891
    I probably went over quite a bit you already knew, but I don't know exactly how much ya know so just wanted to cover my bases
    Trust me, it's all appreciated.

    a-drive posted this list of font-sizes available:

    xx-small
    x-small
    small
    medium
    large
    x-large
    xx-large

    I counted seven and realized this probably corresponded to the dreamweaver drop-down text | size that had choices from 1 - 7, so I went with that to keep consistency with what I already had on the page. I will probably use px in the future, though.

    On the hyperlinks, I tried to find a way to switch the justification on them but couldn't, so I had to switch to treating them as a p.link. If there's a way, though, I'd be happy to find out!

    I am looking forward to using CSS to do some color change on the hover without having to resort to a flash button or some such.

    Again, thanks to both of you for all the help.
    ~ mikeycorn
    With over 72,000 questions worth of user submitted quizzes, it's the world's most popular quiz creation software:
    PEST - The Personal Exam Self-Tester


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:01 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com