maybe this question is too weird or even is off-topic, sorry for that but I have this doubt:
Exists a way to show a HTML page in the same size for all screens when the user types control + p (print page)?
For example my laptop have this screen resolution: 1600x900 and when I type control + p the HTML page look perfect (all in 1 page)!
Problem appears when I use a bigger(page appear in 2 or more pages) or smaller screen(page appear in 1 page but with a lot of blank spaces).
At the moment I tried with #page margins but not work at all, just in some cases, however here is the code:
<style>
#page :left {
}
#page :right {
margin-top: 0.2cm;
margin-bottom: 0.2cm;
}
body {
font-size: 9.5px;
}
</style>
PD. I'm using JavaScript, jQuery, HTML5, CSS3, Bootstrap.
Control + P means print, right?
Then yes, you should use the media query
#media print{
}
This a good explanation: https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/
Related
I need to create print version of website, and as I mention in title I need to display site logo just on first page. For example, if I print home page, and I get 5 pages, logo should be displayed just on first page.
is it possible with #media print ?
What I've tried so far but does not work
#media print {
#top-menu,
#main-navigation-sticky-wrapper,
#action-bar,
.teaser-cda,
.pre-footer,
.footer,
.post-footer,
.header .logo {
display: none;
}
#page:first {
.header .logo { display:block }
}
The correct syntax (according to MDN) for first page is:
#page :first {
/* .... */
}
You don't have a space between the two components. Be wary, however, as compatibility for #page :first is not well-defined.
It might not even be necessary though. I don't think block-level elements get repeated on every page, so you might just need to ensure that the logo is displayed in #media print { ... }.
You will also want to check the element and it's container elements to ensure that none of them have position: fixed as that may also cause the element to repeat on each printed page.
#page rule is a CSS at-rule used to modify different aspects of a printed page property. It targets and modifies only the page's dimensions, page orientation, and margins.
It can't have css class inside.
#page :first {...} it just allows you to add these previous styles on the first page but you can't also add a class inside.
I have a page with some data and content. I want to make a print version that will display the content and footer not to worry much about the header.
Instead of writing another page just for printing, I was reading about CSS's feature for "#media print".
First, what browsers support it? Since this is an internal feature, it's OK if only the latest browsers support it.
I was thinking of tagging a few DOM elements with a "printable" class, and basically apply "display:block". Is that doable?
How do I achieve this?
EDIT: This is what I have so far:
/* Print Style - SuccinctNate */
#media print {
* {display:block;}
.printable, .printable > * {display:block;}
#footer {display:block;}
}
your code seems correct . you can set display:block to the items you want to show on the print and display:none on everything else.
#media print {
* { display:none }
.item_i_want_to_print { display:block;}
}
or you could just hide the ones you don't want to appear on the print
#media print {
.item_i_do_not_want_to_print { display: none;}
}
it is compatible with every browser . so use it with confidence
see more here : media print
This is the second attempt at this question as I have worked on this since I last asked so hopefully I'll make more sense this time.
I'm creating a responsive layout for my coming soon page. The main body header changes depending on the size of the browser and the device.
<h1><span class="main__header--changer">COMING SOON</span></h1>
... and the CSS
#media (max-width: 75em) {
h1:before {
content: "HOLD ONTO YOUR HATS";
}
.main__header--changer {
display: none;
}
}
#media (max-width: 64em) {
h1:before {
content: "NOT LONG TO GO";
}
.main__header--charger {
display: none;
}
}
... and so on and son on, the different variations of coming soon contains less letters as the size goes down, right down to 'nigh'.
The only thing my way of doing this means that screen readers wont read the heading because of the display:none. Is there a different way to hide the heading but not from screen readers but that the content is shown from the css?
Thanks
You can create a hidden effect by bumping the content way outside the screen display area using margins or the text-indent property. These methods aren't what I'd call 100% clean, but they at least keep your HTML markup tidy.
Check out this helpful thread that explains screen reader interactions with CSS-hidden elements.
I also assume that in the second reference in your CSS you mean --changer not --charger.
On a side note, if the statement: .main__header--changer {display: none;} is the same across all your media queries, you should consider just writing it once outside of any queries so it applies universally without duplication in your code.
Hope this has been helpful!
I am trying to display a list of data in table on the desktop version of the website using tables. I want to condense the same for the mobile web. Should I use a separate block of html or can I convert the present tables for the mobile view.
http://play.mink7.com/h/startupsradar/pending.html
I like the following list view on mobile
Update
I modified the code according to the answers. Any idea how i can make the whole list as a whole as click-able as one block ?
You can turn an HTML table to different rendering, e.g. setting
table { display: block; }
tr { display: table; }
th, td { display: table-row; }
This would cause a completely vertical presentation.
The details of course depend on the markup and on the desired rendering.
You can convert the same block using handheld specific stylesheet attribute media="screen and (max-device-width: /* whatever */)" like this :
<link rel="stylesheet" href="whatever.css" type="text/css" media="screen and (max-device-width: /* whatever */)">
Or you can use #media inside your stylesheet
#media only screen and (max-device-width: /* whatever */) {
/* Styles goes here */
}
Media Info
P.S I just saw the source of nike.com, they are using the
stylesheet attribute for ipad.css stylesheet, have a look.
If CSS3 is acceptible, you can use media queries to create different styles for different dimensions and devices. You can create incredibly dynamic sites in this way.
In general, table data can stretch tables rows to an undesired length, going out of bounds of the table row. When dealing with mobile devices you will have limited px. You could either create a copy of your existing CSS Stylesheet and edit it slightly setting a min/max width for the table for when your site switched to mobile.
max-width: __px;
min-width: __px;
etc.
Or you could call a JS function on the event of the switch to mobile site appending the CSS
$('#tableName').css('max-width', '150px');
$('#tableName').append(div).css('max-width', '150px');
The JS version can be a little tricky to get going, I think that you should go with setting limits on the CSS.
Media queries i can suggest is the best solution for responsive design.
Let me give you a simple code for responsivenes based on page width.
Here in the code i have using the media queries for changing the para color based on the browser width. You can instead hide using style=display:none or change the size of the contents based on the browser width.
<html>
<head>
<style>
#media (max-width: 600px) {
#p1{
color:red;
}
}
#media (max-width: 400px) {
#p1{
color:blue;
}
}
</style>
</head>
<body>
<p id="p1" media="(max-width: 800px)">Hi , This text colour change according to browser size.</p>
</body>
</html>
you can find more tutorial simply here
I'm trying to understand screen vs. print behavior. What's the reason the APSW docs look different in print vs. screen? (In print, the table of contents column vanishes, and the main column takes up the whole print width)
(I'm trying to debug my sphinx document which doesn't have this behavior, but I figure if I can understand one that works properly, I can figure out why mine doesn't.)
Just something to note, after looking closely at the #media print section in basic.css cited by those of you who answered — there was one line different between my basic.css and the one in APSW:
div.bodywrapper {
margin: 0 !important;
width: 100%;
}
The !important modifier was missing from my basic.css and that was causing the margin: 0 to get overridden.
This is done using media types. With them, you can limit style rules to a certain output device like screen, printer, or handheld.
See here: http://apsw.googlecode.com/svn/publish/_static/basic.css
This is linked to the media type.
You can either link it to a group of properties:
#media screen {
body { font-size: 13px }
}
or to an entire stylesheet
<link href="blah.css" media="all" rel="stylesheet" type="text/css" />
In your case:
#media print {
div.document,
div.documentwrapper,
div.bodywrapper {
margin: 0 !important;
width: 100%;
}
div.sphinxsidebar,
div.related,
div.footer,
#top-link {
display: none;
}
}
They have #media rules.
Take a look at:
http://apsw.googlecode.com/svn/publish/_static/basic.css
They include another css-file in their stylesheet via
#import url("basic.css");