Jump to content
  • Advertisement
Sign in to follow this  
phaelax

[web] tables with round corners

This topic is 4619 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I have a table of cells with an image in each corner like so:
 ________
|_|    |_|
| |    | |
|1|    |2|
|_|    |_|
|_|____|_|
	<table border="0" width="100%" height="310" cellspacing="0" cellpadding="0">
      <tr>
        <td width="20" height="20"></td>
        <td width="100%" rowspan="3" background="images/bg.gif" height="310" valign="top"
        align="left"></td>
        <td width="20" height="20"></td>
      </tr>
      <tr>
        <td width="20" background="images/bg.gif" height="270"></td>
        <td width="20" background="images/bg.gif" height="270"></td>
      </tr>
      <tr>
        <td width="20" height="20"></td>
        <td width="20" height="20"></td>
      </tr>
    </table>
I want to be able to change the height of the table without having to manually calculate the side cells (1 and 2). Width isn't giving me a problem, but trying to have 100% for height is. Whatever the height is of the table, I need to set the heights of cells 1 and 2. Each corner image is 20x20, so basically i need those cells to be (TABLE_HEIGHT - 20). Is there a way I can get the table's height? Or perhaps lock those corner cells to always be 20x20 when i set the side cells to be 100% height, i know the corners will remain at least big enough to fit whatever is inside of them. (the rounded images) But even though I have the table set for a specific height, it appears to be more than the height of the page.

Share this post


Link to post
Share on other sites
Advertisement
Setting the height for the corners to 20 and the height of cells (1) and (2) to "*" might work.

I don't know what your rounded corners look like. Do they have transparent background or is it in a solid colour (i.e. the background colour of your page)? In that case you could change the table's layout. You could drop cells (1) and (2), and use one cell for each corner

--------
| | | |
|1| |2|
|_| |_|
| | | |
|3| |4|
| | | |
--------

Now, for cells (1)-(4) you could you a 20x20 image of your rounded corner as a background image in CSS, set to the upper left (or accordingly to (2)-(4) ) with no repeat. Next, set the background colour of cell (1) to the foreground colour of the whole table.


Mozilla Firefox supports rounded corners in CSS so you just need to create a standard table, but obviously this is ignored in IE and other browsers.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!