Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    css for div with hrefs and HR inside table cell

    Hi,

    I have a table cell inside of which, I will have hrefs or HR. I have tried this css, modded from one that works only as usual, I have busted it

    Please can somebody asist with the correct code

    Here's my effort
    Code:
    div#title{
    color : #000;
    }
    
    .title hr
    {
    	color : #000;
    }
    
    
    .title a:link, .title a:visited, .title a:hover, title a:hover,
    {
    	font-weight : bold; 
    text-decoration : none; 
    color : #977F78;
    background-color : transparent; 
    	
    
    }
    
    .title a:hover
    {
    	text-decoration: none;
    	background-color: transparent;
    	
    	color : #BD75A0;
    }

    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    can u post your code please i have a feeling that you are mixing up ids and classes when classes should be ids or ids should be classes not to sure from just the css

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    There ya go. I hadnt thought of that id/class part so I'm away to test it now.

    <div class="title"> is the relevant bit of code.

    Edit:

    Oh yeh just remembered; don't we have to use class if the instance is used more than once? I sem to rememeber that from somewhere and it is used more than once on the page.



    Here's a revision of the code and it uses classes.
    Code:
    .title
    {
    	color : #000000;
    	
    }
    
    .title hr { 
    color : #000000;
    }
    
    .title a:link, .title a:visited, .title a:hover, .title a:hover,
    {
    	font-weight : bold; 
    text-decoration : none; 
    color : #977F78;
    background-color : transparent; 
    	
    
    }
    
    .title a:hover
    {
    	text-decoration: none;
    	background-color: transparent;
    	
    	color : #BD75A0;
    }
    Put simply, none of it works.



    Bazz
    Last edited by bazz; 01-25-2005 at 09:28 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    It would help if you posted the html

    I'm gonna take a guess, though... If you're trying to apply style rules inside a table, I like to do it like this:
    Code:
    HTML:
    
    <table id="example">
     <tr>
      <td><a href="#">no underline</a></td>
      <td>blue</td>
     </tr>
    </table>
    
    CSS:
    
    #example table {
     border: none;
     padding: 10px;
     }
    
    #example table td a {
     text-decoration: none;
     }
    
    #example table td {
     color: blue;
     }
    Not perfect, but you get the drift... Assign an ID to the table and use descendant selectors to get inside the table and apply your style.

    Is this what you need? If not, post your complete code and we can see why it might not be working...

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    OK here is the css and the html code. I have made prgoress wherein the hrefs are working. However I can't seem to do the same with the 'hr'. I expect I am doing something really simple but, wrongly.

    The classes for the td's are needed too but I'll work on them later

    Code:
    <table id=menu>
    
    <td class=menutitle> Table d'Hôte Menu</td>
    <tr>
    <td class=title_td><a href=/cgi-bin/Meal_Menus/publicdetail.pl/path=Tabledhote&action=View&base=item1>
    Monkfish</a></td>
    <td class=price_td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td class=price_td>£15.00</td>
    </tr>
    <tr>
    <td class=normal_td>
    Monkfish saltimbocca on lime risotto with macedoine of beetroot & rocket burre blanc</td>
    
    <td class=normal_td colspan=2></td>
    </form></tr>
    CSS
    Code:
    div#menu 
    
    #menu table {
     
    border: none;
     
    padding: 10px;
     
    }
    
    
    #menu table td a:link, a:visited, a:active, a:hover {
    font-weight : bold; 
    text-decoration : none; 
    color : #977F78;
    background-color : transparent; 
    }
    
    
    
    #menu table td a:visited {
    color : #977F78; 
    
    }
    
    #menu table td a:hover {
    color : #BD75A0; 
    background-color : transparent; 
    }
    
    
    
    #menu table td hr {
    color: #ffff80;
    }
    Do I understand it rightly when I think, that the table can be child of a div and then each spawned child (td's href's etc.), can be called in the html as a class instead of id?

    any help appreciated

    bazz
    Last edited by bazz; 01-26-2005 at 02:09 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Entire page or link

    Can you please paste the entire page markup, from doctype to html end tag, and not an incomplete snippet? Better still, post a link to the page online so people can see it in their browser.

    Currently, your markup snippet misses the table end tag, contains a misplaced form end tag and has a single cell with no surrounding row. Moreover, the hr you've mentioned before isn't there.

    Better still: try to describe or portray how you want this to look (think preformatted text); I'm pretty sure there are easier ways to create the desired appearance without convoluted colspanning table cells.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Worked on it further so here's my latest effort. All seems to work but for one issue:

    1. the HR shows up in its default appearance rather than in the css scheme that I have 'assigned' it.


    CSS
    Code:
    
    
    
    
    div#menu {
    text-align: center;
    }
    
    #menu table {
     
    padding : 0 75px;
    
    text-align : center;
    
    maxWidth : 500px;
    
    
    }
    
    
    #menu table td.menutitle {
    
    font-family : "Old English Text MT", verdana, sans-serif, helvetica;
    
    font-size : 2em;
    
    font-weight : bold;
    
    color : #004444;
    
    padding-bottom : 20px;
    }
    
    
    
    
    #menu table td.title {
    
    font-family : "Trebuchet ms", verdana, sans-serif, arial, helvetica;
    
    font-weight : bold;
    
    background-color : transparent;
    
    padding : 25px;
    
    text-align : center;
    }
    
    #menu table td.normal {
    font-family : "Trebuchet ms", verdana, sans-serif, arial, helvetica;
    
    background-color : transparent;
    
    text-align : center;
    
    color : #004040;
    
    padding : 0 20px;
    
    
    }
    
    #menu table td.price {
    font-family : "Trebuchet ms", verdana, sans-serif, arial, helvetica;
    
    background-color : transparent;
    
    text-align : right;
    
    color : #004040;
    
    width : 65px;
    }
    
    
    
    
    #menu table td a:link, a:visited, a:active, a:hover {
    font-weight : bold; 
    text-decoration : none; 
    color : #977F78;
    background-color : transparent; 
    }
    
    
    
    #menu table td a:visited {
    color : #977F78; 
    
    }
    
    #menu table td a:hover {
    color : #BD75A0; 
    background-color : transparent; 
    }
    
    
    
    #menu table td.normal hr {
    color: #ffff80;
    }
    HTML
    Code:
    <?xml version="1.0" encoding="utf-8" ?>
    <!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>The CHRIS system Content Manager</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <link rel="stylesheet" type="text/css" href="/stylesheets/globalstyle.css">
    <link rel="stylesheet" type="text/css" href="/stylesheets/updateable_menus_index.css">
    
    
    <link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print">
    
    <body>
    <div class="header">
    
    </div>
    
    
    
    
    <div class="centerdiv">
    <br /><br />
    <div id="menu">
    
    <table>
    <td class="menutitle"> Table d'Hôte Menu</td>
    <tr>
    <td><a href=/cgi-bin/Meal_Menus/publicdetail.pl/path=Tabledhote&action=View&base=item1>
    Monkfish</a></td>
    <td class=price_td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td class=price>£15.00</td>
    </tr>
    <tr>
    <td class=normal>
    Monkfish saltimbocca on lime risotto with macedoine of beetroot & rocket burre blanc</td>
    
    <td class=normal colspan=2></td>
    </form></tr>
    <tr>
    <td><a href=/cgi-bin/Meal_Menus/publicdetail.pl/path=Tabledhote&action=View&base=item2>
    Classic Caesar Salad</a></td>
    <td class=price_td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td class=price>£4.95 / 8.95</td>
    </tr>
    <tr>
    <td class=normal>
    Local Cos Lettuce, Smoked Bacon, Roasted Croutons tossed in the classic Caesar dressing Topped with Shaved Parmesan</td>
    <td class=normal colspan=2></td>
    </form></tr>
    <tr>
    
    <td><a href=/cgi-bin/Meal_Menus/publicdetail.pl/path=Tabledhote&action=View&base=item3>
    Chilli Tiger Prawns</a></td>
    <td class=price_td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td class=price> £5.95 / 11.95</td>
    </tr>
    <tr>
    <td class=normal>
    Seared Chilli Tiger Prawns with Orange and Ginger Dressing with Honey Toasted Pine Kernels</td>
    <td class=normal colspan=2></td>
    </form></tr>
    <tr>
    <td><a href=/cgi-bin/Meal_Menus/publicdetail.pl/path=Tabledhote&action=View&base=item4>
    Unknown</a></td>
    
    <td class=price_td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td class=price>Yet to be included</td>
    </tr>
    <tr>
    <td class=normal>
    No summary</td>
    <td class=normal colspan=2></td>
    </form></tr>
    <tr>
    <td><a href=/cgi-bin/Meal_Menus/publicdetail.pl/path=Tabledhote&action=View&base=item5>
    TEST</a></td>
    <td class=price_td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td class=price>£15-00</td>
    
    </tr>
    <tr>
    <td class=normal>
    TEST</td>
    <td class=normal colspan=2></td>
    </form></tr>
    <tr>
    <td><a href=/cgi-bin/Meal_Menus/publicdetail.pl/path=Tabledhote&action=View&base=item5a>
    test dish</a></td>
    <td class=price_td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td class=price>£0.00</td>
    </tr>
    <tr>
    <td class=normal>
    
    No summary</td>
    <td class=normal colspan=2></td>
    </form></tr>
    <tr>
    <td><a href=/cgi-bin/Meal_Menus/publicdetail.pl/path=Tabledhote&action=View&base=item7>
    Main Courses</a></td>
    <td class=price_td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td class=price></td>
    </tr>
    <tr>
    <td class=normal>
    </td>
    <td class=normal colspan=2></td>
    </form></tr>
    <tr>
    
    <td><a href=/cgi-bin/Meal_Menus/publicdetail.pl/path=Tabledhote&action=View&base=starters_divider>
    </a></td>
    <td class=price_td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td class=price></td>
    </tr>
    <tr>
    <td class=normal>
    <hr></td>
    <td class=normal colspan=2></td>
    </form></tr>
    </table>
    <br /><br /><br />
    </div>
    </div>
    <div class="bottomdiv">
    <p class="addressbox"></p>
    </div>
    
    </BODY>
    </HTML>
    Thanks guys for having taking such time already.

    see the page here

    Bazz
    Last edited by bazz; 02-04-2005 at 07:42 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Pfff...

    Okay, let's clean up.
    This one:
    Code:
    <td class="menutitle"> Table d'Hôte Menu</td>
    is still plain wrong. It a syntactical sin to have a td not sit in a tr; besides that, it's unnecessary. Use a h1, h2 or whatever level header element you deem appropriate and place it before the table; style with CSS.

    Next, remove all the </form> tags from the table; they do not belong there.

    Next, if you're hell-bent on using tables for this, reduce each menu entry to one row with two cells. The title and description go in the first one, using a simple h2, h3 or whatever comes next after the one you used for the page title and a p (paragraph); the second one holds the price. Style the lot with CSS.
    Give the table itself an id, and give the tds holding the prices a class "price" or something.
    Use the table id, header and p elements and the "price" class to address every bit of the markup with unique style rules.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #9
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Ronald Thank you. Just one reminder of a question... how can I get the HR to display correctly. the html code is

    <td><hr></td>

    The css is


    #menu table td hr {
    color: #ffff80;
    }

    That line works for the other elelments in a td so I am expecting that it should have worked for the hr. Surely it is styleable?


    Re. the rest of your post and, the code is now tidied as what you saw were errors that I couldn't find in the perl code that generates it.

    You eluded slightly to using an alternative to tables. I am all ears as I don't really like the code for tables, however, I thought that I wouldn't get the prices to line up with the items, if I used two separate vertical divs. Any advice welcome.

    Bazz
    Last edited by bazz; 01-26-2005 at 03:48 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #10
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    I only thought this was fixed.

    OK I thought I had this working but having now removed from a page, the stylesheet that was there for other reasons, the hrefs dont display correctly.

    I can't see why so wold anyone cast an eye over ot for me?

    here's the html

    Code:
    <table id="table">
    <tr>
    <td><h3> Beers &amp; Spirits </h3></td>
    
    <td></td><td class="price">Price</td>
    </tr>
    <tr>
    <td><a href=/cgi-bin/a_default/Drinks_List/publicdetail.pl/path=Beers_Spirits&action=View&base=item1>
    Vat 19 Golden Rum</a><p> Said by Jilly Goolden to be the best Golden Rum from the Caribbean. Beautifully smooth and refreshing when mixed with any sunshine fruit juice such as orange, pineapple etc.  </p></td>
    <td class="price"></td>
    <td class="price">£2.99</td>
    </tr>
    </table>
    and here's the css

    Code:
    div#menu {
    text-align: center;
    margin : auto auto;
    padding : 0 75px;
    font-size : 1em;
    }
    
    #table {
     
    margin : auto auto;
    padding : 0 75px;
    
    text-align : center;
    
    width : 500px;
    }
    
    
    #table td h3 {
    
    font-family : "Old English Text MT", verdana, sans-serif, helvetica;
    
    font-weight : bold;
    
    color : #000000;
    
    padding-bottom : 20px;
    }
    
    
    
    
    #table td p {
    font-family : "Trebuchet ms", verdana, sans-serif, arial, helvetica;
    
    background-color : transparent;
    
    text-align : left;
    
    color : #000000;
    
    padding : 0 20px;
    
    font-size : 1em;
    width : 500px;
    }
    
    #table td.price {
    font-family : "Trebuchet ms", verdana, sans-serif, arial, helvetica;
    
    background-color : transparent;
    
    text-align : right;
    
    width : 65px;
    
    }
    
    #table td a:link, a:visited, a:active, a:hover {
    font-family : "Trebuchet ms", verdana, sans-serif, arial, helvetica;
    
    font-weight : bold; 
    text-decoration : none; 
    color : #977F78;
    background-color : transparent; 
    font-size : 1em;
    }
    
    
    #table td a:hover {
    color : #BD75A0; 
    background-color : transparent; 
    }
    
    
    
    #table td hr {
    color: #004040;
    }
    edit
    CSS amended at 2017 GMT 29.01.05
    The bit that still can't get working properly is the alignment. In FF its centered (as I would like) in IE its to the left.

    Bazz
    Last edited by bazz; 01-29-2005 at 08:18 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

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