468,783 Members | 1,616 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,783 developers. It's quick & easy.

A border on the right side of the window?


I am trying to put a graphical border along the top, left, and right edges
of a page. For left and top I have an oversize GIF with the proper
graphics used as the background-image of either the body or an inside div.
For the right, I tried a floated div of height: 100% and with the
complementary right border as the background-image, and containing a
1-pixel high transparent GIF.

This simplified example does not work:

http://www.web-ho.com/temp/index.html

(The same result obtains if the styles for #window are applied directly to
the body.)

Both HTML and CSS validate, but the floated div is the height of the
transparent GIF instead of 100% of the containing div or body. How can I
force the div to extend the full size of the window (and no more so as not
to introduce unneeded scroll bars)? I do not want to constrain the width
of the page, so a fixed-size image won't do.

Pierre
--
Pierre Jelenc | New on Home Office Records: Ethan Lipton
| www.homeofficerecords.com www.ethanlipton.com
The Gigometer | Pepper Of The Earth: the HO blog
www.gigometer.com | www.homeofficerecords.com/blog
Sep 24 '05 #1
3 1615
rc**@panix.com (Pierre Jelenc) wrote:
I am trying to put a graphical border along the top, left, and right edges
of a page.


Plenty of examples of how to do that on the web:
http://www.google.com/search?q=css+rounded+borders

--
Spartanicus
Sep 24 '05 #2
Working example Firefox only it seems, (I miss the left-top border in IE):
Changed: height: 100% on body. Rest could be kept the same.

<style type="text/css" media="screen">
<!--
body {margin: 0; padding: 0; background-color: #fff; color: #000080;
font-family: Arial, Helvetica, sans-serif; height: 100%; }

#window {margin: 0; padding: 0; width: 100%; height: 100%;background-image:

url(gradient2.gif);
background-position: top left; background-repeat: no-repeat;
background-attachment: fixed;}
#main p {text-indent: 2em;}

#rightborder {float: right; background-image: url(gradient2r.gif);
width: 16px; height: 100%; }

-->
</style>
Sep 24 '05 #3
Spartanicus <in*****@invalid.invalid> writes:
rc**@panix.com (Pierre Jelenc) wrote:
I am trying to put a graphical border along the top, left, and right edges
of a page.


Plenty of examples of how to do that on the web:
http://www.google.com/search?q=css+rounded+borders


Thanks. I didn't think of searching for rounded corners, since mine are
beveled...

Pierre
--
Pierre Jelenc | New on Home Office Records: Ethan Lipton
| www.homeofficerecords.com www.ethanlipton.com
The Gigometer | Pepper Of The Earth: the HO blog
www.gigometer.com | www.homeofficerecords.com/blog
Sep 24 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

10 posts views Thread by Vigil | last post: by
21 posts views Thread by Viken Karaguesian | last post: by
16 posts views Thread by FuzzyLogik | last post: by
6 posts views Thread by Hacking Bear | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.