I am trying to print the HTML page which contains a div with lots of content inside it. The HTML of the page is as follows:
<div class="outer">
<div class="inner">
<ol>
<li>Content goes here</li>
<li>Content goes here</li>
.....
.....
</ol>
<ol>
<li>Content goes here</li>
<li>Content goes here</li>
.....
.....
</ol>
...............
...............
</div>
</div>
The print media css is as follows:
#media print{
.outer{
display:inline;
overflow:visible;
}
}
But when I open the print preview of this page, the div content is missing. Print preview displays some content from start of div, then blank (about two pages) and some end content of div.
It should be work if you go with following way:
<!DOCTYPE html>
<html>
<head>
<style>
#media screen {
p {
font-family: verdana, sans-serif;
font-size: 17px;
}
}
#media print {
.inner {
font-family: georgia, serif;
font-size: 20px;
color: red;
}
}
</style>
</head>
<body>
<h2>The #media Rule</h2>
<div class="inner"><b>Test it!</b> Print this page (or open Print Preview), and you will see that the text will be displayed in blue, and in another smaller font.</div>
</body>
</html>
I take w3school.com #media-print example and change according to your requirement it showing font changes and apply css while try to print.
Thanks.
This is my code, it works fine to me.
I want to print with css #media the "Invoice" class.
"No-print" class will be disabled.
HTML
<div class="pad margin no-print" style="overflow:hidden;margin-top:20px">
<div id="divControl" class="col-lg-6 col-md-6" style="margin-top:10px"></div>
</div>
<div class="content invoice">
<div class="col-sm-4 invoice-col">
<address>Dirección:</address>
</div>
<div>
CSS
AT THE TOP OF CSS:
/* Don't display when printing */
#media print {
.no-print {
display: none;
}
.left-side,
.header,
.content-header {
display: none;
}
.right-side {
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
#page { /* with this margin, no extra blank page to me */
margin: 0mm auto; /* this affects the margin in the printer settings */
}
}
AT THE BOTTOM OF CSS:
/* Enhancement for printing */
#media print {
.invoice {
width: 100%;
border: 0;
margin: 0;
padding: 0;
}
.invoice-col {
float: left;
width: 33.3333333%;
}
.table-responsive {
overflow: auto;
}
.table-responsive > .table tr th,
.table-responsive > .table tr td {
white-space: normal!important;
}
}
Related
Im trying to set the width of my input field to 80% but whenever I change it to % it doesn't work.
My html:
<div class="todo">
<div class="content">
<div class="b2">
Ends:<input class="finishDate" [(ngModel)]="toDo$.finishDate">
<mat-divider></mat-divider>
</div>
</div>
</div>
My full css of my todo component.
#media screen and (min-width: 500px) {
.todo {
display:flex;
}
}
.b1 input[type=text]{
text-decoration: underline#334A5A ;
text-transform: uppercase;
font-weight:bold;
font-size:19px;
font-family: 'Old Standard TT', serif;
color:#0C1824;
}
input {
border:none;
outline: none;
width:100%;
box-sizing:border-box;
}
.delete {
text-align:center;
}
Why not make it dynamic so that you don't need to ever hard-code the width?
Use flexbox
Surround your conceptual label with a real <label> and point it to the id of the input (added). When you click a label, it focuses the cursor into the associated input
Tell the input to take up the most possible space in the row, leaving the rest for the label
input {
outline: none;
border: 1px solid red;
}
.b2 {
display: flex;
}
.finishDate {
flex-grow: 1;
}
<div class="todo">
<div class="content">
<div class="b2">
<label for="finishDate">Ends:</label>
<input id="finishDate" class="finishDate">
</div>
</div>
</div>
Try to add
box-sizing: border-box;
to your code for the input
DEMO
I have looked at other examples here, but seem to work. I have a small amount of text and an image aligned left inside a blue div. As the page gets narrower the text sizes down properly in the div, but the image remains in the top left of the div. I would like it to stay in the vertical center of the div. It can get larger or stay the same size, I just need it to move to center.
JSfiddle
body, h4 {
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:13px;
color:#333333;
}
* {
padding:0px;
}
.warning {
line-height:1.5em;
font-size:16px;
color:#0c203d;
padding-left:60px;
}
.blueBox {
background-color:#D4DDF7;
min-height:50px;
max-height:150px;
padding:0;
text-align: left;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.icon {
padding:0;
display:table-cell;
vertical-align: middle;
float:left;
}
#media only screen and (min-width : 735px) and (max-width:1400px) {
.warning {
font-size:16px;
padding-top:14px;
}
#media only screen and (min-width : 321px) and (max-width:734px) {
.warning {
font-size:13px;
padding-top:1px;
}
}
#media only screen and (min-width : 200px) and (max-width:320px) {
.warning {
font-size:12px;
padding-top:1px;
}
}
<div>
<div id="ctl00_ContentPlaceHolder1_countyText">
<p class="text">To find road conditions use the County selection box or simply click on a County on the searchable map. To view ALL Counties at once, Choose ALL COUNTIES from the dropdown, and click Go.
<br />Map is not visible on small screens.</p>
<div class="blueBox">
<img class="icon" src="https://placeimg.com/50/50/arch/grayscale" alt="Arrow Icon" width="50px" height="50px" />
<h4 class="warning">THIS VIEW DOES NOT CONTAIN STORM RELATED EMERGENCY ROAD CONDITIONS.</h4>
</div>
<!-- End blueBox -->
<p>To view our progress on STORM Related closings, Visit our Work Plan and Current Closures site.</p>
<p><span id="ctl00_ContentPlaceHolder1_lblMessageCty" class="bText rText">See Results Below</span>
</p>
</div>
</div>
<br/>
<br/>
I guess this is what you are looking for:
You must specify display:inline-table to your .icon and .warning class. Also as you have image so you must not directly apply vertically-align:middle;, better if you wrap it around div/span.
Working : Fiddle
body,
h4 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #333333;
}
* {
padding: 0px;
}
.warning {
display: table-cell;
font-size: 16px;
color: #0c203d;
padding-left: 60px;
vertical-align: middle;
}
.blueBox {
background-color: #D4DDF7;
min-height: 50px;
max-height: 150px;
padding: 0;
text-align: left;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
display: table;
}
.icon {
display: table-cell;
vertical-align: middle;
}
#media only screen and (min-width: 735px) and (max-width: 1400px) {
.warning {
font-size: 16px;
}
#media only screen and (min-width: 321px) and (max-width: 734px) {
.warning {
font-size: 13px;
}
}
#media only screen and (min-width: 200px) and (max-width: 320px) {
.warning {
font-size: 12px;
}
}
<body>
<div>
<div id="ctl00_ContentPlaceHolder1_countyText">
<p class="text">To find road conditions use the County selection box or simply click on a County on the searchable map. To view ALL Counties at once, Choose ALL COUNTIES from the dropdown, and click Go.
<br />Map is not visible on small screens.</p>
<div class="blueBox"> <span class="icon"><img src="https://placeimg.com/50/50/arch/grayscale" alt="Arrow Icon" width="50px" height="50px" /></span>
<h4 class="warning">THIS VIEW DOES NOT CONTAIN STORM RELATED EMERGENCY ROAD CONDITIONS.</h4>
</div>
<!-- End blueBox -->
<p>To view our progress on STORM Related closings, Visit our Work Plan and Current Closures site.</p>
<p><span id="ctl00_ContentPlaceHolder1_lblMessageCty" class="bText rText">See Results Below</span>
</p>
</div>
</div>
<br/>
<br/>
</body>
Remove the float from the .icon element and margin-left: auto and margin-right: auto. Put the below code in whichever breakpoint you'd like to see this behavior.
.icon {
float: none !important;
margin: 0 auto;
}
Your #media queries have some issues, so I've edited them in this example.
body,h4 {
font-family:Gotham,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:13px;
color:#333;
}
* {
padding:0;
}
.warning {
line-height:1.5em;
font-size:16px;
color:#0c203d;
padding-left:60px;
}
.blueBox {
background-color:#D4DDF7;
min-height:50px;
max-height:150px;
padding:0;
text-align:left;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.icon {
padding:0;
display:table-cell;
vertical-align:middle;
float:left;
}
#media screen and (max-width: 480px) {
.icon {
float: none !important;
margin: 0 auto;
}
<body>
<div>
<div id="ctl00_ContentPlaceHolder1_countyText">
<p class="text">To find road conditions use the County selection box or simply click on a County on the searchable map. To view ALL Counties at once, Choose ALL COUNTIES from the dropdown, and click Go.
<br />Map is not visible on small screens.</p>
<div class="blueBox">
<img class="icon" src="https://placeimg.com/50/50/arch/grayscale" alt="Arrow Icon" width="50px" height="50px" />
<h4 class="warning">THIS VIEW DOES NOT CONTAIN STORM RELATED EMERGENCY ROAD CONDITIONS.</h4>
</div>
<!-- End blueBox -->
<p>To view our progress on STORM Related closings, Visit our Work Plan and Current Closures site.</p>
<p><span id="ctl00_ContentPlaceHolder1_lblMessageCty" class="bText rText">See Results Below</span>
</p>
</div>
</div>
<br/>
<br/>
</body>
When using media queries at specified breakpoints, you're typically safe to use display: table on a parent and display: table-cell; vertical-align: middle; on the children in order to vertically align their contents.
In the snippet below, I have removed most of your HTML to better outline the elements to which the CSS actually applies. This should help anyone else who happens to land on this question. Also, I replaced the img tag since an arrow in this case is not semantic content and it made things easier to style.
body { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* ------------------ Start Important Part ------------------ */
.warning {
display: table; /* Set container as table */
width: 100%;
background-color: #D4DDF7;
}
.warning > * {
display: table-cell; /* Set children as table-cell */
padding: 15px;
vertical-align: middle; /* Vertically center children */
}
/* ------------------- End Important Part ------------------- */
/* Icon */
.warning > .icon { width: 50px; }
.warning > .icon::after {
content: "";
display: inline-block;
background: url("https://placeimg.com/50/50/arch/grayscale");
width: 50px;
height: 50px;
}
/* Warning text */
.warning > p {
line-height: 1.5em;
font-size: 16px;
color: #0c203d;
font-weight: bold;
}
<div class="warning">
<span class="icon"></span>
<p>THIS VIEW DOES NOT CONTAIN STORM RELATED EMERGENCY ROAD CONDITIONS.</p>
</div>
I bought before-after jQuery plugin, and I made a simple WordPress-theme. But few things don't work. I wanted to make this slider as my background so I made div in which slider is fit to page, but it doesn't fit. That is my first problem.
My second problem is that gravity forms make some strange things, they are blocking some functions, but I'll fix that.
Here is code:
css:
html {
width: 100%;
}
body {
background-color:#A6B8CC;
margin: 0px!important;
}
.titlelogo {
background-image:url(../images/sitelogo.png);
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
padding-top:35px;
margin-top:20px;
margin-bottom:-5px;
display:block;
width:250px;
height:98px;
}
#big_divider {
margin-top:150px;
}
#example{
margin: auto;
padding: 0px!important;
}
#example img {
max-width: 100vw;
max-height: 100vh;
}
#after {
max-height: 100vh;
max-width: 100vw;
}
ul {
margin:0px!important;
}
#secondary {
display: none;
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 0em!important;
-webkit-margin-after: 0em!important;
-webkit-margin-start: 0px!important;
-webkit-margin-end: 0px!important;
-webkit-padding-start: 0px!important;
}
#ext_ext_after {
margin: 0 auto;
}
html:
<div id="example" class="beforeafter_slider shadow1">
<ul>
<!-- THE 1. SLIDE -->
<li><img src="<?php bloginfo('template_url'); ?>/img/extralightgethaldus2.jpg" alt="<?php bloginfo('template_url'); ?>/img/withglassesgethaldus2.jpg">
<div id="textbox_1" class="before">
<div id="title_1b" class="fadeup">BEFORE</div>
</div>
<div id="textbox_1" class="after">
<div id="title_1b" class="fadeup">AFTER</div>
</div>
<div id="textbox_snw">
<div id="title" class="fadeup">Don't let the sun be your enemy!</div>
<div id="title2" class="fadeup">Do you consider yourself unique?<br>Your glasses should be as well.</div>
<div id="description" class="fadeup">We are soon lounching a new eyeware webshop<br>like you've never seen before across all Europe.<br><br>
Right now we cannot say anithing else, but if you want<br> to be among the firs to be noticed what it's all about<br>
leave your e-mail adress below and join our community.</div>
</div>
</li>
</ul>
</div>
And here is link: http://svinaweb.hr/gethaldus-lp/
The div will not always fit everyone's screen so to overcome this problem it might be a good idea to change your CSS style to this one below...
#example img {
width: 100%;
height: auto;
overflow: hidden;
}
Please comment back if you need more help or this is not what you are looking for.
I have a sentence in h1 tag. On resize I want the last three words to jump down together not just one at a time, since the last three words are a tagline and it wouldn't make sense if they get separated. Here is the live site.
Here is the HTML:
<header class="header" role="banner">
<div id="inner-header" class="wrap clearfix">
<div id="title">
<!-- to use a image just replace the bloginfo('name') with your img src and remove the surrounding <p> -->
<h1 id="logo" class="h1">
<a href="<?php echo home_url(); ?>" rel="nofollow">
<?php bloginfo('name'); ?><span class="subtitle">
<?php bloginfo('description'); ?></span>
</a>
</h1>
</div>
<nav role="navigation">
<?php bones_main_nav(); ?>
</nav>
</div> <!-- end #inner-header -->
and the scss:
.header {
#title {
#include span-columns(23 ,24);
position: absolute;
top: 30px;
text-align: center;
}
.subtitle {
font-size: 0.3em;
margin-left: 1em;
}
.nav {
#include span-columns(24 omega ,24);
margin-top: 289px;
}
#logo {
a {
color: #fff;
font-family: 'Pacifico', cursive; /*font-size: 2.5em;*/
text-shadow: 0px 0px 0 #B6CEBF,
0.707px 0.707px 0 #B6CEBF,
1.414px 1.414px 0 #B6CEBF,
2.121px 2.121px 0 #B6CEBF,
2.828px 2.828px 0 #B6CEBF,
3.536px 3.536px 0 #B6CEBF,
4.243px 4.243px 0 #B6CEBF,
4.95px 4.95px 0 #B6CEBF,
5.657px 5.657px 0 #B6CEBF,
6.364px 6.364px 0 #B6CEBF,
7.071px 7.071px 0 #B6CEBF;
}
}
}
Try this:
.subtitle {
display: inline-block;
font-size: 0.3em;
margin-left: 1em;
}
Setting the display to inline-block will keep the element's contents together (a behavior of block elements), but still keep it inline with other text.
You should also look at making some other adjustments so the title can be 100% width, and the navigation still gets positioned properly:
#logo {
margin: 80px 0 0;
}
.header #title {
height: 289px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
.header .nav {
display: inline;
float: right;
width: 100%;
}
.header .nav ul {
/* Add the .clearfix class to this ul */
}
We are talking about responsive #media queries here. There are few ways to do this, but this is the fastest:
Add this rule to you scss:
#media only screen and (max-width: 768px) {
.subtitle{
display: block;
}
}
Aside
Bones comes with other scss files, edit _base.scss for general styles, but for custom styles on resize edit files like _768up.scss, also read the info inside the style.scss file to get more info about the media queries. Bones comes with an awesome documentation.
Further reading
Nice tutorial about media queries from CSS-tricks
Media Queries Spec from W3C
CSS media queries at MDN
How do I get the p-tag with text "jon harris" beside the p-tag with text "Room 2"
I have tried float-combinations.. but there is something missing..i guess.
here the html code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Twitter Avatar Scrolling</title>
<link rel="stylesheet" href="css/events.css" />
</head>
<body>
<div class="event">
<img src="images/red.jpg" alt="picture" />
<p>Room 2</p>
<p class="patient-name">Jon Harris</p>
<p class="event-text">This is a pixel. A flying pixel!</p>
<p class="event-timestamp">feb 2 2011 - 23:01</p>
</div>
</body>
</html>
here is the css:
body {
font:13px/1.5 "helvetica neue", helvetica, arial, san-serif;
}
.event {
display:block;
background: #ececec;
width:380px;
padding:10px;
margin:10px;
overflow:hidden;
text-align: left;
}
.event img {
float:left;
}
.event p {
margin:0;
padding-left:60px;
font-weight: bold;
}
.patient-name {
color: #999999;
font-size: 9px;
padding-left: 5px;
}
.event-text{
color: #999999;
font-size: 12px;
padding-left: 5px;
}
.event-timestamp{
color: #000;
padding-left: 5px;
font-size: 9px;
}
Here you go ... http://jsfiddle.net/2N6tu/
You just need to turn the first two <p> elements to inline elements.
Create a wrapper around those two P tags, set the width of those two P tags and add float: left to both e.g:
<div class="event">
<img src="images/red.jpg" alt="picture" />
<div class="event-wrapper">
<div class="event-inner-wrap">
<p class="room-number">Room 2</p>
<p class="patient-name">Jon Harris</p>
</div>
<div class="clear"></div>
<p class="event-text">This is a pixel. A flying pixel!</p>
<p class="event-timestamp">feb 2 2011 - 23:01</p>
</div>
</div>
css
.clear {
clear: both;
}
.event-wrapper {
width: 300px; /*** assuming that image is 80px, i didn't measure ***/
float: left;
}
.event-inner-wrap {
width: 300px; /*** assuming that image is 80px, i didn't measure ***/
}
p.room-number {
width: 150px; /** set as whatever you like, just make sure this width plus the width of the patient name is no bigger than the wrapper width **/
float: left;
}
p.patient-name {
width: 150px; /** set as whatever you like, just make sure this width plus the width of the room number is no bigger than the wrapper width **/
float: left;
}
Good luck.
Edit, because I saw that image you posted after I added this.
Edit again, because you don't need the extra clear: both; and I missed off 2 semi's.
Note, if you end up using Span tags instead of P the same above principle applies, however, the Span will require a display: block; on them if setting widths etc.
have you tried
.event p{display:inline;}