...

View Full Version : css for div with hrefs and HR inside table cell



bazz
01-25-2005, 07:13 PM
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


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

_Aerospace_Eng_
01-25-2005, 09:01 PM
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

bazz
01-25-2005, 10:08 PM
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.



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.


.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

rmedek
01-25-2005, 11:55 PM
It would help if you posted the html :D

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:


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

bazz
01-26-2005, 02:41 PM
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



<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


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

ronaldb66
01-26-2005, 03:10 PM
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.

bazz
01-26-2005, 03:41 PM
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







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



<?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 (http://.com/cgi-bin/Meal_Menus/publicindex2.pl/Tabledhote)

Bazz

ronaldb66
01-26-2005, 04:10 PM
Okay, let's clean up.
This one:

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

bazz
01-26-2005, 04:36 PM
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. :o 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

bazz
01-29-2005, 08:49 PM
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



<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



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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum