Jump to content

How do I optimize this rounded corners code?


Recommended Posts

Hi guys. After some online test, I've seen that this code is really slow to charge in my web pages. I would like to optimize it, but I don't know how can I do it. I want the same effect below:roundedtablefc3.gifThis is my current code:

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

Link to post
Share on other sites

Well, using divs and CSS you can get quick loading round corners. But you MUST know the width and height of the images you're using. I'm afraid I can't assure you it will work out correctly because you need to base the code on the size of the images, but try this:HTML code:

<div class="topleft">   <div class="topright">      <div class="topmid">      </div>   </div></div><div class="left">   <div class="right">      <div class="mid">      </div>   </div></div><div class="bottomleft">   <div class="bottomright">      <div class="bottommid">      </div>   </div></div>

CSS in the head or separate stylesheet:

.topleft {background: url(skin/message/b_01.gif) top left no-repeat;}.topright {background: url(skin/message/b_03.gif) top right no-repeat;}.topmid {background: url(skin/message/b_02.gif) top right repeat-x;height: 10px; /* This height must be the height of the background image used */   padding: 0px 10px 0px 10px;   /* The first and third should be 0px, the second is the width       of the top right corner image and the fourth is the width        of the top left corner image */}.left {background: url(skin/message/b_04.gif) top left repeat-y;}.right {background: url(skin/message/b_06.gif) top left repeat-y;}.mid {background: url(skin/message/b_05.gif) center left no-repeat;   padding: 0px 10px 0px 10px;   /* The first and third should be 0px, the second is the width       of the right border image and the fourth is the width        of the left border image */}.bottomleft {background: url(skin/message/b_07.gif) top left no-repeat;}.bottomright {background: url(skin/message/b_09.gif) top right no-repeat;}.topmid {background: url(skin/message/b_02.gif) top right repeat-x;height: 10px; /* This height must be the height of the background image used */   padding: 0px 10px 0px 10px;   /* The first and third should be 0px, the second is the width       of the bottom right corner image and the fourth is the width        of the bottom left corner image */}

Link to post
Share on other sites

I think this should work. I've applied the widths and heights of the given images.

.topleft {background: url(skin/message/b_01.gif) top left no-repeat;}.topright {background: url(skin/message/b_03.gif) top right no-repeat;}.topmid {background: url(skin/message/b_02.gif) top right repeat-x;height: 17px; /* This height must be the height of the background image used */padding: 0px 20px 0px 28px;/* The first and third should be 0px, the second is the widthof the top right corner image and the fourth is the widthof the top left corner image */}.left {background: url(skin/message/b_04.gif) top left repeat-y;}.right {background: url(skin/message/b_06.gif) top left repeat-y;}.mid {background: url(skin/message/b_05.gif) center left no-repeat;padding: 0px 18px 0px 28px;/* The first and third should be 0px, the second is the widthof the right border image and the fourth is the widthof the left border image */}.bottomleft {background: url(skin/message/b_07.gif) top left no-repeat;}.bottomright {background: url(skin/message/b_09.gif) top right no-repeat;}.topmid {background: url(skin/message/b_02.gif) top right repeat-x;height: 17px; /* This height must be the height of the background image used */padding: 0px 20px 0px 28px;/* The first and third should be 0px, the second is the widthof the bottom right corner image and the fourth is the widthof the bottom left corner image */}

Oh, I forgot to mention, the text and content goes here:

<div class="topleft"><div class="topright"><div class="topmid"><!-- Nothing here --></div></div></div><div class="left"><div class="right"><div class="mid"><!-- Begin content --><div id="post_message_$post[postid]">$post[message]</div><!-- End content --></div></div></div><div class="bottomleft"><div class="bottomright"><div class="bottommid"><!-- Nothing here --></div></div></div>

Link to post
Share on other sites

OK, Sorry for the result before, I hadn't tested it myself before. This one works for me:

