Forum Moderators: not2easy
I have an app that creates pages that can vary in length. I would like a page border that will appear on each page. If I set the BODY border (e.g solid 1px black) then the first page only shows the top/left/right borders. Not the bottom. I understand why, but what I want is a full page border on each page. I read that @page doesn't (css2) doesn't allow border or padding properties. Any ideas?
Thanks in advance,
Paul
<body>
<div id="your_border">
...
</div>
</body>
Then I'd set the CSS to kill off the body's padding...
html, body {
padding: 0px;
}
Next since most people refer to the body's padding as margin I'd patch it to also get rid of these "margins"...
html, body {
margin: 0px;
padding: 0px;
}
Next I'd give a border to the #your_border divisible element...
#your_border {
border: #000 dashed 4px;
}
Lastly I'd stretch it to make it appear around the entire body...
#your_border {
border: #000 dashed 4px;
height: 100px;
width: 100px;
}
Now I think if you add enough content to make the page scroll that the border may scroll up with the contents of the page. There are some ways I would approach this. First off you could make #your_border's position fixed...
#your_border {
border: #000 dashed 4px;
height: 100px;
position: fixed;
width: 100px;
}
That may or may not work.
What I really like is an iframe emulation however! I absolutely position a #head with the menu at the top of my pages, give the #body divisible element enough width and cover it's top border with the #head so the top scrollbar up button doesn't become hidden.
Here is a working example of my current layout. It's also naturally SEO with the content appearing at the top of the page with the menus and other non-content HTML appearing at the bottom.
<html>
<head>
<title></title>
<style type="text/css">
#body {
border: #000 solid;
border-width: 51px 1px 1px 1px;
bottom: 1px;
left: 1px;
overflow: auto;
position: absolute;
right: 1px;
top: 1px;
}
#head {
background: #666;
color: #fff;
height: 50px;
position: absolute;
left: 2px;
right: 2px;
top: 2px;
}
div.reallylong {
height: 1600px;
}
html, body {
margin: 0px;
padding: 0px;
}
</style>
</head><body>
<div id="body">
<div class="reallylong">
<h1>Your Page Description Here</h1><p>stuff</p>
<p>stuff</p>
<p>stuff</p>
</div>
</div><div id="head">
<div id="menu"><span>your menu can be placed here after the content</span></div>
</div></body>
</html>
Hopefully my demo both gets the point across and is still simple enough to understand (not sure how good your HTML/CSS skills are). Let me know and have fun!
- John
[edited by: JAB_Creations at 7:26 pm (utc) on Mar. 8, 2007]
Thanks for your reply... I tested it out (my CSS and HTML are pretty good)... But this gives the same results. If I fill your HTML example with enough blurb to get it on 2 or more pages, then first page only has three borders - top, left and right. Only the final page has the bottom border. Do you see my problem? I want 4 borders on each and every page, no matter how many pages there are.
Any more ideas?
Thanks for the reply though, I did pick up something new from your CSS.
Paul
I need a full page border on EACH page that's printed. My code produces text that may span more than one page.
Thanks.
.. some browsers (Opera) suppress the printing of borders (or they used to) in the same way they do for background color and images. It should really be a user pref whether or not page decoration is printed.
I think the best you can have is what you've got - border around body, with the break. If you use page-break rules to force where the breaks are to be you could possibly stick in an underlined div before or after it to simulate the 'missing' bottom/top border.
see: more on print stylesheets [css-discuss.incutio.com]
