SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  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
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm afraid that this just leaves the whole table not bold, though the links turn white

    If I go back to styling the TD by using bold and adding .bold{font-weight:bold} then the left column turns bold but the link doesn't

    This is all of the CSS

    Code CSS:
    body {background: #708090; font-weight: bold; font-style: italic; font-size: 15px; font-family: "New Century Schoolbook", Times, serif;}
     
     
     
         h1{color:#ffffff; font-size: 19px; font-weight:bold;font-style:italic; text-align:center;}
         h2 {color:#cd0000; font-size: 15px; text-decoration:underline;font-weight:bold;}
         p.two {color:#cd0000; margin-bottom:0;15px;font-weight:bold;}a:link {color:#cd0000;} 
         p.three {color:#000080; text-decoration:none;} a:link  {color:#000080;}
         p.four {color:#000000; font-size: 15px;font-weight:bold;} 
         p.four a:link,p.four a:visited {color:#000000; font-size: 15px;font-weight:bold;}
         p.C5D a:link,p.C5D a:visited {color:#cd0000; font-size: 15px;font-weight:bold;}
    a:hover {
    	color: #ffffff;  /* Colour of Links when hovering */
        text-decoration: none;
    	}
     
    /* NAVIGATION MENUS */ 
     
    #pagemenucontainer {  /* controls poition of top right hand boxes */
    	height: 36px;
        float: right;
        padding: 0;
        margin-top: 12px;
        background:#ffffff;
       	}
     
     
     
    #pagemenu, #pagemenu ul { /* controls top right hand boxes */
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	line-height: 1;
        background-color:#708090;}
     
    #pagemenu li {
    	float: left;
    	list-style: none;
    	margin: 0px;
    	padding: 0px;
    }
     
    #pagemenu ul li {
    	list-style: none;
    	margin: 0px;
    	padding: 0px;
    	background-color:#000000;}
     
    #pagemenu li a, #pagemenu li a:link {     /* controls top right hand boxes */ 
    	color: #000000;
    	display: block;
        margin: 0 0 0 6px;
    	padding: 8px 16px ;
    	text-decoration: none;
    	text-transform: uppercase;
        font-weight: bold;
    	font-size: 11px;
    	font-family: Arial, Helvetica, sans-serif;
        border: 0px solid; 
        -moz-border-radius: 10px;
        -khtml-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        }
     
    #pagemenu li a:hover, #pagemenu li a:active {
    	color: #ffffff;
    	display: block;
        margin: 0 0 0 6px;
    	padding: 8px 16px ;
    	text-decoration: none;
    	text-transform: uppercase;
        font-weight: bold;
    	font-size: 11px;
    	font-family: Arial, Helvetica, sans-serif;
        border: 0px solid; 
        -moz-border-radius: 10px;
        -khtml-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        }
     
    #pagemenu  li.current_page_item a {
        background: #FFFFFF;
    	color: #ffff00;
        text-decoration: none;
        border: 2px solid #E2F5FB;
        -moz-border-radius: 10px;
        -khtml-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
    	}
     
    #pagemenu li:hover, #pagemenu li.sfhover { 
    	position: static;
    	}
     
     
     
    #navcontainer {                            /* controls top sub menu boxes known as navigation bar */ 
    	height: 45px;
    	display: block;
     
        background: #000000;
        -moz-border-radius: 5px;
        -khtml-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
       	}
     
    #navcontainer .current-cat a {
    	color:#000000;
    	background:#708090;
    	}
     
    /* CONTENT */
     
     
    #content {
    	width: 700px;
    	padding-top: 15px;
        padding-left: 15px;
        padding-right: 15px;
        color: #ffff00;
    	}
     
    pre { overflow: auto; 
    	width: 460px;
    	}
     
     
    .post {
    	margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #AFC9D4;
    	}
     
    .post_thumbnail {
        padding: 6px;
        background: #FFFFFF;
        border: 1px solid #DBE3E8;
        margin: 0 10px 10px 0;
    }
     
     
    .post p {
    	margin-bottom: 10px;
    	}
     
    .title {
    	margin: 0 0 8px 0;
    	padding: 0px;
    	line-height: 24px;
    	font-size: 24px;
    	font-family: Arial, Helvetica, Sans-serif;
    	color: #ffff00;
        font-weight: bold;
    	display: none;
    	}
     
     
    .title a {
    	text-decoration: none;
    	color: #708090;
    	}
     
    .title a:hover {
    	color: #289DB8;
    	}
     
    .pagetitle {
    	margin-bottom: 20px;
    	line-height: 22px;
    	font-family: Arial, Verdana;
    	text-decoration: underline;
        color: #ffff00;
    }
     
     
    .readmorecontent {
    	text-align: right;
    	}
     
    a.readmore {
    	padding: 4px 15px;
    	background: #708090;
    	color: #000000;
    	text-decoration: none;
        font-size: 12px;
    	}
     
    a.readmore:hover {
    	background-color: #708090;
        color: #000;
    	}
     
     
    .postdate {
    	font-size: 13px;
    	font-family: Arial, Helvetica, Sans-serif;
        font-style: italic;
        color: #ffff00;
    	}
     
     
    .postmeta {
    	font-size: 11px;
    	padding: 2px 4px;
    	font-family: Arial, Verdana;
        color: #ffff00;
    	}
     
    .postdate img, .postmeta img {
    	border: none;
    	vertical-align: middle;
    	margin:2px;
    	}
     
    .entry {
    	text-align: justify;
    	line-height: 20px;
    	padding-top: 8px;
    	font-family: Arial, Helvetica, Sans-serif;
    	font-size: 14px;
    	}
    .navigation {
    	padding: 10px 0;
    	}
     
    blockquote {
    	overflow: hidden;
    	padding-left: 9px;
    	font-style: italic;
    	color: #666;
    	border-left: 3px solid #CADAE7;
    	}
     
    .post img {
    	max-width: 680px;
    	}
     
    .aligncenter,
    div.aligncenter {
       display: block;
       margin-left: auto;
       margin-right: auto;
    	}
     
    p.copy{text-align:center;}
          p.copy:after{content:" 1999-2012";}
     
     
    .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;}
    .bold{font-weight:bold}
     
    img.center {   display: block;   margin-left: auto;   margin-right: auto; }
     
    #advert1 {float:left; display:inline-block; background:#000; width:250px;}
     
    #advert2 {float:right; display:inline-block; background:#000; width:250px;}
     
    hr {color: #708090; background-color: #f708090;}
     
    .buttonHolder{ text-align: center; }
    Last edited by TechnoBear; Dec 7, 2012 at 09:22. Reason: Code tags added

  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)
    Quote Originally Posted by certificates View Post
    I'm afraid that this just leaves the whole table not bold
    I tested that code in four browsers. What browser are you using?

  9. #9
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tried IE9 Chrome & Firefox

  10. #10
    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)
    With this code, the whole lot is bold in every browser I have, including IE9, Chrome, FF, Safari and Opera:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    
    <meta charset="utf-8">
    
    <title>table</title>
    	
    <style media="all">
    .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;}
    </style>
    	
    </head>
    
    <body>
    
    <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>
    </table>
    
    </body>
    
    </html>

  11. #11
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well it won't for me.

    Would you look at this web page please ?

    http://www.c5d.co.uk/groups.php

  12. #12
    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)
    Heh heh, on clubscreen.css, line 19, you have

    Code:
    caption, th, td {
    text-align: left;
    font-weight: normal;
    }
    This overrides your bold rule.

  13. #13
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,364
    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

  14. #14
    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.

  15. #15
    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

  16. #16
    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

  17. #17
    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
  •