Forum Moderators: not2easy
I am developing a layout that is constrained to the size of 4" by 6" - this is for printing - so when somebody prints this view, it will fit nicely and look appropriate on a 4x6 card.
The problem I am running into is that if I have more text than the 4x6 size will allow, it overflows.
An example of the basic idea would be a recipe card. Some recipes will fit easily onto a 4x6 printout, no biggie - but others have a very long list of ingredients, or a ton of directions, and this all needs to be represented somewhere.
All of the contents of the page are inside a container div layer. There are quite a few divs/spans inside of the container, but only the ones near the bottom will ever overflow (in the case of the recipe card, the directions and the ingredients). I need these to basically pick up where they left off on a new container directly underneath. (Thus, when someone goes to print this out, it will print the first, and then the second, each on their own 4x6 card.)
Here is the code. Please don't be too harsh about semantics/antiquated properties, etc. unless it will solve the problem. (Seriously - this code is going into an application, not for web use in the least).
In this particular example, I did not duplicate the container underneath because this is a skeleton layout. You'd just need to inject a bunch of text to see what I'm talking about.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Page Title</title>
<style type="text/css">
body {
background-repeat: repeat;
background-image: url(bgpic.jpg);
font: 12px "Lucida Grande";
color: white;
margin: 0;
padding: 0;
text-shadow: #666 0px 0px 1px;
width: 900px;
max-height: 600px;
}#Container {
background: -webkit-gradient(linear, left top, left bottom, from(#6e6e6e), to(#2b2b2b));
-webkit-box-shadow: #000 0px 0px 5px;
width: 850px;
margin-top: 22.5px;
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;
padding-top: 30px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
-webkit-border-radius: 10px;
overflow: hidden;
max-height: 600px;
}
#Title {
text-align: center;
font-size: 200%;
text-shadow: #333 0px 1px 1px;
color: #a9c3da;
}
SPAN.header {
font: 13px grey "Lucida Grande";
text-transform: uppercase;
text-shadow: #333 0px 1px 1px;
color: #a9c3da;
}
#additionalMetrics {
padding-top: 15px;
line-height: 8px;
text-align: left;
}
metricsItemHeader {
color: #a9c3da;
}
#directions {
padding-top: 15px;
}
#meta-info {
text-align: left;
float: right;
width: 35%;
max-width: 300px;
padding-left: 20px;
}
Image img {
display: block;
margin-left: auto;
margin-right: auto;
border: 3px solid white;
background-color: #999;
width: 200px;
height: 140px;
-webkit-box-shadow: #000 2px 2px 6px;
}
iTitle {
color: #a9c3da;
}
method {
font-style: italic;
}
#rating {
font-size: 150%;
color: #a9c3da;
text-align: center;
}
</style>
</head>
<body>
<img src="../Images/binder.png" style="position:absolute;top:8px;left:150px">
<img src="../Images/binder.png" style="position:absolute;top:8px;right:150px">
<div id="Container">
<div id="Title">Title of Input</div><br>
<div id="meta-info">
<Image><img src="picture.jpg"></Image><br>
<div id="rating">★★★</div>
<br></br>
<center><span class="header">Items</span></center>
<p>item</p>
<p>item</p>
<p>item</p>
<p>item</p>
<div id="additionalMetrics">
<center><span class="header">Additional Metrics</span></center>
<p>item</p>
<p>item</p>
<p>item</p>
<p>item</p>
</div>
</div>
<div id="description">
<span class="header">Description</span>
<p>Enter description here.</p>
</div>
<div id="directions">
<span class="header">Directions</span>
<p>direction</p>
<p>direction</p>
<p>direction</p>
<p>direction</p>
<p>direction</p>
</div>
</body>
</html>
Take a look here:
[w3.org...]
BTW: your antiquated tags are easy enough to solve if you care about it.
I tried playing around with the paged media yesterday but I fear I am too low of a CSS level to understand/implement it lol.
I did read that exact page yesterday, the one you linked me to. I didn't find it to be much help... any tips for printed/paged media? Is this really my solution?
/* normal display CSS goes here */
@media print {
/* print specific CSS goes here */
}
webkit: the only mention I see on their own wiki of CSS3 Paged Media is for a proposal for a google summer of code 2008 project ...
I just don't know how to accomplish this :( I have defined an @page rule with the size argument of 6in 4in (since it's width height) but it doesn't seem to do anything when I test it out and print-preview the page.
