|
|
| Author |
Message |
nme
Joined: 04 Oct 2004
Posts: 2
|
 Posted: Mon Oct 04, 2004 6:34 pm Post subject: How to create rectangles with rounded edges... and more... |
 |
|
ok, so take a look at this link.
http://www.national-lottery.co.uk/
see the image to the right with title "rollover email alerts"
I've been trying unsuccesfully to create a similiar rectangular shape - similiar to the above with rounded edges on opposite corners, and I just cannot get this to work right. I've looked at the source, and I figure that they are doing this by drawing a rectangle with circular edges and using tables, where you set the corners of the tables to use the circular corner images, as backgrounds - thats fine. Now, how do you get the straight sides to work? I need the tables to grow or shrink relative to the content in the table. If I use a static image, i get the following behaviour
http://mediamagic.webhostme.com/index.html
so looking further at the table images, i see that for the straight edges, they use a table cell that is 1 pixel wide, with a background color the same as the color of the table corners. Great - this should work, but i'm getting all sorts of distortion with my tables, and can't really afford to spend hours on each seperate table. Can anyone suggest the following :
1. a tutorial to outline step by step the best way to achieve this.
2. whether there exist any applications that will do this for you.
3. how best to create outlines of rectangular shapes with round edges. |
|
|
|
|
 |
BryanDowning
Joined: 05 Jul 2004
Posts: 1554
Location: California, USA
|
| Posted: Mon Oct 04, 2004 9:45 pm Post subject: |
|
|
It's actually pretty simple.
HERE'S THE CODE:
| Code: |
<table cellpadding="0" cellspacing="0" border="0" width="500" height="300">
<tr>
<td height="20" width="20"><img src="topleft.gif" height="20" width="20"></td>
<td><img src="top.gif" height="20" width="100%"></td>
<td height="20" width="20"><img src="topright.gif" height="20" width="20"></td>
</tr>
<tr>
<td><img src="left.gif" height="100%" width="20"></td>
<td>HELLO!!!</td>
<td><img src="right.gif" height="100%" width="20"></td>
</tr>
<tr>
<td height="20" width="20"><img src="bottomleft.gif" height="20" width="20"></td>
<td><img src="bottom.gif" height="20" width="100%"></td>
<td height="20" width="20"><img src="bottomright.gif" height="20" width="20"></td>
</tr>
</table> |
KEY POINTS:
- Make sure you have border, cellpadding and cellspacing set to zero.
- Make sure the corner images are in their own table datas with specified widths and heights.
- Make sure the top and bottom images have a width of 100%, and the left and right have a height of 100%.
- Use width and height in the table tag to define to size of your rectangle.
- Put all your content in the middle table data of the middle row. (Use valign="top" in the <td > if you want it to be aligned top.
CLICK HERE TO SEE IT ON THE WEB
_________________
Best Regards,
Bryan Downing
bryandowning.com |
|
|
|
|
|
BryanDowning
Joined: 05 Jul 2004
Posts: 1554
Location: California, USA
|
| Posted: Mon Oct 04, 2004 9:52 pm Post subject: |
|
|
You may also be able to do it in CSS.
You can do it using background colors for a cell as well if you want to cut back on load time.
_________________
Best Regards,
Bryan Downing
bryandowning.com |
|
|
|
|
|
nme
Joined: 04 Oct 2004
Posts: 2
|
| Posted: Tue Oct 05, 2004 7:37 am Post subject: |
|
|
Hi Oybro,
thanks for the rapid response. This seems like what i want to do, except i'd prefer to do it with CSS, to improve load times. Additionally, your example in the link above, when using purely images, distorts just like mine have in the past - take a look.
I'd be interested in hearing more about how you'd achieve the above with CSS - that would surely avoid the distortion we're seeing with full images.
how does the 1x1 transparent placeholder image work?
suggestions?
thanks
nme |
|
|
|
|
|
BryanDowning
Joined: 05 Jul 2004
Posts: 1554
Location: California, USA
|
| Posted: Tue Oct 05, 2004 5:41 pm Post subject: |
|
|
Agh... I didn't test it in IE. It works now. Here's the updated code:
| Code: | <table cellpadding="0" cellspacing="0" border="0" width="500" height="300">
<tr>
<td height="20" width="20"><img src="topleft.gif" height="20" width="20"></td>
<td><img src="top.gif" height="20" width="100%"></td>
<td height="20" width="20"><img src="topright.gif" height="20" width="20"></td>
</tr>
<tr>
<td height="100%"><img src="left.gif" height="100%" width="20"></td>
<td>HELLO!!!</td>
<td height="100%"><img src="right.gif" height="100%" width="20"></td>
</tr>
<tr>
<td height="20" width="20"><img src="bottomleft.gif" height="20" width="20"></td>
<td><img src="bottom.gif" height="20" width="100%"></td>
<td height="20" width="20"><img src="bottomright.gif" height="20" width="20"></td>
</tr>
</table> |
I don't know off hand how to do it in CSS. I'd have to research it. I can look around if you'd like.
A 1x1 transparent image place holder is easy. You take a 1x1 pixel image in photoshop and make sure its trasparent. Save it as a gif. Then you can make it whatever size you want with the html code. Like this: | Code: | | <img src="tgt.gif" height="300" width="100"> |
_________________
Best Regards,
Bryan Downing
bryandowning.com |
|
|
|
|
|
|
