Jump to content

Help with rounded corner width and height


Norman
 Share

Recommended Posts

Hi guys. I need another help. :) I've done this:roundedcornerli4.th.jpgCode:

<div> <!-- message --> <table cellspacing="0" cellpadding="0" border="0" style="width: auto;"> <tr> <td style="padding: 0px"><img src="images/message/b_01.gif"></td> <td style="padding: 0px" background="images/message/b_02.gif"></td> <td style="padding: 0px"><img src="images/message/b_03.gif"></td> </tr> <tr> <td valign="top" style="padding: 0px" background="images/message/b_04.gif"> <img src="images/message/b_05.gif"></td> <td style="padding: 0px; background-color: #ffffff" bgcolor="#ffffff"> <div id="post_message_$post[postid]">$post[message]</div> </td> <td style="padding: 0px" background="images/message/b_06.gif"></td> </tr> <tr> <td style="padding: 0px"><img src="images/message/b_07.gif"></td> <td style="padding: 0px" background="images/message/b_08.gif"></td> <td style="padding: 0px"><img src="images/message/b_09.gif"></td> </tr> </table> <!-- / message --> </div>

My problem is that I want to set a default width and a default height. If I put somethinglike this:

<div> <!-- message --> <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;"> <tr> <td style="padding: 0px"><img src="images/message/b_01.gif"></td> <td style="padding: 0px" background="images/message/b_02.gif"></td> <td style="padding: 0px"><img src="images/message/b_03.gif"></td> </tr> <tr> <td valign="top" style="padding: 0px" background="images/message/b_04.gif"> <img src="images/message/b_05.gif"></td> <td style="padding: 0px; background-color: #ffffff" bgcolor="#ffffff"> <div id="post_message_$post[postid]">$post[message]</div> </td> <td style="padding: 0px" background="images/message/b_06.gif"></td> </tr> <tr> <td style="padding: 0px"><img src="images/message/b_07.gif"></td> <td style="padding: 0px" background="images/message/b_08.gif"></td> <td style="padding: 0px"><img src="images/message/b_09.gif"></td> </tr> </table> <!-- / message --> </div>
I get this error:roundedcorner2wr0.th.jpgHow do I fix it? I want a default width and a default height (that it could change, depending on the text lenght)..
Link to comment
Share on other sites

You need to have a fixed size for all of the cells that include the border images. The borders on the left should all have a specific width, the borders on the right should all have a specific width, and the borders on top and bottom should tile horizontalls but still have a specific height. You also want the left and right borders to tile vertically, so you might need to move the pointer graphic from the middle left to the upper left so that the middle can tile.

Link to comment
Share on other sites

There is an Italian site below.This is about Web 2.0 design. Googlespanky corners Alex Walker site:http://www.sitepoint.comMore precisely thishttp://www.sitepoint.com/blogs/2006/05/02/...-no-javascript/SitePoint is the best source I know of since all of the solutions listed below (including the Italian) have drawbacks.Links: http://www.alistapart.com/articles/customcorners/http://www.alistapart.com/articles/customcorners2/http://www.vertexwerks.com/tests/sidebox/Inspirations for the above see:http://www.alistapart.com/articles/slidingdoors/http://www.alistapart.com/articles/slidingdoors2/Other solutions:http://www.html.it/articoli/nifty/index.html or Google nifty corners site:http://www.html.ithttp://www.spiffycorners.com/

Link to comment
Share on other sites

Great! I've solved using this code:

<div align="center"><!-- message --><table cellspacing="0" cellpadding="0" border="0" style="width: auto;"><tr><td style="padding: 0px"><img src="images/message/b_01.gif"></td><td style="padding: 0px" background="images/message/b_02.gif" width="100%"></td><td style="padding: 0px"><img src="images/message/b_03.gif"></td></tr><tr><td valign="top" style="padding: 0px" background="images/message/b_04.gif"><img src="images/message/b_05.gif"></td><td style="padding: 0px; background-color: #ffffff" bgcolor="#ffffff"><div id="post_message_$post[postid]">$post[message]</div><br /></td><td style="padding: 0px; height: 80px;" background="images/message/b_06.gif"></td></tr><tr><td style="padding: 0px"><img src="images/message/b_07.gif"></td><td style="padding: 0px" background="images/message/b_08.gif" width="100%"></td><td style="padding: 0px"><img src="images/message/b_09.gif"></td></tr></table><!-- / message --></div>
:)Thank you for your posts!
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...