CODEWITHSUNDEEP
csshtml
birdus
birdus

Reputation: 7504

Basic printed page layout using HTML and CSS

I'm creating a web page to be printed. It could wrap to 2 pages. There has to be a small, black square in each corner for a scanner to use for reference. I'm pretty sure I just need divs for the 4 black squares in the corners and one more div for main content area. How do I position the 4 corner squares so that each of them is in its own corner of the printed page with the content div filling the center? The center content should be inside the corner squares left to right, but could overlap with them top to bottom.

EDIT: I uploaded a sample image, but it's not showing.

EDIT: Here's what I have so far:

http://jsfiddle.net/7DjTf/

<html>
    <head>
        <title>Printable Form</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <div id="UpperLeftScanningIndicator"></div>
        <div id="UpperRightScanningIndicator"></div>
        <div id="Content">Here is some content.<br /><br /><br /><br />Here is some more.</div>
        <div id="LowerLeftScanningIndicator"></div>
        <div id="LowerRightScanningIndicator"></div>
    </body>
</html>

#Content {
    border: solid 1px black;
    width:90%;
    margin-left:auto;
    margin-right:auto;
}

#UpperLeftScanningIndicator {
    height: 20px;
    width: 20px;
    background-color: black;
    float: left;
}

#UpperRightScanningIndicator {
    height: 20px;
    width: 20px;
    background-color: black;
    float: right;
}

#LowerLeftScanningIndicator {
    height: 20px;
    width: 20px;
    background-color: black;
    float: left;
    position:absolute;
    bottom:20px;
}

#LowerRightScanningIndicator {
    height: 20px;
    width: 20px;
    background-color: black;
    float: right;
    position:absolute;
    bottom:20px;
    right:500px;
}

I'm not sure how to get the lower right block to go over to the right. Float would work, but using "absolute" seemed to break that. Note: your browser window needs to be pretty wide for this sample to look any good. Also, I'm not sure how to make those black squares appear on every page no matter if there is only one page or if there is a second page printed.

Here's a sample of how the page should look

Upvotes: 3

Views: 2887

Answers (2)

avrahamcool
avrahamcool

Reputation: 14094

its actually pretty easy. I've updated your fiddle - http://jsfiddle.net/avrahamcool/7DjTf/1/

you have to use the right attribute correctly.

I would recommend using the same technique for all indicators. so use position: absolute; with all of them, and set the top/bottom left/right accordingly also, no need for repeating the style. use class instead. like this: http://jsfiddle.net/avrahamcool/7DjTf/2/

Update: apparently, the @page CSS3 pseudo elements rules are not implemented yet in the browsers, so we'll have to fall back to JavaScript. (if it was, you'll have a perfect solution like this article explains)

first: because background-color is not printed, I switched to img tag. second: the first solution had only 4 indicators (2 at the beginning & 2 at the end), and you want 4 indicator for each printed page.

so here is a new solution: http://jsfiddle.net/avrahamcool/7DjTf/5/

the idea is to add dynamic indicators as the content grows. the indicators should be visible only when printing. the part that visualize the indicator is the .indicator rule and he's located in @print rule.

so far, I didn't manage to write a code that 'knows' how many pages will be printed.. so the for loop run a constant number of times (and I don't know how to solve this part)

inside the loop: I add 4 dynamic indicators (2 in the left and 2 in the right) each time, the offset should grow in such way that the next indicators would be in the next page..

If you know how many pages you're gonna have, its a perfect solution for you.

Notice: this offset between pages is different when printing from different browsers. I've tested my solution in Chrome. (IE & FF requires a little tuning);

Upvotes: 2

Ankit Agrawal
Ankit Agrawal

Reputation: 6124

if you want right bottom icon to set in right you can use this

#LowerRightScanningIndicator {
    height: 20px;
    width: 20px;
    background-color: black;
    float: right;
    position:absolute;
    bottom:20px;
    right:20px;
}

Upvotes: 0

Related Questions