.topleft {background: url(skin/message/b_01.gif) top left no-repeat;}.topright {background: url(skin/message/b_03.gif) top right no-repeat;padding: 0px 20px 0px 28px;/* The first and third should be 0px, the second is the widthof the top right corner image and the fourth is the widthof the top left corner image */}.topmid {background: url(skin/message/b_02.gif) top right repeat-x;height: 17px; /* This height must be the height of the background image used */}.left {background: url(skin/message/b_04.gif) top left repeat-y;}.right {background: url(skin/message/b_06.gif) top right repeat-y;margin-right: 2px;padding: 0px 18px 0px 0px;/* The first and third should be 0px, the second is the widthof the right border image and the fourth is the widthof the left border image */}.mid {background: url(skin/message/b_05.gif) center left no-repeat;padding-left: 28px;}.bottomleft {background: url(skin/message/b_07.gif) top left no-repeat;}.bottomright {background: url(skin/message/b_09.gif) top right no-repeat;padding: 0px 20px 0px 28px;/* The first and third should be 0px, the second is the widthof the bottom right corner image and the fourth is the widthof the bottom left corner image */}.bottommid {background: url(skin/message/b_08.gif) top right repeat-x;height: 17px; /* This height must be the height of the background image used */}

Link to post
Share on other sites

Oh, just change the part of code for .mid so that it's like this:.mid {background: url(skin/message/b_05.gif) center left no-repeat #FFFFFF;padding-left: 28px;}

Link to post
Share on other sites

That can be solved too... I just keep messing up.Change your HTML code so that it's like this (adding a new <div class="conten">:

<div class="topleft"><div class="topright"><div class="topmid"><!-- Nothing here --></div></div></div><div class="left"><div class="right"><div class="mid"><div class="content"><!-- Begin content --><!-- End content --></div></div></div></div><div class="bottomleft"><div class="bottomright"><div class="bottommid"><!-- Nothing here --></div></div></div>

Then make the CSS like this:

.mid {background: url(skin/message/b_05.gif) center left no-repeat;padding-left: 28px;}.content {background-color: #FFFFFF;}

Link to post
Share on other sites

Ok, the time to set it on my forum, and I have two new problems! :)First, I would like to have the image n. 5 always at the top of my box. This is what I want:http://img220.imageshack.us/img220/5223/goodyu5.jpgAnd this is what I get when I have a long post:http://img220.imageshack.us/img220/9923/badyu3.jpgSecond:In some posts I see this error:http://img251.imageshack.us/img251/7526/buhlu1.jpgWhy? :)And, as last, I would like to set a standard height and width for my message box.. how do I do this?

Link to post
Share on other sites

To solve your first problem you just need to change the CSS:.mid {background: url(skin/message/b_05.gif) top left no-repeat;padding-left: 28px;}About the second one. I really am not sure of a good method how to do it. It happens when you put <p> or <form> elements inside this kind of structure. One thing you can do it put a line break before and after the content:...<div class="content"><br /><!-- content goes here --></br /></div>...To give a fixed width or height to the box you can do this:<div class="all"><div class="topleft"><div class="topright"><div class="topmid"><!-- Nothing here --></div></div></div><div class="left"><div class="right"><div class="mid"><div class="content"><!-- Begin content --><!-- End content --></div></div></div></div><div class="bottomleft"><div class="bottomright"><div class="bottommid"><!-- Nothing here --></div></div></div></div>And use the following CSS:

.all {width: 400px;height: 200px;}.content {overflow: auto;}

Link to post
Share on other sites
  • 2 weeks later...

Hey Ingolme, I still have the second problem (I don't want to add a <br /> space).. I get that problem only when I quote a message or when I add a [ code ]/[ html ]/ect tag. They call another part of code and it breaks the box. For example, this is my [ code ] tag code:

<div style="margin:20px; margin-top:5px">	<div class="smallfont" style="margin-bottom:0px"><img src="$stylevar[imgdir_misc]/code.gif" border="0" /></div>	<pre class="alt2" dir="ltr" style="		margin: 0px;		padding: $stylevar[cellpadding]px;		border: 1px inset;		width: $stylevar[codeblockwidth];		height: {$blockheight}px;		text-align: left;		overflow: auto">$code</pre></div>

Link to post
Share on other sites
  • 3 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...