| News | |
 |
Latest |
|
Archive |
|
Community news |
| Articles | |
|
C++ |
|
Communities and Content |
|
Databases |
|
Editorials |
|
Emacs |
|
General |
|
HTML |
|
Java |
|
Notices |
|
PHP |
|
XML |
| Links | |
|
Apache |
|
C++ |
|
Database |
|
General |
|
HTML |
|
Java |
|
Javascript |
|
Linux |
|
Object oriented programming |
|
Open source |
|
Perl |
|
PHP |
|
Python |
|
Ruby |
|
SOAP |
|
XML |
|
Suggest a link |
| About | |
|
Advertise on zez |
|
Contribute |
|
Contact us |
|
About zez |
S-t-r-e-t-c-h-i-n-g your HTML |
The border around the center text consists of eight images; four corners, and four sides:
The corners are put in by using regular image tags, but the sides are repeating background images. Transparent GIF's fills the otherwise empty side cells; this is to prevent the cells from collapsing in some browsers.
The main problem is how to get all the pieces of the border to stick together without getting any unwanted gaps between the cells. It's usually pretty easy to do this in any one particular browser, but if we want reasonable cross browser compatibility (and we want that, don't we?) we may need to apply some tricks.
One important point to remember is if an element (like an image) doesn't fit into the space you've set aside for it (like a table cell of absolute proportions), it'll just squeeze in and make room for itself anyway.
Width
The total width of the "box" has to be set, and this is done in the width attribute of the table tag. In the example above this is set to an exact pixel width; if we want it to stretch over the whole width of the browser window we set it to 100%. If the width is set to just 1% it'll wrap as close as it gets around the content of the center cell.The width of each cell is set in pixels, and it's only necessary to declared this in the top row. The left and right cells are set to only 1 pixel each, and this makes them wrap tight around the images inside. If the width of the cells were set to the same pixel width as the images you could risk getting gaps in some browsers under certain circumstances. The width of the center cells are set to "" (nothing), which makes them as wide as the rest of the horisontal width available, i.e. stretch as far as they have space.
Attached files:
Comment List
| Topic: | Author: | Time: |
|---|---|---|
| Thank you | Eleonora Slipchenko | 03.12.2001 21:01 |
|
I have spent so much time trying to build the perfect template using borders. I couldn't find a tutorial anywhere. You have simplified a lot for me. Now I can redesign my template and apply it properly with this code.
|
||
| Great Article | Kalos Jones | 13.11.2001 21:05 |
|
This is a great article. I was wondering how to create a table with images as the border. Thanks for such a great help. |
||
| Great article on a tricky subject | Chris Mason | 20.06.2001 15:13 |
|
I've spent hours getting this right on many sites, this article explains it clearly.
|
||
