The HTML file attached here is working fine when viewed in browser but when I try to print it, there is a lot of gap between the Element such that each div is going on it's own page. how can I remove those gaps while printing?
the code : code
the hosted site : sitelink
You can check the problem by going into sitelink mentioned above and pressing ctrl + p.
You can Add float:left; in your css classes:
<style type="text/css">
div.nospace {
margin: 0;
display: inline-block;
float: left;
}
</style>
When creating your div, use class="nospace"
<div class="nospace">first div</div>
<div class="nospace">second div</div>
Sir Plz check this answer on that page. It would help you how can we remove space between HTML elements. In this article, everything is provided in enter link description here
you can solve problem buy adding small css property
font-size: 0;
Related
I know this has been asked multiple times before but none of those solutions have worked and hopefully since then someone has figured it out.
I have created a HTML page that i will be printing using Chromes browser print utility, i need to add an image at the bottom of the last page, the problem is that the content within the page is dynamic, so most methods i have looked at just place the image where the content ends, and not at the bottom of the last page.
<head>
<title></title>
<style>
#footer:before {
display: block;
content: "";
margin-top: 100%;
}
</style>
</head>
<body>
<div id="content">
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
</div>
<div id="footer">
<img src="https://get.clt.re/wp-content/uploads/2014/12/footer-background-01.jpg" style="">
</div>
</body>
This is a very simplified example, the content will be dynamic so there could be multiple pages, and the image in the footer will be large,
essentially i need the footer to look like this:
https://i.stack.imgur.com/Wh9s0.png
but only on the last printed page
any javascript or jquery solution is welcome
You could essentialy generate two footers, one for your page content and one for printing. Use CSS then for displaying:
#media print {
.content-footer {
display: none;
}
.print-footer {
display: block;
//Always at the bottom
position: absolute;
bottom: 0;
}
}
I don't think there is an answer here. If you want to place that image on each page then Idan Cohen has a good solution here: https://medium.com/#Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a
As to just the last page ... not even the CSS 2 Spec. for Paged Media supports a :last page selector (but does for :first). But even #page is unreliable as most browsers have scaled down support for things like page counters etc. (See #Page Browser Compatibility)
Your best bet is to explore either a compromise (either the image on each page, or the image at the end of the content - but not necessarily at the bottom of the page) or explore the possibility of getting the job done via a JavaScript library that generates PDF on the fly.
Could you please help me with changing the direction of this page to RTL? I have tried several solutions but unfortunately none of them works fine.
Some times this may be worked. Try and let me know.
Add dir="rtl" to your html tag
<html dir="rtl"></html>
or
Add direction:rtl; property to html tag styles in styles heet.
html { direction:rtl;}
Thanks.
It's better to fill the ticket at their GitHub page, asking for adding support for such option naively.
For now, you could simply go with adding CSS rule:
.timetable aside,
.timetable section
{
float: right;
}
Besides, you should also learn more about text direction attribute, that indicates the directionality of the element's text.
You can simply add some CSS:
.timetable{
text-align: right;
}
.timetable aside
{
float: right;
}
and in the div where you include the plugin:
<div class="timetable" dir="rtl"></div>
I'm stuck with something here:
I have a hidden div with some optional filters in a results page.
<div id='b-filters' class='row'>...</div>
Initially it is hidden with display: none;, when click a link it shows with some buttons and selectize combos.
The problem is here:
When div shows up, some JS, I don't know how to find out which; adds some in-line css:
<div id='b-filters' class='row' style='overflow: hidden; display: block;'>...</div>
So it is no possible to see the combos options. Using Chrome debugger I change overflow: hidden to overflow: visible and it works as I'd like.
I have tried:
In my external css file (app.css)
#b-filters{
...
overflow: visible;
...
}
But does not work, and in the same html file:
<head>
...
<style>
div#b-filters{
overflow: visible;
}
</style>
</head>
...
But Chrome inspector always show overflow: visible; crossed out.
Any idea? Thanks.
EDIT
I took #Stephen Thomas answer, but I'd like somebody help me with the way to find out which JS is adding that in-line css.
Without seeing the actual JavaScript, the only suggestion I can offer is
div#b-filters{
overflow: visible !important;
}
But if you show us your code, there is probably a more elegant way.
Instead of adding inline CSS directly to the element, why not abstract the CSS attributes into generalized classes, then just add/remove those classes?!
// style.css
.hide {
display: none;
}
// view.html
<div id="b-filters" class="row hide">...</div>
// app.js
btn.addEventListener('click', function(event){
var el = document.querySelector('#b-filters');
el.classList.remove('hide');
});
var problematicDiv = document.getElementById('b-filters');
if(problematicDiv.hasAttribute('style'))
{
problematicDiv.removeAttribute('style');
problematicDiv.style.display = 'block';
problematicDiv.style.overflow = 'visible';
}
This 'pseudo' js code should work as eventlistener.. haven't tested though, but I think it's ok.
I have an issue with my h1 and floating element
I want page number h1 element to be aligned on the right side of my presentation text.
Chrome display the results well but not firefox..the page number texts are within one of my slide images.
Here is my jsfiddle
http://jsfiddle.net/A3RXg/3/
Can someone help me out?
Thansk
Did a jsFiddle here: http://jsfiddle.net/89dQr/.
Updated CSS code
#page-count{
float: right;
}
.break {
clear: both;
}
h1{
float: left;
}
Try removing
white-space: nowrap;
from CSS for
#slide-container
DEMO FIDDLE
If you are going to use a "section" tag you need to specify a width. Otherwise I would recommend using a DIV tag. I believe your iissue is that a section tag doesn't have a width and doesn't resize based on contents.
See "how to float the section tags in html5" for information on float + section tags.
you simply can wrap your h1
<div style="float:left; width:300px;">
<h1>Presentation</h1>
</div>
<div style="float:left">
<h1 >page number</h1>
</div>
<div style="clear:both"></div>
Firefox refuses to show floated elements inline with non-floated elements that exist under the same parent element. (Firefox always uses display:block; for floated elements.)
Either use position:relative; on the parent element and use absolute positioning for the h1s, or float both "Presentation" and "page number".
I'm trying to have two buttons side by side, one with an image, one with text.
I can't figure out why they don't line up correctly on the baseline.
Here's the code:
<head>
<style type="text/css">
button {
height: 20px;
}
</style>
</head>
<body>
<button id="image-button">Some text
<img src="http://www.famfamfam.com/lab/icons/mini/icons/application_firefox.gif">
</button>
<button id="text-button">Some text</button>
</body>
I'd love a solution to this, but I'd also love to understand the "why" of this behavior, since it is consistent on all browsers.
Also, I've tried "float: left" on the image, but that doesn't work on Chrome.
Add vertical-align: top
button {
height: 20px;
vertical-align: top
}
Check this JSFiddle
Your problem is two things, one the image is bumping up the line height of that text since it's displaying inline. And two, browsers don't support vertical-align consistently. Looking at the previous answers, some of them work in Chrome, but not in Firefox.
My best solution - that works in all the browsers I test in - is to redefine how the image is treated and make it a block element, then float it to the right of the text. That way the image does not affect the way the text is aligned. The downside to this is that you then need to define an absolute width for the button to make sure the image isn't wrapped to the line below the text. Here's the CSS for that:
button {
height: 20px;
width: 100px;
}
img {
display: block;
float: right;
}
Working fiddle
Another solution is to use a background-image on the button instead of an img tag, but then you'll need to define a padding on the right side of that button to make room for the image. But then you lose the default styling that the browser places on the button, so you're going to have to deal with that.
The text and the image are lining up on the bottom, but being pushed down by the size of the image. Try setting vertical-align: Text-top
More details: http://css-tricks.com/what-is-vertical-align/
You can fix this using line-height:
button {
height: 40px;
line-height: 40px;
}
There is a fiddle here: http://jsfiddle.net/txdMZ/