I have used page-break-inside: avoid; for page break, that work fine. But in second page there is no margin in top.
<div class="section-wrapper keep-together">
<div class="section-title">
<p class="title">{{ $section['certification']['title'] }}</p>
<p class="line"></p>
</div>
<div class="content">
<div class="content-row">
<div class="description">
<p>{!! $section['certification']['data']['details'] !!}</p>
</div>
</div>
</div>
</div>
.section-wrapper {
position: relative;
margin-bottom: 3%;
.section-title {
.title {
font-size: 2rem;
font-weight: 700;
text-transform: uppercase;
color: $color-blue;
padding: 0 80px;
}
}
.desc {
margin-bottom: 2rem;
font-weight: 300;
font-size: 1.5rem;
text-align: left;
}
}
}
}
Need some margin in second page. I am using laravel 5.7 and snappy pdf
Related
There are several messages concerning this subject, but I cannot solve this problem. As here:
How to reverse the order of elements in responsive mode
I don't understand why is the order of my elements changing? Why my elements to right are not Deposit then Paidout? As in the image below.
It is possible to solve this problem without flex?
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
body {
margin: 0;
padding: 0;
}
.txt10 {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: red;
}
.header{
display: inline-block;
width: 100%;
background-color: aqua;
height: 20px;
padding-top: 13px;
padding-bottom: 13px;
}
.header-items-left{
float: left;
padding-left: 20px;
}
.left{
margin-left: 150px;
}
.header-items-right{
float: right;
padding-right: 10px; /*espacement entre les deux lignes à droite */
}
.right{
margin-right: 50px;
}
<div class="header">
<div class="left">
<div class="header-items-left"><i class="far fa-calendar"></i>138 running days</div>
<div class="header-items-left"><i class="far fa-envelope"></i>admin#superbtc.biz</div>
</div>
<div class="right">
<div class="header-items-right"><i class="fas fa-angle-right"></i> deposit</div>
<div class="header-items-right"><i class="fas fa-angle-right"></i> paidout</div>
</div>
</div>
Use float: right on the container instead and display: inline-block for the two items.
.right {
float: right;
}
.text {
display: inline-block;
padding-left: 20px;
}
<div class='right'>
<div class='text'>first</div>
<div class='text'>second</div>
</div>
How do I make a css like the image below. If there is an easy way, happy to change div structure.
I tried
<div className='row paragraph paragraph-paragraph-margin'>
<div className='col xs-12 beCenter'>
<div className='pointHistoryBigPoint'>
<span className='pointHistoryBigPointNum'>5,651</span>
<span className='pointHistoryBigPointUnit'>PTS</span>
<span className='pointHistoryBigPointStar'>*</span>
</div>
</div>
</div>
css
.pointHistoryBigPoint {
font-family: "Proxima Nova";
/*
width: 200px;
height: 52px;
margin: 0 auto;
*/
height: 100px;
}
.pointHistoryBigPointNum {
font-family: "Proxima Nova Semi Bold";
/*font-size: 60px;*/
}
.pointHistoryBigPointUnit {
/*font-size:20px;*/
}
.pointHistoryBigPointStar {
}
Use sup tag
<div className='row paragraph paragraph-paragraph-margin'>
<div className='col xs-12 beCenter'>
<div className='pointHistoryBigPoint'>
<span className='pointHistoryBigPointNum'>5,651</span>
<sup className='pointHistoryBigPointUnit'>PTS*</sup>
</div>
</div>
</div>
I added display: flex to your container so now each span takes the container height, and also set line-height to be equal to the font size, which will make you text stick to the top.
.pointHistoryBigPoint {
font-family: "Proxima Nova";
width: 200px;
height: 52px;
line-height: 52px;
margin: 0 auto;
display: flex;
}
.pointHistoryBigPointNum {
font-family: "Proxima Nova Semi Bold";
font-size: 60px;
}
.pointHistoryBigPointUnit {
font-size: 20px;
line-height: 20px;
}
.pointHistoryBigPointStar {
line-height: 20px;
}
<div className='row paragraph paragraph-paragraph-margin'>
<div class='col xs-12 beCenter'>
<div class='pointHistoryBigPoint'>
<span class='pointHistoryBigPointNum'>5,651</span>
<span class='pointHistoryBigPointUnit'>PTS</span>
<span class='pointHistoryBigPointStar'>*</span>
</div>
</div>
</div>
Sorry if the title doesn't explain it. I have footer and it includes whatever is above the footer. If I have text above the footer (as a sibling of the footer tag) the footer includes the text as part of the footer. Here is my code:
<section id="description">
<div id="description1">
<div class="container">
<h3><em>text</em></h3>
<p>text</p>
</div>
</div>
<div id="description2">
<div class="container">
<h3><em>text</em></h3>
<p>text</p>
</div>
</div>
</section>
<footer>
<div class="container">
<p id="copywrite">AllKind Corporation, Copyright © 2018</p>
Credits
<p id=disclaimer>By using this site, you agree to our Privacy Policy and Terms of Conditions.</p>
<p id="license">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">
<img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/4.0/88x31.png" />
</a>
<br />This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>.
</p>
</div>
</footer>
For some reason my footer is including the description (a child of <section id="description">) in the footer. I have narrowed the issue down to having to do with the float: right; tag in the CSS for description2.
Here is my CSS for the description and footer.
/* Description */
#description1 {
text-align: center;
font-size: 18px;
float: left;
padding-left: 100px;
padding-top: 30px;
}
#description2 {
text-align: center;
font-size: 18px;
float: right;
padding-right: 100px;
padding-top: 30px;
}
/* Footer */
footer {}
#copywrite {
text-align: center;
font-size: 13px;
}
#credits {
font-size: 18px;
text-decoration: none;
text-transform: uppercase;
text-align: left;
}
#disclaimer {
font-size: 15px;
text-align: center;
margin-top: -28px;
margin-bottom: 0;
}
#license img {
float: right;
margin-top: -27px;
}
#license {
font-size: 10px;
text-align: center;
margin-top: 10px;
margin-bottom: -2px;
}
You need to clear the float first. The issue you are facing is due to the floating elements
#description1 {
text-align: center;
font-size: 18px;
float: left;
padding-left: 100px;
padding-top: 30px;
}
#description2 {
text-align: center;
font-size: 18px;
float: right;
padding-right: 100px;
padding-top: 30px;
}
/*This is to clear the float*/
.clearfix {
clear: both
}
/* Footer */
footer {}
#copywrite {
text-align: center;
font-size: 13px;
}
#credits {
font-size: 18px;
text-decoration: none;
text-transform: uppercase;
text-align: left;
}
#disclaimer {
font-size: 15px;
text-align: center;
margin-top: -28px;
margin-bottom: 0;
}
#license img {
float: right;
margin-top: -27px;
}
#license {
font-size: 10px;
text-align: center;
margin-top: 10px;
margin-bottom: -2px;
}
<section id="description">
<div id="description1">
<div class="container">
<h3><em>text</em></h3>
<p>text</p>
</div>
</div>
<div id="description2">
<div class="container">
<h3><em>text</em></h3>
<p>text</p>
</div>
</div>
</section>
<div class="clearfix"></div><!--Clearing the float -->
<footer>
<div class="container">
<p id="copywrite">AllKind Corporation, Copyright © 2018</p>
Credits
<p id=disclaimer>By using this site, you agree to our Privacy Policy and Terms of Conditions.</p>
<p id="license">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">
<img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/4.0/88x31.png"/>
</a>
<br />This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>.
</p>
</div>
</footer>
Note the clearfix element and the class in CSS
Here is the jsfiddle demo: http://jsfiddle.net/GCu2D/4533/
If you want a quick way to separate the section from the footer you can add the following to the CSS ...
#description {
display: table;
width: 100%;
}
Maybe explain a bit more what you want to achieve.
UPDATE: The best way is the clearing the float though as mentioned in another answer.. You can apply the clear: both directly to the footer without adding another DIV
I think you want like this:-
#description1 {
text-align: center;
font-size: 18px;
float: left;
padding-left: 100px;
padding-top: 30px;
width:50%;
}
#description2 {
text-align: center;
font-size: 18px;
float: right;
padding-right: 100px;
padding-top: 30px;
width:50%;
}
/* Footer */
footer {}
#copywrite {
text-align: center;
font-size: 13px;
}
#credits {
font-size: 18px;
text-decoration: none;
text-transform: uppercase;
text-align: left;
}
#disclaimer {
font-size: 15px;
text-align: center;
margin-top: -28px;
margin-bottom: 0;
}
#license img {
float: right;
margin-top: -27px;
}
#license {
font-size: 10px;
text-align: center;
margin-top: 10px;
margin-bottom: -2px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section id="description">
<div id="description1">
<div class="">
<h3><em>text</em></h3>
<p>text</p>
</div>
</div>
<div id="description2">
<div class="">
<h3><em>text</em></h3>
<p>text</p>
</div>
</div>
</section>
<div class="clearfix"></div>
<footer>
<div class="container">
<p id="copywrite">AllKind Corporation, Copyright © 2018</p>
Credits
<p id=disclaimer>By using this site, you agree to our Privacy Policy and Terms of Conditions.</p>
<p id="license">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">
<img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/4.0/88x31.png" />
</a>
<br />This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>.
</p>
</div>
</footer>
If you want like this then i will explain it.
I've looked several times though all the posts I found online as well as here, but none of the methods seem to work.
The question might be a repeat of a common subject but the problem might be specific to this code...
<section class="x-graphic">
<div class="container">
<div class="col-md-2">
<img src="images/x1.png" class="x1">
</div>
<div class="col-md-1">
<img src="images/x2.png" class="x2">
</div>
<div class="col-md-2">
<div class="row x-items">
<div class="imageOne">
<img src="images/imageOne.png" title="imageOne"> text <p id="imageOne"></p>
</div>
<div class="imageTwo">
<img src="images/imageTwo.png" title="imageTwo"> text <p id="imageTwo"></p>
</div>
<div class="imageThree">
<img src="images/imageThree.png" title="imageThree"> text <p id="imageThree"></p>
</div>
<div class="imageFour">
<img src="images/imageFour.png" title="imageFour"> text <p id="imageFour"></p>
</div>
</div>
</div>
</div>
</section>
My CSS is:
body {
padding-top: 90px;
overflow-x: hidden;
}
.x1{
margin-top: 5%;
margin-left: 10%;
width: 160px;
margin-top: 20px;
}
.x2 {
width: 50px;
margin-top: 120px;
}
.x-items img {
height: auto;
width: 30px;
}
.x-graphic p {
margin-top: 130px;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: bold;
color: #000;
display: inline;
}
section p {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 16px;
margin-bottom: 40px;
}
Problems:
1) Nothing I do centers the <img> in the x-items row to the vertical center. I can center it horizontally, but not vertically.
2) I can't center the elements inside the container horizontally, and i'm only able to do this using a col-md-offset-x...
What I'm trying to do is to change the background color on the whole "row" div on mouse over and open the href link clicking on any part of the div. I have tried all the solutions I found on SO (both with jquery and pure css) but I can't get it working
Here is my code:
HTML
<div id="row">
<div class="document-date"><?php the_time('d-m-Y') ?></div>
<div class="document-category"><img src="/images/icon.png" /></div>
<div class="document-title">My link
<p>some description</p>
</div>
And the CSS
#row {
position: relative;
width: 700px;
padding: 5px 0 5px 10px;
display: block;
float: left;
}
#row:hover {
background: #fbf5d8;
}
.document-date{
float: left;
color: #1b6392;
font-size: 12px;
margin-right: 10px;
line-height: 35px;
}
.document-category{
float: left;
margin-right: 10px;
line-height: 35px;
}
.document-title {
width: 350px;
float: left;
color: #020100;
font-size: 12px;
font-weight: normal;
margin-top: 1px;
text-decoration: none;
}
.document-title a{
width: 350px;
float: left;
color: #020100;
font-size: 14px;
font-weight: bold;
margin-top: 1px;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
.document-title a:hover{
color: #fff;
}
Any suggestion?
Assuming when you say li, you mean div#row
CSS:
#row:hover {
cursor: pointer
}
JavaScript (using jQuery):
$('#row').click(function() {
// do something
// example:
$(this).find('a:first').click();
});
<div id="row" onclick="alert(1)">
<div class="document-date" >12-08-2014</div>
<div class="document-category" ><img src="/images/icon.png" /></div>
<div class="document-title" ><a href="myurl..." target="_blank" >My link</a><br/><p>some description</p>
</div>
This would do the trick.
Or if you want the divs separately
<div id="row">
<div class="document-date" onclick="alert(1)">12-08-2014</div>
<div class="document-category" onclick="alert(1)" ><img src="/images/icon.png" /></div>
<div class="document-title" onclick="alert(1)"><a href="myurl..." target="_blank" >My link</a><br/><p>some description</p>
</div>