Instructables

I am trying to get a website to work correctly. Can any HTML wizards help me? Free Pro membership to the best answer!

I am trying to redesign the website that is used by the company I work for.  The company would prefer it if I could make them a site that uses frames.  This is so it will be relatively easy to change/update pages.  I am not very experienced with using frames, but I have made some good progress so far.  I have two questions that I cannot seem to find the answer to.

1.  How do you add a border with a radius around a framed website?

The design that my company liked had a border around it with rounded edges to frame the site.  I have no problem doing this in CSS with a regular website.  However, I cannot get the border to show up around the framed site.

I have tried putting a border around the framed page using CSS.  I have also tried adding the border to select parts of the framed page.  (For example: a rounded border on the top, left, and bottom of the left frame panel.)  This does result in a pseudo-border around the site, but the radius does not show up.  It is just a rectangular outline.

2.  Is it possible to have two overlapping background images?

There is a strong vertical line and horizontal line on the page as design elements.  I would love to have those lines stretch infinitely across the background.  I know how to do this with one image, but can you layer background images on top of each other?

My idea for a solution would be a set of GIF images with transparent sections.  One image would be the horizontal line and the other image would be the vertical.  The place where the two lines meet is a part of the website, so I am not worried about where these images will overlap since they would be in the background.

Libahunt2 years ago
1. Some things just don't take round borders. I haven't tried frames myself, but it is very logical that they don't. Images also don't.

Try putting a div around the frame, give the div round corners and a padding of same size as border-radius.

(Probably you know already, but just in case: Intenet Explorer 8 and older don't show any CSS round borders at all.)

2. CSS3 has multiple backgrounds ( http://www.css3.info/preview/multiple-backgrounds/ ), but the browser support is limited - IE 8 and older are out. It is not too hard to achieve this effect with an addtitional div and have all browsers render it the same.

The general idea:
<body>
<div id="horizontal-bg"></div>
... 

body {
    background: url([vertical-line-image]) repeat-y;
}
#horizontal-bg { 
    width: 100%; 
    height: [hor. line placement from top]; 
    margin-bottom: -[hor. line placement from top]; 
    background: url([horizontal-line-image]) repeat-x; 
} 

Note the minus sign in the bottom margin declaration.


Good luck.


skittlespider (author)  Libahunt2 years ago
Thanks for the answer. I'll have to try it out. The multiple background thing sounds easy enough, but I might not be able to test it out until tomorrow.

Also thanks for the round border info. I wasn't aware of any incompatibilities those had. I didn't realize that was possible to make a round border with just code until about a year ago. In the past I always had to create an image to make it work.

Also, I'm trying to talk them out of the frames thing, because I found out that method might not be valid forever and is already starting to be phased out. We'll see how that goes though.

I'll let you know if your solution works out.
skittlespider (author) 2 years ago
That method worked like a charm! Thank you so much!
Pro

Get More Out of Instructables

Already have an Account?

close

PDF Downloads
As a Pro member, you will gain access to download any Instructable in the PDF format. You also have the ability to customize your PDF download.

Upgrade to Pro today!