I'm trying to avoid the margin of the first page. All tables (there are many) are fitting a page. But the first one has a margin.
I tried: so many ways. Is there a way with CSS to avoid margin on first page? I tried on body, html, page...
I've searching a lot. But I can't find a solution. I though of creating an element and put it on the first page.
My page has many tables. One per page. Except the first one fits on one page due to the margin.
#media print {
#page {
margin: 0mm;
size: auto;
padding: 0;
}
#page:first {
margin: 0px;
color:blue;
}
html {
margin: 0px;
}
body {
display: table;
margin: 0mm 0mm 0mm 0mm; /* margin you want for the content */
margin-top:0px !important;
}
.tableSchedule tr {
padding-top: 0px;
height:45px;
}
.tableSchedule {
table-layout:fixed;
width:1130px;
margin:0;
page-break-after:always;
}
I had a similar problem with images and divs in the past. Turns out that even if you set the margin to 0 some browsers will seperate elements, particularly inline elements, with a space of 1 em. Setting the font-size: 0 for the parent element removed that "phantom" margin. Just don't forget to change the font size back for the child elements!
Alternatively you can style the first table with a negative margin to cheat. i.e. margin-left: -15px . Or so depending on your needs.
Related
I am trying to figure out what code to edit in order to display 4 columns instead of the current 5 for the products towards the bottom of this page: https://zadroinc.com/this-is-a-test
It's built on bigcommerce, so I may not have access to all the jquery/javascript files, but I was hoping someone could point me in the right direction or maybe I could insert a script to overwrite it? Any suggestions?
Thank you!!
Edit: I want to display 4 products instead of 5 products.
to get the results you are looking for you need to change some CSS in your styles.css file:
.Content .ProductList li {
margin: 0 0 20px 75px !important; /* modified! */
}
this will get you what you want but changing styles like this is NOT recommended cause this little change might give you headaches in the future :)
If you want to display only first 4 product then please add below css code.
.Content .ProductList li:nth-of-type(1n+4) {
display:none;
}
Look for a div right under Mobile_Banner class, it has an inline style:
margin: auto;
width: 84%;
text-align: center; <--Add this;
Now go to his children, to control their look look for a file called this-is-a-test at line 370:
.sml_cat_cont_fifth, .sml_cat_cont_fourth, .sml_cat_cont_second, .sml_cat_cont_third, .sml_cat_cont_first {
width: 200px;
margin: 20px 20px 20px 20px;
overflow: hidden;
display: inline-block;
float: none;
Next on the same file, at the next line 371 change the css for .itemzoom:
.itemzoom {
height: 100%;
width: 100%;
}
Now go to cd-styles.css file and change it to:
.itemzoom {
position: relative;
margin: 2%; <--remove this
overflow: hidden;
}
You get this:
https://imgur.com/a/H2IVoJ1
PS:
By the time I was writing this I think you changed your original question, I thought you wanted all 5. Now to display 4, you can add to any of those divs (.sml_cat_cont_first, second etc) display:none and the rest will be automatically centered.
I am printing web page using Javascript but I got header and footer contain page title, file path, page number, and date. How do I remove them?
I found similar questions related to this problem like below
Remove header and footer from window.print()
But every solution says to set margin:0 in #page
I tried that as
#page {
size: A4 landscape;
margin: 0;
}
body {
margin: 30pt;
}
It works fine on the first page of my printed page. From the second page onwards, the margin goes to zero.
I have also tried moznomarginboxes but which is deprecated now.
This removes the unwanted data:
html, body {
width: 210mm;
height: 297mm;
margin: 0 auto;
}
#page {
size: auto;
margin: 0;
}
Most likely you will have to adjust the margin and font-size if you decide to use it.
I want to make a div scrollable when its touching the bottom div.
I tried this:
margin-bottom:30px;
position: relative;
overflow: auto;
but it didn't work.
I created a fiddle tho show you my problem:
https://jsfiddle.net/wp3wvuj2/1/
For explanation: When you type in in a input field a new field is added to the div (This function is simplified). I want that before the input fields touch the element below (the START-div) it gets scrollable (overflow: auto).
Somebody have an idea?
Edit:
I noticed that nobody understands my problem.
I'll try to explain it better:
I have list where players add their names. The list has minimum 4 players maximum ∞.
The start buttonis placed at the bottom. The problem is in a iphone 5 it looks like this:
And now if i would add another player input field it would Overlap with the START-Button. Thats the reason why I want it scrollable now. I already get that work with a fixed height, but i want it responsive!
Because on a iPad for example it looks like this:
And I want prevent an overlap with the start button like this:
So it should get scrollable before it overlaps (dependent on the display size).
Updated JS fiddle, try this, i have updated CSS part in your code
https://jsfiddle.net/wp3wvuj2/2/
.main_input {
width: 209px;
top: 70px;
margin: auto;
margin-bottom:30px;
/* position: relative */
overflow: auto;
height:216px; //Give some height always to apply overflow auto
}
.main_start {
width: 100%;
margin: auto;
/* position: absolute */ //Not required
bottom: 20px;
font-family: Pamela;
font-size: 36px;
text-align: center;
}
I've only changed the styles on class main-input
.main_input {
width: 226px;
height: 234px;
top: 70px;
margin: auto;
margin-bottom:30px;
position: relative;
overflow-y: auto;
}
EDIT:
Please note for this solution to be able to work, I needed to remove the Top and Bottom positions of some elements as they were breaking the layout. Please use Margins or Paddings to get that styling you desire.
This now works to scroll once the space runs out on the page.
https://jsfiddle.net/wp3wvuj2/5/
I have some expanding content in my #main (or) #panel (got this from a template) div, but when you expand it, it pops to the unknown, under the page...
How could I make my main div expand with my content.
CSS
#main
{
position: relative;
overflow: hidden;
}
I also have some JS/Ajax scripts that expand the page to the right size when you switch page, could they affect...?
See live demo here! (The (i) button)
The divs expand when you click on them.
A few times it worked on another computer, but very randomly..
Tell me if you need the scripts or more code.
Basically, everything's wrapped in .main -> .panel
Simple: When the div is expanded, expand the main div's height to fit it.
.panel
{
position: relative;
display: table-cell;
width:100px;
vertical-align:middle;
}
The problem is not with the main div, but the class panel.
.panel {
padding: 3.5em 2.5em 3.5em 2.5em;
position: absolute; // I'm the problem
top: 0;
left: 0;
width: 45em;
}
This is also a problem.
#me .pic img {
position: relative; // I'm evil
display: block;
height: 100%;
}
My debugging may have been awry though, since it doesn't want to play nice and stick with what I want it to do sometimes.
Let me know if this helps in some way, and if you need help debugging anything from there.
EDIT
Your problem may just be a matter of recalling the Script that you use to re-size the main div when the script that displays the hidden divs content goes off. That should re-size the page to fit the new content.
I can't locate where this script goes off, so if you can provide it, I could figure it out.
If your question is actually "how do I make my main div's height change dependent on it's contents" then all you need to do is remove overflow: hidden; from the css class.
I'm trying to figure out a way to have a certain amount of space between the top of my footer and a div.
Right now each page is of a different size and I'm adjusting this manually. The biggest issues I'm having is across different formats of web browsers my manual space is changing. and on a couple pages I have a js questionnaire, when the questionnaire is completed my div slides down over top of my back and next buttons. I corrected this by creating a new CSS style for it.
Is there a way I can set my div (Which is a box with text) to align on every page the same distance from the footer and on every browser. Right now my code is only working correctly in IE9.
Here is the CSS I'm using:
#mainInfoBox
{
margin-bottom:-35px; !important;
clear:both;
min-height:2em;
height: auto !important;
height:32px;
padding: 2px 3px 0 3px;
border: 1px solid #4c6352;
background-color:#f2f684;
color:#000;
font-family:Tahoma, Geneva, sans-serif;
text-align:center;
display:block;
position: relative;
}
And this is what I'm using in the html, though that values change on every page:
<div id="mainInfoBox" style="margin-top:193px; clear:both">Blah Blah Blah</div>
Assuming your footer is the same on every page, you can set a fixed height, or at least calculate the height of it. Then absolutely position the div you want on top of it using the bottom property like so:
footer { height: 250px; }
#mainInfoBox {
position: absolute;
bottom: 260px; /* so it is 10px on top of the footer */
}