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 14 of 14
  1. #1
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts

    convert this table in to css layout

    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.

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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.
    "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

  • #3
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    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

  • #5
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks Shaner

    (lucky sod - orlando)

  • #6
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    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

  • #8
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!

  • #9
    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
    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;
    }

  • #10
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    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

  • #11
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    nope, text in table cell although centred hori, is still appearing top vertically

  • #12
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    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

  • #13
    Regular Coder KevinG's Avatar
    Join Date
    Aug 2002
    Location
    The Matrix
    Posts
    405
    Thanks
    3
    Thanked 0 Times in 0 Posts
    <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.

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


  •  

    Posting Permissions

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