I have a dataset, and I need to print data onto these cards (one row of data per card):
magnatag.com
I am having a real hard time with the formatting. The printer they are being printed on can print all the way to .2 from the edge of 8.5 x 11 paper like this. The users want to print that far to the left and right, but the rows have to stay within card boundaries obviously.
The cards being used are all white, and one of the data points is a color the card will be printed in. To keep the example easier/cleaner than the real life problem, assume this markup:
<body>
<div class="cardSheet">
<div class="card blue">Content</div>
<div class="card red">Content</div>
<div class="card green">Content</div>
<div class="card green">Content</div>
<div class="card red">Content</div>
<div class="card blue">Content</div>
<div class="card green">Content</div>
<div class="card red">Content</div>
<div class="card green">Content</div>
<div class="card green">Content</div>
</div>
</body>
After the fifth row, the next row will print on the second page, etc.
There is a good bit of formatting within an individual card, but I think I can handle that. Getting 5 printable boxes per page that will print onto these cards (with .21" left and right margins in print preview, top/bottom per the card)
If varying browsers adds complexity, assume Google Chrome v 53.x
Thanks in advance for any help!
You will need to put this on a page by itself to test it. I did a few runs but I dont have any letter size pager here only a4 to test. It looks like it will work though. I used chrome and set margins to none in the print options.
I only did a quick run to show one page but you can easily add a page break after the 5th card to go to the next page. If you dont know how to do that then I can help out later with that.
Hope this helps and if you need help understanding something leave a comment.
printBlock("blue");
printBlock("red");
printBlock("green");
printBlock("green");
printBlock("red");
function printBlock(color) {
var block = "<div class='card " + color + "'>CONTENT<div>";
$(".page").append(block);
}
* {
margin: 0px;
padding: 0px;
}
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page {
width: 215.9mm;
min-height: 279.4mm;
margin: 1cm auto;
position: relative;
padding-left: 6.35mm;
padding-top: 19.05mm;
outline: 1px solid cyan;
}
.card {
position: relative;
width: 203.2mm;
height: 50.8mm;
background-color: #FFF;
float: left;
outline: 1px dashed #000;
padding-left: 20px;
padding-right: 20px;
padding-top: 15px;
}
.blue {
background-color: #DBFFFF;
}
.red {
background-color: #FFDBDB;
}
.green {
background-color: #EDFFDB;
}
#page {
size: 215.9mm 279.4mm;
margin: 0;
}
#media print {
.page {
margin: 0;
border: initial;
width: 215.9mm;
min-height: initial;
box-shadow: initial;
background: initial;
outline: none;
}
.card {
outline: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="page"></div>
Related
I need help making the Email Opt-In bar under the Header look at the same on mobile devices as it does on my desktop. Here is the website.
I am not skilled in any kind of coding so any help would be greatly appreciated! :)
Here is the CSS I am currently using:
/* this would be the color and size of the main bar */
#nsu-head {
background-color: #ffcfde;
padding: 34px;
}
/* basic text color and placement */
#nsu-head p {
float: left;
color: #000000;
margin-top: -5px;
padding-right: 10px;
}
/* placement of the invitation text */
#nsu-head p.form_label {
text-transform: uppercase;
padding-left: 50px;
padding-right: 30px;
margin-top: 0;
}
#nsu-form-1 label {
display: none;
}
/* hides the input field labels */
/* input button styling going for a circle with drop shadow */
input#nsu-submit-1 {
/* remove if you don't care about IE8 */
}
.type1 {
width: 100px;
height: 100px;
background: yellow;
border: 3px solid red;
}
/* controls the background color during inactive and hover states */
input#nsu-submit-1.nsu-submit {
background: no-repeat darkMagenta;
border: 1px solid darkMagenta;
}
input#nsu-submit-1.nsu-submit:hover {
background: no-repeat black;
border: 1px solid black;
}
/* placement of post sign up text if no thank-you page */
p#nsu-signed-up-1 {
float: right;
font-size: .9rem;
color: #DDD;
padding-right: 0;
margin-top: -18px;
width: 45%;
}
your code is quite messy, but try doing this:
1) Look for Aweber's code. IN your source code looks like this
<div class="nsu-form" id="nsu-head">
<p class="form_label">Get <span style="font-style:italic;">Free</span> Tips to Be a Healthier Mama!</p>
<!-- Form by Newsletter Sign-Up v2.0.3 - http://wordpress.org/plugins/newsletter-sign-up/ -->
<form class="nsu-form" id="nsu-form-0" action="http://www.aweber.com/scripts/addlead.pl" method="post"><p><label for="nsu-name-0"> </label><input class="nsu-field" id="nsu-name-0" type="text" name="name" placeholder="Name" /></p><p><label for="nsu-email-0"> </label><input class="nsu-field" id="nsu-email-0" type="email" name="email" placeholder="Email" required /></p><textarea name="nsu_robocop" style="display: none;"></textarea><p><input type="submit" id="nsu-submit-0" class="nsu-submit" name="nsu_submit" value="Get it!" /></p></form>
<!-- / Newsletter Sign-Up -->
</div>
it might be different in your Aweber's code, but you'll get the idea. Now, if your plugin allows it to, try to move this part:
<p class="form_label">Get <span style="font-style:italic;">Free</span> Tips to Be a Healthier Mama!</p>
outside <div class="nsu-form" id="nsu-head"> (thus, that paragraph has to be BEFORE this nsu-form line)
Once you have this all, be sure to remove everything you currently have in your code and add it to header-left, like this:
<div id="header-left-section">
YOUR CODE HERE
</div><!-- #header-left-section -->
this will make your theme work as expected. That is: your form on the left and full width on mobile and your nav on the right and full width on mobile.
However, if you also want it to be full width in ANY screen, add this to your CSS:
#header-left-section, #header-right-section{float:none !important; clear:both; display:block}
This should fix every issue you have
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Could anyone help me by describing how etc. I do to makes for a function as illustrated.
What I want is that when I mouse over a product box (have not fixed height),
I want to get a box with the buy button, etc. that looks like the picture.
Know that I do not put up the code or, but I do not know where to begin.
So if anyone has any tips or so, I'd be grateful!
Try
button {
display: none;
}
li:hover > button {
display: block;
}
<ul>
<li>Description 1<button>Buy</button></li>
<li>Description 2<button>Buy</button></li>
</ul>
The idea here is to use the > operator to tell CSS to change something in our target. The target being the Buy button inside the li tag.
http://jsfiddle.net/beautifulcoder/kj2XA/
1) First of all: make your items fixed size. This prevents later issues (in layout) and allows you to create effect you described. Like:
HTML (not complete):
<div class="item-wrapper">
<div class="item-content">
<!-- item images etc here -->
</div>
<div class="item-actions">
<button class="buy">Buy</button>
</div>
</div>
CSS:
.item-wrapper {
width: 200px;
overflow: visible;
float: left;
background: #999999;
margin: 5px;
position: relative;
border: 2px solid #fff; /* without this you have unwanted size effects on hover*/
}
.item-content {
width: 200px;
height: 300px;
}
.item-actions {
display: none;
position: absolute;
background: #888;
top:300px;
z-index: 10;
left: 0px;
width: 200px;
height: 100px;
}
2) create javascript with jquery for your items like:
$('.item-wrapper').hover(function () {
// Change css on hover .. this could be done also by changing class
$(this).css({'border':'2px solid #880088'});
$(this).find(".item-actions").slideDown("fast");
}, function(){
$(this).css({'border':'2px solid #fff'});
$(this).find(".item-actions").slideUp("fast");
});
Here is fiddle: http://jsfiddle.net/h23mY/
This is also nice effect: http://jsfiddle.net/ww53e/
lets say the item is enclosed by div tag, now use css hover on
<script>
//on document load item1-buy.hide(); dont forget to use jquery
</script>
<div id="item1">
//item goes here.
<input type="submit" id="item1-buy" value="Buy">
</div>
css:
#item1:hover {
//here you can style how ever you want. Add orange border and so on...
}
now on hover unhide the buy button using jquery #item1-buy.show();
Check the DEMO
I've made a simple markup to show you the idea:
<div class="item">
<img src="http://lorempixel.com/200/200/" alt="" />
<span>15$</span>
<div class="buy">BUY</div>
</div>
And the CSS:
.item {
float: left;
padding: 10px;
border: 1px solid #ccc;
margin: 10px 10px 0 0;
}
span{
display: block;
}
.buy {
padding: 5px;
background: green;
display: none;
}
.item:hover {
border: 1px solid yellow;
}
.item:hover .buy {
display: inline-block;
}
Update: still an issue with the last image in a row, but hope it helps: DEMO 2
<div class="item">
<img src="http://lorempixel.com/200/200/" alt="" />
<span>15$</span>
<div class="buy">
<span class="button">BUY</span>
</div>
</div>
I'm trying to make one large DIV that floats to the left of my content and then use additional DIVs that are rows beside the content.
How would I do that and be sure that each "row" div is actually a row, but still respect the larger DIV on the left (the first few should not pop down below it).
I duplicated the problem on jsFiddle here:
http://jsfiddle.net/Dracorat/Xf9Qv/1/
CSS:
.DropCapImage {
border: 2px solid purple;
color: #EEE;
display: block;
width: 200px;
height: 300px;
float: left;
margin: 0 10px 10px 0;
}
.DialogAction {
padding: 10px;
font-style: italic;
float: left;
clear: right;
}
.DialogLine {
float: left;
clear: right
}
.DialogWho {
font-weight: bold;
float: left;
width: 100px;
}
.DialogWhat {
float: left;
white-space: pre-wrap;
font-family: 'consolas', monospace;
}
HTML:
<div class="DropCapImage">Pretty Image Here</div>
<div class="DialogLine">
<div class="DialogWho">KING CLAUDIUS</div>
<div class="DialogWhat">Short Text</div>
</div>
<div class="DialogAction">Exeunt all but HAMLET</div>
<div class="DialogAction">Something Else</div>
<div class="DialogAction">Another Else</div>
<div class="DialogLine">
<div class="DialogWho">HAMLET</div>
<div class="DialogWhat">O, that this too too solid flesh would melt
Thaw and resolve itself into a dew!
Or that the Everlasting had not fix'd
His canon 'gainst self-slaughter! O God! God!
How weary, stale, flat and unprofitable,
Seem to me all the uses of this world!
Fie on't! ah fie! 'tis an unweeded garden,
That grows to seed; things rank and gross in nature
Possess it merely. That it should come to this!
But two months dead: nay, not so much, not two:
So excellent a king; that was, to this,
Hyperion to a satyr; so loving to my mother
That he might not beteem the winds of heaven
Visit her face too roughly. Heaven and earth!
Must I remember? why, she would hang on him,
... etc</div>
</div>
<div class="DialogLine">
<div class="DialogWho">Speaker Below</div>
<div class="DialogWhat">This should be below the purple area
</div>
As you can see, the floating is totally bogus with small divs.
Do not float the .DialogLine and .DialogAction elements
Just give them the correct margin-left (equal to the width of the left column)
And do not forget to give overflow:hidden to them as well so the will expand to fit their contents..
.DialogAction {
padding: 50px;
font-style: italic;
margin-left:210px;
}
.DialogLine {
margin-left:210px;
overflow:hidden;
}
Demo at http://jsfiddle.net/gaby/Xf9Qv/4/
Problem:
I am trying to create a multi-column CSS layout with borders that look something in line with this picture:
Code:
<div style="border-radius:4px; border: 1px solid #ddd;">
<div style="display:block;float:left;width:50%;">
<div><b>Författare:</b> '.$authors.'<br></div>
<b>Handledare:</b> '.$row['Supervisor'].'<br>
<b>Examinator:</b> '.$row['Examiner'].'<br>
<b>Design av studie:</b> '.$design.'
</div>
<div style="display:block;float:left;width:50%;">
<b>Examinationsdatum:</b> '.$row['ExaminationDate'].'<br>
<b>Nivå:</b> '.$level.' ('.$credits.')<br>
<b>Kommentar:</b> '.$row['Comments'].'<br>
<b>Övrigt:</b> '.$row['Participants'].' deltagare, '.$row['Reference'].' referenser
</div>
</div>
The above-mentioned code will produce the following:
Question:
What needs to be modified so I can get the horizontal and vertical lines to the box?
You can modify the CSS to look like this:
.row {
border: 1px solid #ddd;
margin-bottom: -1px;
}
.left {
display: inline-block;
width: 50%;
border-right: 1px solid #ddd;
}
.right {
display: inline-block;
width: 49%;
border-left: 1px solid #ddd;
margin-left: -1px;
}
.top {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.bottom {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.outerBox {
margin: 10px;
}
Then have your markup look like this:
<div class="outerBox">
<div class="row top">
<span class="left"><b>Författare:</b> '.$authors.'</span><span class="right"><b>Examinationsdatum:</b> '.$row['ExaminationDate'].'</span>
</div>
<div class="row">
<span class="left"><b>Handledare:</b> '.$row['Supervisor'].'</span><span class="right"><b>Nivå:</b> '.$level.' ('.$credits.')</span>
</div>
<div class="row">
<span class="left"><b>Examinator:</b> '.$row['Examiner'].'</span><span class="right"><b>Kommentar:</b> '.$row['Comments'].'</span>
</div>
<div class="row bottom">
<span class="left"><b>Design av studie:</b> '.$design.'</span><span class="right"><b>Övrigt:</b> '.$row['Participants'].' deltagare, '.$row['Reference'].' referenser</span>
</div>
</div>
CAVEAT: The formatting will break if you put a space between the spans on an individual line, so don't break them; otherwise, take this solution and work out something that doesn't break =)
You can see a working example at http://jsfiddle.net/saluce/XhnBE/
EDIT: It seems that mPDF doesn't like inline-block, so change this part of your CSS:
.left {
display: block;
float: left;
width: 50%;
border-right: 1px solid #ddd;
}
http://jsfiddle.net/saluce/XhnBE/1/
You could use two lists side by side:
<div style="border-radius:4px; border: 1px solid #ddd;">
<ul style="display:block;float:left;width:50%;">
<li><b>Författare:</b> '.$authors.'</li>
<li><b>Handledare:</b> '.$row['Supervisor'].'</li>
<li><b>Examinator:</b> '.$row['Examiner'].'</li>
<li><b>Design av studie:</b> '.$design.'</li>
</ul>
<ul style="display:block;float:left;width:50%;">
<li><b>Examinationsdatum:</b> '.$row['ExaminationDate'].'</li>
<li><b>Nivå:</b> '.$level.' ('.$credits.')</li>
<li><b>Kommentar:</b> '.$row['Comments'].'</li>
<li><b>Övrigt:</b> '.$row['Participants'].' deltagare, '.$row['Reference'].' referenser</li>
</ul>
</div>
You'll need to add some styles to get rid of the default styles for lists and add you borders to the top, bottom and sides of your lis .
A down side of this is that you'll have to give your lis fixed heights so the borders line up.
You have to change your marke-up. You need a table or more boxes to do this. I think tables would be easier to manage... and somehow this is a case tables are for.
Or you take a bg-image... but I won't recommend this
Check this: http://jsfiddle.net/eNEzs/
It's enough to correct your css a little bit and wrapp items in div's.
<div style="border-radius:4px; border: 1px solid #ddd; margin: 20px;">
<div class="block">
<div><b>Författare:</b> '.$authors.'</div>
<div><b>Handledare:</b> '.$row['Supervisor'].'</div>
<div><b>Examinator:</b> '.$row['Examiner'].'</div>
<div><b>Design av studie:</b> '.$design.'</div>
</div>
<div class="block">
<div><b>Examinationsdatum:</b> '.$row['ExaminationDate'].'</div>
<div><b>Nivå:</b> '.$level.' ('.$credits.')</div>
<div><b>Kommentar:</b> '.$row['Comments'].'</div>
<div><b>Övrigt:</b> '.$row['Participants'].</div>
</div>
<div style="clear:both"></div>
</div>
CSS
.block {
display:block;
float:left;
width:50%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.block:first-child {
border-right: 1px solid #ddd;
}
.block div {
border-bottom: 1px solid #ddd;
}
.block div:last-child {
border-bottom: 0px;
}
But I would recommend you to simply change elements to a table or list (ul or ol). Above solution is simply for this particular exmaple.
Wrap each cell in a div instead of using br, and add border-left and border-bottom on the appropriate element. If you still want to use 50% width, then use box-sizing: border-box; to keep it from wrapping.
See this jsfiddle for one way to do it, though you should use classes to properly select which elements to apply the different styles to.
Like the title says I wan't to create a clickable list, in which each element contains an image on the left and two lines of text on the right.
Right now I've manage to implement the elements with the following code:
HTML:
<div class="verticalListItem">
<a href="#">
<div class="verticalItemImage"><img src="images/vdfLogo.png" width="80" height="80" /></div>
<div class="verticalItemText">
<p>Pop/Rock</p>
<p>0</p>
</div>
</a>
</div>
CSS:
.verticalListItem {
border: 1px solid #333;
}
.verticalItemImage {
float: left
}
.verticalItemImage img {
display: block;
}
The result I have now is this:
However, my red image is not centered vertically and worst: the area bellow the image and the second label, so as the area above the first label (I've marked those areas with green on second element) is not clickable. What am I doing wrong here, can you help me please?
Thanks in advance!
here is the solution - http://jsfiddle.net/SaRnR/
Not sure without testing, but this should work for you.
.verticalListItem {
border: 1px solid #333;
}
.verticalListItem a {
overflow: auto;
}
.verticalItemImage {
float: left;
}
.verticalItemImage img {
display: block;
}
.verticalItemText {
float: left;
display: block;
line-height: 40px;
}