...

View Full Version : 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 :thumbsup:

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

#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

#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 &amp; 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>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum