SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making Progress but need a bit of help with a table

    You have helped me loads and I managed to progress a bit with positoning of images etc, but have a problem with this table.

    What I want is the left hand column to be in bold. The links column work fine, ie are normally black but turn white on hovering

    What am I missing please ?

    Antony


    CSS

    table.otherservices {font-weight:bold;color: #000000;}
    table.otherservices a {color: #000000; text-decoration: none; font-style:italic;font-family:"New Century Schoolbook", Times, serif; font-weight: bold; }
    table.otherservices a:hover { color: #ffffff; }text-decoration: none; font-style:italic;font-family:"New Century Schoolbook", Times, serif; font-weight: bold; }

    HTML

    <table class="otherservices">
    <tr>
    <td>Family Group Orders/td>
    <td><a href="http://www.c5d.co.uk/groups.php">Click here</a></td>
    </tr>
    <tr>
    <td>Payments in Pounds/td>
    <td><a href="http://www.c5d.co.uk/sterlingpayments.php">Click here</a></td>
    </tr>
    <tr>
    <td>Parish Register Entries/td>
    <td><a href="http://www.c5d.co.uk/parishrecords.php">Click here</a></td>
    </tr>
    <tr>
    <td>Census Service/td>
    <td><a href="http://www.c5d.co.uk/censusentries.php">Click here</a></td>
    </tr>

  2. #2
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the styling is best applied directly to the <td> tags.

    Code:
    <table class="otherservices">
                <tr>
                    <td class="bold">Family Group Orders:</td>
                    <td><a href="http://www.c5d.co.uk/groups.php">Click here</a></td>
                </tr>
                <tr>
                    <td class="bold">Payments in Pounds:</td>
                    <td><a href="http://www.c5d.co.uk/sterlingpayments.php">Click here</a></td>
                </tr>
                <tr>
                    <td class="bold">Parish Register Entries:</td>
                    <td><a href="http://www.c5d.co.uk/parishrecords.php">Click here</a></td>
                </tr>
                <tr>
                    <td class="bold">Census Service:</td>
                    <td><a href="http://www.c5d.co.uk/censusentries.php">Click here</a></td>
                </tr>
    </table>
    Code:
    .bold{font-weight:bold}

  3. #3
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestion. I guess your experience gives your thought processes more width than mine.

    However is there any reason why the CSS has to have it twice; IT only seems to work like this.

    table.otherservices a {color: #000000; text-decoration: none; font-style:italic;font-family:"New Century Schoolbook", Times, serif; font-weight: bold; }
    table.otherservices a:hover { color: #ffffff; }text-decoration: none; font-style:italic;font-family:"New Century Schoolbook", Times, serif; font-weight: bold; .bold{font-weight:bold}

    .bold{font-weight:bold}

    It seems to meas though I am specifying bold twice

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    It isn't really clear what you are trying to achieve in your first post. Do you want everything bold? In that case, this is enough:

    Code:
    table.otherservices {font-weight: bold; }
    You only need to mention the font weight there.

    Is there a concern with the hover color of white? Because you've specified that in the CSS ...

  5. #5
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what I am trying to do is to have bothe halves of this table in bold text and when you hover over the "click here" for that to turn white



    Family Group Orders: Click here



    Payments in Pounds: Click here



    Parish Register Entries: Click here



    Census Service: Click here


    It does seem as though the CSS is needed as below

    table.otherservices a {color: #000000; text-decoration: none; font-style:italic;font-family:"New Century Schoolbook", Times, serif; font-weight: bold; }
    table.otherservices a:hover { color: #ffffff; }text-decoration: none; font-style:italic;font-family:"New Century Schoolbook", Times, serif; font-weight: bold; .bold{font-weight:bold}

    .bold{font-weight:bold}

    Without the additional .bold{font-weight:bold}
    it stays black all the time and without the additional hover specification it doesn't change colour

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You can simplify your CSS to this:

    Code:
    .otherservices {font-weight:bold;color: #000000;}
    .otherservices a {color: #000; text-decoration: none; font-style:italic; font-family:"New Century Schoolbook", Times, serif;}
    .otherservices a:hover { color: #ffffff;}
    and keep your HTML as it originally was.

    I now see that your original CSS had an errant curly brace, which could cause problems:

    Code:
    table.otherservices a:hover { color: #ffffff; }text-decoration: none; font-style:italic; font-family:"New Century Schoolbook", Times, serif; font-weight: bold; }

  7. #7
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,374
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Firebug shows that the font-weight is coming from clubscreen.css, where you have
    Code:
    caption, th, td {text-align:left;font-weight:normal;}
    Edit:

    Ninja'd by Ralph - again.


    However, you have bigger problems with your page than that. I normally browse with JS disabled, which means that your page is totally unusable. Even if I enable JS, your menu spills over from the nav bar into the content area.

    c5d.png

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Yes, I also meant to mention that the red on gray is very hard to read.

    Quote Originally Posted by TechnoBear View Post
    Ninja'd by Ralph - again.

  9. #9
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have now renamed that CSS Sheet c5dscreen.css.

    I have removed all references to the table as far as I can see.

    The probates bit doesn't seem to stick out in my computer using IE C & FF

  10. #10
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry, I didn't spot that the caption you pointed out was in that sheet twice.

    I have now removed the second one and the CSS works fine. Thanks very much for your efforts. I do appreciate them

    I'm learning this lsowly, but it can prove troublesome at time

    If you spot anything else in that sheet that is unnecesary, please point it out

    Thanks Again

    Antony

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Cool, glad it's sorted. If you haven't already, check out the dev tools in your browser (use Firebug for Firefox, or the nature dev tools in Chrome, for example). You can highlight each element and see what styles are applying to it, including duplicates etc. Very handy. (I couldn't live without them, indeed.)


Bookmarks

Posting Permissions

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