This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > September 2005 > A border on the right side of the window?
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
A border on the right side of the window?
|
|
| Pierre Jelenc 2005-09-24, 4:21 am |
|
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
| |
| Spartanicus 2005-09-24, 4:21 am |
| rcpj@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
| |
| Van der Weij 2005-09-24, 4:21 am |
| 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>
| |
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|