convert this table in to css layout

KevinG · 12-06-2005, 02:54 PM

Hi everybody

How can I convert the pricing table down the right of this site - http://www.conveyancy.com/ into a non table div structure.

I cannot figure it out, other than to use a seperate div for each cell row.

bazz · 12-06-2005, 03:00 PM

kevin, do you specifically want it to be non-tabled?

As far as I can tell, it is tabular data so, tabling it would keep the symantic bunch happy

Bazz.

KevinG · 12-06-2005, 03:05 PM

i drew a blank 2 col, 19 row table and then tried to style it with the colours and cell spacing etc but it would not render correctly.

TheShaner · 12-06-2005, 03:34 PM

No reason to use a non-table approach for that. Tables are not the devil, lol. They're just not supposed to be used for designing the layout of the website. For data like you're displaying, tables are the perfect answer

-Shane

KevinG · 12-06-2005, 03:40 PM

Thanks Shaner

(lucky sod - orlando)

KevinG · 12-06-2005, 07:19 PM

I have used this styling for my table:

#conveyancingtable{
background: #9966FF;
width: 385px;
text-align: center;
height: auto;

but my text appears in each cell crushed to the top and with about 10-15px of space underneath before the next cell begins. i want my text to appear in the middle of each cell both Hori and Vert.

i have tried assigning a height to each cell, that made no difference.

TheShaner · 12-06-2005, 08:41 PM

Haha, Orlando's nice as long as you keep out of rush hour traffic

lol

You need to include a padding of auto. This will pad your text evenly and center it both hor. and vert. in your cell. Also, is that class for the table or for your td's? Do something like this if that's for your table.

Code:

#conveyancingtable {
  background: #9966FF;
  width: 385px;
  text-align: center;
}
#conveyancingtable td{
  background: #9966FF;
  padding: auto;
  text-align: center;
}

This will set both the table and td background to the same color. And for the td's, all text will be centered.

Also, if you validate this CSS, you'll get warnings saying that you didn't specify a font color, so remember to do that.

-Shane

KevinG · 12-06-2005, 09:12 PM

tried that, still same problem.

text is appearing centre on H, but vertically its appear top of cell

i have been to orlando twice, $2 breakfasts, boston lobster etc the best!

_Aerospace_Eng_ · 12-06-2005, 09:17 PM

padding:auto; doesn't work like you think it would try this

Code:

#conveyancingtable {
  background: #9966FF;
  width: 385px;
  margin:auto;
}
#conveyancingtable td{
  vertical-align:middle;
  text-align: center;
}

TheShaner · 12-06-2005, 09:18 PM

You're not using valign in your table, are you? lol Maybe someone with better skills with CSS can help you out here. If anything, set a preferred padding on top and bottom instead of auto. Or if you don't want any padding, set it to 0.

Or hey, AE just came to the rescue, hehe. Forget my entry.

-Shane

KevinG · 12-06-2005, 09:50 PM

nope, text in table cell although centred hori, is still appearing top vertically

TheShaner · 12-06-2005, 09:52 PM

Is code available to look at? Would need to see the code for the table and the relevant CSS code that is being applied to it.

-Shane

KevinG · 12-06-2005, 10:23 PM

<table border="0" cellpadding="0" cellspacing="0" id="conveyancingtable">
<tr id="conveyancingtable">
<td><h5>Sale + Purchase Fees<br />
Property Price</h5></td>
<td bgcolor="#FFFFFF"><h5>Solicitor Fee<br />
(excluding vat & costs)</h5></td>
</tr>
<tr>
<td><h5>121122</h5></td>
<td bgcolor="#FF0000"><h5>121122</h5></td>
</tr>
<tr>
<td><h5>121122</h5></td>
<td><h5>121122</h5></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

-----------------
}

#conveyancingtable {
background: #9966FF;
width: 385px;
margin:auto;
}
#conveyancingtable td{
vertical-align:middle;
text-align: center;
}

-------------

i have never had this prob b4.

_Aerospace_Eng_ · 12-06-2005, 11:17 PM

Well you used the same id twice. Once in the tr and once in the table. Take out the one in the tr. It works in Firefox as expected. IE doesn't like the idea of vertical aligning the h5's taking the text out of the h5 will make it work. I don't see the need for a header in your situation.