Jump to content

custom border for content


brotha bran

Recommended Posts

i am building a simple site for my buddy who does photography. in the past i have used iframes to display the main content of sites, and am doing it similarly this time. the problem is he wants a custom border that he has sketched out. i'm assuming this will be done using some sort of css or div, but i can't quite figure it out. the content (probably in an iframe, will be in between this frame (which has a transparent background). anyone have any ideas here? thanks!same type of deal as this site: http://misprintedtype.com/v3/start.php

Link to comment
Share on other sites

I don't fully understand what you mean with the frames and iframe, but I do know how it could be possible to place anything inside a custom border :)You have one table, with nine cells, three rows and columns. The middle cell has the content iframe, the corners hold the corner images of the custom border, and the middle top, right, bottom and left cells the side images of the custom border. These images can be either just image elements in the cells, or a background. In both cases, the dimensions of all those cells should be defined in the stylesheet, so the table would be as big as the content with the custom border (no more and no less)Do you understand this? Or should I give an example code? :)

Link to comment
Share on other sites

That site you linked to doesn't use iframes, it uses a table like what Dan is describing. A 3x3 table with a large cell in the middle (for the content), and the outer cells holding the top-left corner, top border, top-right corner, right border, bottom-right corner, bottom border, bottom-left corner, and left border, counted clockwise. On another note, that is the single most random website I've ever seen.

Link to comment
Share on other sites

And what Dan is describing is better for you anyway. iFrames and Frames are not picked up by Web Searches in the manner you would like them to, therefore, using css/tables in your site is a much more search-friendly method for your friend's site.Good luck!

Link to comment
Share on other sites

I'll post an example code as requested (by pm :)) here:

<table border="0" cellspacing="0" cellpadding="0" class="custom_border"><tbody><tr><td class="corner_cborder" id="left_top"> </td><td class="top_cborder"> </td><td class="corner_cborder" id="right_top"> </td></tr><tr><td class="left_cborder"> </td><td class="center_cborder">CONTENT IN HERE</td><td class="right_cborder"> </td></tr><tr><td class="corner_cborder" id="left_bottom"> </td><td class="bottom_cborder"> </td><td class="corner_cborder" id="right_bottom"> </td></tr></tbody></table>
table.custom_border { border:0; //default border turned off width:400px; font-size:1px; }table.custom_border td.corner_cborder { width:5px; height:5px; }table.custom_border td.top_cborder, table.custom_border td.bottom_cborder { width:390px; height:5px; }table.custom_border td.left_cborder, table.custom_border td.right_cborder { width:5px; }table.custom_border td#left_top { background:url(...) no-repeat; }table.custom_border td#right_top { background:url(...) no-repeat; }table.custom_border td#left_bottom { background:url(...) no-repeat; }table.custom_border td#right_bottom { background:url(...) no-repeat; }table.custom_border td.top_cborder { background:url(...) repeat-x; }table.custom_border td.bottom_cborder { background:url(...) repeat-x; }table.custom_border td.left_cborder { background:url(...) repeat-y; }table.custom_border td.right_cborder { background:url(...) repeat-y; }table.custom_border td.center_cborder { width:390px; font-size:14px; }
Where the images are, in the correct order, together a border of 5px width. The images can be defined in the css, and all styles may be adjusted exept for the repeats. They should be left allone, else the border would grafically not come out as it was intended, at when the dimensions are incorrect.Success :)[*Edit:]If you want the center cell to have a predefined height, and scrollbars in it when overfowed, add this to the statments of the last selector (the center cell):
height:300px; overflow:scroll;
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
×
×
  • Create New...