I'm trying to match the dimensions, margins, text sizes, line height, etc of a web page to those of a word processor (in this case, OpenOffice) so that when you go to print the web page or make a PDF of it, it will look exactly like the document.
So far I've set the height and width to 11in/8.5in, every side margin to 0.79in, and the font is the same size as the document. (That is, if documents use pt.)
So how come it's only taking up half the page??
This site is made to be printed/PDF'd, so it doesn't have to use flexible values.
Thanks!
Here is a link to a sample document, I'll have some code soon
http://i.stack.imgur.com/l2Dl1.png
/*The rules go here*/
#page-container {
background: blue;
margin: 0.79in 0.79in 0.79in 0.79;
width: 7.5in;
height: 11in;
}
.name {
font-size:22pt;
font-weight:bold;
}
.sections {
margin: 10px 0 0 0;
font-weight:bold;
text-decoration:underline;
clear:right;
}
.jobtitles {
font-weight:bold;
}
.leftside {
float:left;
}
.rightside {
float:right;
width:50%;
}
.years {
float: right;
font-weight:bold;
padding-right: 1%;
}
.desc {
width: 760px;
}
ul {
list-style-type: none;
padding:0;
margin:0;
}
#footer {
text-align: center;
font-weight: bold;
}
The only reason its blue is so I can see the container.
Related
I am working on a wordpress theme right now and I am wondering how to adapt font size of text inside boxes so that it always stays in the middle.
In my page at some point I have 3 rows in a section, with 3 images and in the first row I also have a text saying "En savoir plus" that is inside the image :
my wordpress section & rows
The section and its rows are responsive.
What it looks like without reducing the window
I have a class for that row that is set to "image" and the text is inside so I have put this code inside a HTML row:
.image p {
position: absolute;
top: 86%;
width:100%;
color:white;
margin: auto;
text-align: center;
}
.image {
position: relative;
}
As you can see the text-align center works perfectly when the page is normal.
But when you reduce it, my page looks like this :
After reducing a little the window
And when you reduce it again, my page looks like this :
After reducing a lot my window
What I would like is the text to change size and stay at the same place (center of the blue thing) proportionally when the boxe changes size. I will then duplicate this to all boxes.
Do you have any ideas how to do this?
Thanks in advance for your help guys, I would really appreciate is as I am kind of new to this :)
PS : I don't know if it helps but I am using the POFO template.
Have a wonderful day!
EDIT : All the code of my page :
<style>
.bordure {
border-bottom: 1px solid black !important;
}
.sub-menu > li > a {
color: blue !important;
}
nav.navbar.bootsnav .simple-dropdown .dropdown-menu > li {
background-color: white !important;
}
.simple-dropdown .dropdown-menu {
background: white !important;
}
a {
color:#71c9dd;
}
header.sticky nav.navbar-default, header.sticky nav.navbar.bootsnav {
background-color: transparent !important;
}
.pofo-footer-bottom {
display:none;
}
.texte_cabot {
z-index: 700;
position: absolute;
top: 550px;
left: 1600px;
font-size: 40pt;
}
header nav.navbar-default, nav.navbar.bootsnav, .full-width-pull-menu {
background-image: url('http://newstart.visceral.fr/wp-content/uploads/2018/12/bg_header.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: transparent !important;
position: fixed;
top: 0;
left: 0;
}
header nav .nav-header-container {
padding-bottom: 163px !important;
padding-left: 0 !important;
}
.box-layout {
margin-top:-55px;
}
a:hover {
color:black;
}
body {
margin-bottom: 0;
padding-bottom: 0;
}
.image p {
position: absolute;
top: 86%;
width:100%;
color:white;
margin: auto;
text-align: center;
}
.image {
position: relative;
}
#media screen and (max-width: 778)
header nav.navbar-default, nav.navbar.bootsnav, .full-width-pull-menu {
background: url('http://newstart.visceral.fr/wp-content/uploads/2018/12/small_bg_header.png') repeat-x !important;
background-size: cover !important;
padding-bottom: 0 !important;
}
</style>
EDIT : Entire page HTML : (including POFO stylesheet (very long, sorry)) :
Tried to import it but it is too long to publish. Numbers of characters execeed. Could you please check it clicking the View code source on? :
http://newstart.visceral.fr/fluimucil/
I have a shift calendar for a local fire department that I built using foundation5 responsive css framework. Everything works great when viewing in my browser and resizing the window.
example:
However, when I view this on an iPhone the calendar days are moved one block up.
Here is my css:
.calRow {
max-width:100%;
}
.calMonth, .calPrev, .calNext {
text-transform:uppercase;
font-weight:bold;
color:gray;
font-size:1.7em;
margin:15px 0;
text-align:center;
}
.calMonth {
text-align:center;
}
.calPrev {
text-align:left;
}
.calNext {
text-align:right;
}
.pCal ul li {
text-align:center;
height:0;
padding:0 0 14.28571%;
border-left:solid 1px gray;
border-top:solid 1px gray;
position: relative;
}
.pCal ul li:after {
content:'';
display: block;
margin-top: 100%;
}
.pCal ul li dl {
position:relative;
padding:0;
margin:0;
top:0;
height:100%;
}
.pCal ul li dl dt {
padding:0;
margin:0;
}
.pCal ul li.calHead {
font-size:0.8em;
border:none;
color:gray;
height:25px;
margin-bottom:-20px;
}
.calToday {
border-bottom:0.5em solid lightGrey;
}
.calDay {
position:relative;
padding:15%;
margin:0;
top:-100%;
}
.calLayer2, .calLayer3, .calLayer4 {
position:relative;
padding:0;
}
.calLayer2 {
top:-200%;
}
.calLayer3 {
top:-300%;
}
.calLayer4 {
top:-400%;
}
/* SHIFT HEIGHT / SIZE STYLES */
.shift2 {
height:50%
}
.shift3 {
height:33.33%
}
.shift4 {
height:25%
}
/* OVERLAY STYLES */
.calX img{
width:100%;
padding-top:2%;
}
.calCircle img{
width:100%;
padding:9% 7%;
}
.calSquare img {
width:100%;
padding:7%;
}
.pCal .calDayParts {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.pCal .calDayOverlay {
position: absolute;
top: 0;
bottom: 0;
height: auto;
width:100%;
}
.calLayer1, .calLayer2, .calLayer3 {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
Can someone help me figure out why this is or at least suggest a way to debug it.
Thanks
EDIT 1 JS FIDDLE LINK
GO HERE for jsfiddle example - same issue is present when viewed on phone
side note, this answer has instructions on how to use iPhone over local network to connect to localhost of IIS on windows PC
It's difficult to debug without being able to inspect the site first hand. From first glance though, I would try adding a float and clear to the .calRow class, provided it is what it sounds like (the rows that make up the calendar).
.calRow {
float: left;
clear: both;
width: 100%;
}
Keep in mind by floating the calendar rows you will most likely need to also float the calendar container.
If that doesn't solve the problem it's most likely related to your absolute positioned elements not being positioned relatively to their parent element.
EDIT: I should add, if you have access to safari, an iPhone and a cord to plug the iPhone into your desktop. You can inspect the site using safari on your desktop by going to 'Develop' > 'iPhone'. More info on remote debugging here.
Okay,
so the problem was not with the css exactly. There were other styles bleeding into my styles. I placed this css inside an angular2 component and "encapsulated" the css, then it worked without the positioning error. It wraps the code in a shadow dom
I never did find out what style was bleeding into mine but the problem is now solved.
when i give the page to print...
the text on the right hand side of the page gets cut off....
i gave text align left in print css but still not working...
providing my code below....
http://jsfiddle.net/jjnKP/
#media print {
body {
margin:0;
padding:0;
line-height: 1.4em;
word-spacing:1px;
letter-spacing:0.2px;
font: 17px Arial, Helvetica,"Lucida Grande", serif;
color: #000;
}
.mainDiv, .navbar,
.copyright {
display: none;
}
#templateTwoPadding {
padding: 0 0;
}
#tableHeadingLastDF {
text-align: left;
width: 134px;
border:1px solid white;
}
#makeLeftDF {
text-align: left;
}
.jumbotron .lead {
font-size: 12px;
}
}
I had the same thing happen to me on a project...everything kept getting cut off on the right side. :(
I ended up "fixing" it by simply setting a width and being happy with it. I don't think this post is the exact one I got my information from but looks good just the same.
I had same problem with SVG graphs, below css is worked for me.
#media print {
body {transform: scale(.6);}
}
I'm attempting to make a site beautiful, and so far it's gone quite well, by problem arose when attempting to center a column with 2 side columns, if I use margin:0 auto; the 2 side columns are pushed down beneath the middle centered column, is there a way for them to occupy space beside the central column, even while centered?
Here's my CSS:
body {
background-image: url(../images/background.png);
background-repeat: repeat;
background-color: #F0C36B;
font-family:Arial;
color:#FFF;
}
#header, #footer {
text-align:center;
clear:both;
}
#header {
margin-bottom:0.5em;
}
#left_column, #right_column, #center_column {
background-color:#5B7A8C;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-icab-border-radius: 10px;
-o-border-radius: 10px;
border:solid #FFF 2px;
-moz-box-shadow: 0 0 10px #000000;
-webkit-box-shadow: 0 0 10px #000000;
box-shadow: 0 0 10px #000000;
}
#left_column {
width:20%;
float:left;
text-align:center;
}
#right_column {
width:20%;
float:right;
text-align:center;
}
#center_column {
width:50%;
padding:0.5em;
margin:0 auto;
}
#page_container {
width:90%;
margin:0 auto;
}
#headline {
font-family:TF2 Build;
font-size:2em;
}
#author {
font-style: italic;
font-size:0.7em;
}
#font-face {
font-family: "TF2";
src: url(../fonts/TF2.eot);
src: local("☺"),
url("../fonts/TF2.ttf") format("truetype");
}
#font-face {
font-family: "TF2 Build";
src: url(../fonts/tf2build.eot);
src: local("☺"),
url("../fonts/tf2build.ttf") format("truetype");
}
h2 {
font-family: "TF2";
color: #FFF;
margin:0.25em;
}
hr {
border: 1px solid #FFF;
}
My site resides at http://tf2ware.net
I hope you can help and thanks if anticipation!
Put the #center_column div after the #right_column div.
This isn't the best of all answers as it changes the markup to adjust the style, but it should work for a quick-fix.
Edit to explain: I didn't post a why before, and I think it might be useful.
docs
A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down the left side of a right-floated box. The following is an introduction to float positioning and content flow; the exact rules governing float behavior are given in the description of the 'float' property.
I bolded the important part. Because the centered div was already in the display list, the current line for #left_column and #right_column is after #center_column. Once you put #center_column after the left and right columns, the current line is next to the floated elements.
#page_container { text-align: center; }
#left_column { float: left; }
#right_column { float: right; }
and change the order of the dom to make #center column last.
If you don´t want to change the order in your html (for SEO, screenreaders, etc.), you can also use absolute positioning for the side columns, but that might lead to problems if the side columns can have a greater height than the center column.
I have an invoice that contains over 100 lines of product that I am trying to print. This single invoice should take over 3 pages, but when printed, the content flows off the footer and the next page is the following invoice.
I am using divs instead of tables, and I can't understand why the long invoices will not print on multiple pages.
Any ideas?
Here's my stylesheet:
h1,h2,h3 { margin: 0 0 0.5em 0; padding: 0;}
body { font-family: sans-serif; font-size: 0.8em; }
label, legend { font-weight: bold; }
pre { font-family: sans-serif; }
shipping_address {
width: 45%;
}
billing_address {
width: 45%;
}
order_info {
padding: 0 10px;
}
shipping_logo {
width: 115px;
}
content {
margin: 0px auto 0px auto;
width: 100%;
padding-bottom:15px;
}
div.container {
display: table;
width: 100%;
}
div.header {
display: table-row;
text-align: center;
}
div.row {
display: table-row;
}
.even {
background: #CCCCCC none repeat scroll 0 0;
}
div.cell {
display: table-cell;
padding: 0 10px;
}
You might want to specify specific stylesheets for printing. For example,
#media all
{
.page-break { display:none; }
}
#media print
{
.page-break { display:block; page-break-before:always; }
}
You can then apply the page-break class where you want to page to break. This article has a few neat tricks to format a page for printing.
We're going to need much more information than what you have suggested to really tackle this problem.
However, a pretty blind stab at something that would cause a similar behavior is if you had something set such that the height is 100%, whether it's a table, a div, or something. This is sometimes done to try and keep a footer at the bottom of the browser window and if you do that, this can cause this behavior when printing.