I'm printing a form that contains two main divs. One will be cut from the paper once it printed and the other one just contains information about clients. The problem is that the second div's size depends on the amount of information we have on the client themselves. So if we have a lot of information about a particular client, we would need to print muli-pages. Wanting to save paper, having double-sided is fine with us. Is there a way or trick with css that we can make it where the second div will continue at a certain height if a muli-page print is needed so that when we cut the first div, none of the information about the client is cut out too. Below is a simple picture of the desired outcome layout where the red box is what going to be cut, the blue box would be where the client's information would be, and the dash line red box would be just empty space.
Desired Outcome Layout
Use the #page css rule to set a margin on all pages besides the first. Margins are given in cm like margin-top: 10cm;
#page:not(:first) {
margin-top: <<height of the red div>>;
}
Note that #page does not allow defining any pages besides the first, so this top gap will still be present on the 3rd, 4th, etc. pages.
Also note that #page does not have support for safari and possibly other browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/#page
Related
I'm testing out some code for a random personal project and I'm looking to place 3 boxes side by side (I believe as divs). But as you'll see they're not really centered (as three)/spaced out so well. I figured assign them unique IDs and increase padding but is there a more efficient way?
Also when the screen shrinks, the third box dips underneath, while the second box is still on the same line I want it so all boxes drop at the same time.
Unfortunately, I need more reputation to post my code in the proper format it seems.
Not 100% sure if I get you correctly.
For "But as you'll see they're not really centered (as three)/spaced out so well. I figured assign them unique IDs and increase padding but is there a more efficient way?", if you wanna make them horizontally centered, you can try this:
wrap them in a container node.
assign a width to this container in its style.
set both margin-left and margin-right of this container to auto
This should then make these 3 boxes (actually the container) horizontally centered.
For "_Also when the screen shrinks, the third box dips underneath, while the second box is still on the same line I want it so all boxes drop at the same time. _", perhaps width: calc(100% / 3) is what you want to put in the styles of these boxes.
In modern web browsers, even if #Slash_D response is correct, you can get a more flexible alignment using flexbox (here you have a complete guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
Futhermore, if you want all the containers drop at the same time, you have to deal directly with media query based on resolutions (https://www.w3schools.com/css/css_rwd_mediaqueries.asp) , or use a grid system, like bootstrap, that helps you with media queries based on classess (https://v4-alpha.getbootstrap.com/layout/grid/#how-it-works)
Hope it helps
I am producing a 20+ page report in HTML and wish to control the page breaks, margins etc carefully.
I have one particular DIV that is repeated many times and contains various floated DIVs, SVGs etc. This is styled with page-break-before: always;, and works well.
However when printing in Chrome (and only seen in print preview and the final hard copy) the height of the DIVs appears to vary randomly, with other paras split across pages. It's as if Chrome gets confused about the height of one element and then carries this mistake on, causing other elements to split across page breaks.
I can fix this by putting border:1px solid white; on the DIV. Why does this work?
I guess this is something to do with box-sizing and collapsing margins or is it just a quirk?
And is there a better, more universal way to achieve this? I've tried box-sizing: border-box but this doesn't correct it like the white border does.
I'm trying to write a CSS class that allows me to sit form elements (mixed button and text inputs) in a line so that they abut. I'm using display:table on a parent, and wrapping each element in a container with display:table-cell, and it works fine except for one bug that I can't figure out a way around.
So for example, parent is control-group, the element wrappers are control-group-item, and the elements themselves are control-group-input.
.control-group
.control-group-item
.control-group-input{type: "text"}
.control-group-item
.control-group-input{type: "submit"}
CSS of this (I've normalized font size/line height/padding/browser weirdness and all form elements are inline-blocked etc.):
.control-group {
display: table;
.control-group-item {
display:table-cell;
}
gives this, which is OK:
However, I ideally need it to fill a grid column of undetermined size, rather than the browser deciding how big my elements should be. If apply width:100% on .control-group, this happens:
The orange is a background colour applied to the table cell control-group-item. The issue seems to be with the 'submit' input: the submit stays the size it should be but browsers universally add extra space next to it within the table cell. So if I apply width:100% to each .control-group-input, I get this:
Which is OK, but stretches the ‘submit’ button. I can live with that, but is there any way to get it like the second image (but without the random space) using my current approach, or should I sack that off & try something different?
Edit I do not know the sizes of the inputs in advance: I can't set a width on them, which effectively rules out most inline block/float methods. I ideally need IE 8/9 support, which is why display:table was tried.
Edit 2: here are versions on Codepen: http://codepen.io/DanielCouper/pen/knDmC
After rewriting the code there, I realise my question is: how is the width of the table cells being calculated? It's specifically the cell with the submit button that has the extra space. The extra space seems random.
Here's a working version in codepen: http://codepen.io/mkleene/pen/ldqDH
The summary is that you need to remove the width: 100% on the submit button and then give the second table cell element width: 100%. You also need to make the textbox take up its entire parent with a 100% width.
You also need to make sure that the table element is using an auto table layout.
nm, spoke too soon. Thought I had solved it, hadn't, was getting effects from some other CSS.
I'm looking to create a simple WordPress page that will display several images, along with some descriptions.
This page is for a customer who would like to update it on her own in the future. She has no familiarity with HTML or CSS.
I'm using a child theme based on "Attitude", although I think this issue would apply to most themes.
The layout I'm hoping for is one where an img is given the class "alignleft", to which I've appended the margin-right to be 50px.
So, it looks gorgeous as long as the text is beside the image. But, once the text gets below the image, it wraps back to the left of the page... just as it should, I suppose! :)
Only, for my page, I'd like for the text to stay "indented", even past the image.
The kicker is that the images are not all going to be the same height or width. Although the height and width dimensions will be between 100px and 300px in almost every case.
WHAT I'M HOPING FOR:
WHAT I'M GETTING:
Things I've already considered are...
div's. If it were just me updating the page, div's would be super easy to implement. But I don't want her to have to do any HTML. (Maybe I could make a template. Hmm...)
Tables. I feel like maybe this isn't ideal because of the variable widths of the images. I suppose I could set the alignment of the "images" column to be "right", and then set cell padding to 50px on the right side.
A NextGen Gallery. If I do this, then I lose the ability to have bullet points in the text part (since the "Description" section of NextGen photos doesn't appear to handle that sort of thing).
Adding a margin-bottom to the .alignleft class. But, again, the images will be different heights AND the paragraphs will be different lengths.
You know, I think I'm on to something here.
It may not be the most eloquent solution. But I think it's going to work.
I'm going with tables!
First off, I have the TinyMCE WordPress plugin installed, so adding tables using WordPress's visual editor is easy enough for anyone to do.
I've added the following CSS to my child themes style.css file (Again, I'm using a child theme of Attitude):
.entry-content table tr td { width:auto;text-align:justify;vertical-align:top;}
.entry-content table tr td:first-child { width: 36%}
.entry-content table tr td:first-child img {width:100%;height:auto;}
I might make a few tweaks. But otherwise, I think this'll work pretty well.
The images will now be the same width. Which is great. My friend can now upload images of different sizes (again, probably between 100px and 300px in height and width), and the CSS will take care of formatting. Huzzah!
This jsfiddle example is what i got right now, the principle works on a simpler table i need to display but i need to change it a bit for another page. Section 1 will always have the same size, section 2 is of variable size and section 3 should fill the space that's left by section 2. This all works fine and dandy but I have to add another section, let's call it 4, that's of fixed size but always stays at the bottom of the bigger table, right after 3. The height of the big table must always stay the same. The line breaks are there to show what happens when the different tables change size.
I can't use divs or any fancy CSS because of a plug-in that's parsing it but if you got a fancy solution i can maybe make it work. Thanks for your time.
Also, can't use javascript to resize stuff dynamically unfortunately.
Sounds like a job for tbody and tfoot tags along with CSS to control the sizing.