I use barryvdh/laravel-snappy to generate pdf and need to create a signature area in my pdf doc. There must be two signature fields because it's a contract pdf but when I use css grid or flex they place one under the other. How to place them side by side?
<div class="flex-container" style=" display:flex;
padding: 10px;">
<div class="flex-item" style="padding: 20px; text-align: center;">
<h2 style="text-decoration:underline">sign1</h2>
</div>
<div class="flex-item" style="padding: 20px; text-align: center;">
<h2 style="text-decoration:underline">sign2</h2>
</div>
</div>
<div class="flex-container" style=" margin: auto; display:table;
padding: 10px;border:1px solid red">
<div class="flex-item" style="padding: 20px; text-align: center;background-color: blue; display: table-cell">
<h2 style="text-decoration:underline">sign1</h2>
</div>
<div class="flex-item" style=" margin: auto; padding: 20px; text-align: center;background-color: green; display:table-cell">
<h2 style="text-decoration:underline">sign2</h2>
</div>
</div>
True, I tried to convert HTML with flex to PDF. The two containers go on two lines. My advice is to use 'display:table' to '.flex-container' and 'display: table-cell' to '.flex-item. That worked out for me.
Related
When I use it instead puts the div the the top and center
HTML
<div align="center">
<div style="max-width:800px">
<div>
<div>
<div style="CLEAR: none; BORDER-RIGHT: black 1px solid; BORDER-LEFT: black 1px solid" class="Header" align="center">
<div class="Banner">
<div style="max-width:100%">
<div>
<div>
<div align="top" align="left">
<a class="BannerText" href="https://web.archive.org/web/20060528010436/http://www.roblox.com:80/Default.aspx">ROBLOX.com</a></div>
<div align="center" style="max-width:300px">
</div>
<div align="right"><span class="BannerText">
<a class="BannerText" href="https://web.archive.org/web/20060528010436/http://www.roblox.com:80/Login/New.aspx">Sign Up</a></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.Header
{
font-size: 14px;
}
.Banner
{
PADDING: 8px;
}
.BannerText
{
font-weight: bold;
color: white;
}
a.BannerText:link, a.BannerText:visited, a.BannerText:active
{
text-decoration: none;
COLOR: white;
}
a.BannerText:hover
{
text-decoration: underline;
COLOR: white;
}
I tried editing it and googling it but I found nothing. This is old HTML code I found on the wayback machine https://web.archive.org/web/20060528010436/http://www.roblox.com:80/ I find the old header interesting and would like to use it for my projects. Even If I update it to HTML5 code, I don't know if using a table instead of a header tag will hurt site optimization/seo
The align property is deprecated. Use the CSS top and left properties, along with a position: fixed attribute. Read more on CSS positioning here.
<div align="center">
<div style="max-width:800px">
<div>
<div>
<div style="CLEAR: none; BORDER-RIGHT: black 1px solid; BORDER-LEFT: black 1px solid" class="Header" align="center">
<div class="Banner">
<div style="max-width:100%">
<div>
<div>
<div style="position:fixed;top:0;left:0;">
<a class="BannerText" href="https://web.archive.org/web/20060528010436/http://www.roblox.com:80/Default.aspx">ROBLOX.com</a></div>
<div align="center" style="max-width:300px">
</div>
<div align="right"><span class="BannerText">
<a class="BannerText" href="https://web.archive.org/web/20060528010436/http://www.roblox.com:80/Login/New.aspx">Sign Up</a></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
It hurt me physically to use the inline CSS style attribute. I would've used a class, but something tells me you're looking for a quick fix. Please take some basic html and css tutorials.
I have two Div's, the left one is a sidebar of sorts (but it does not extend the full height of the screen), and the right one is the content Div that should occupy as much of the screen as possible and collapse/move underneath the sidebar as the screen shrinks. Right now I have the sidebar set up how I expect it to be, but the Content Div begins to overlap the Sidebar as the page shrinks and does not move below.
I have tried different position: parameters (fixed,absolute,relative) different width/min-width values, as well as different values for float. I have everything in html styling right now for simplicity. The css files that were being used seemed to be interfering with functionality so I attempted to override them via styling directly within the HTML.
<body style="padding-top: 5px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; min-height: 80%; min-height: 50vh;">
<h3 class="text-center"> Title </h3>
<div class="SideContainer" style="background-color: green;position:absolute;left:0; top:80; bottom: 400;width: 20vw;min-width: 200px;max-width: 300px;padding: 3px;">
<div style="background-color: red;width: 100%;">Keys</div>
<div style="background-color: blue;">Error Box</div>
<div style="background-color: grey;border: none;width: 100%;border-radius: 3px;">File Menu Button</div>
<p> Enter Display Name</p>
<div style="background-color: yellow;">Name Box</div>
<p> Users Viewing </p>
<div style="background-color: orange;">User box</div></div>
<div class="ContentContainer" style="background-color: gold;position: relative;float: left;left:20vw; top: 25;width:80%;min-width: 400px;margin-right: 3px;padding: 8px;">
<div style="background-color: purple;border: 1px solid;border-radius: 4px;line-height: 2.6;padding: 3px;margin-bottom: 6px;">Doc Title</div>
<div style="background-color: maroon;min-height: 150px;border: 1px solid;border-radius: 4px;padding: 3px;">Doc Content</div></div><body>
Content div should shrink, and at a certain point, move below the Sidebar div.
<body style="padding-top: 5px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; min-height: 80%; min-height: 50vh;">
<h3 class="text-center"> Title </h3>
<div style="display: flex; flex-flow: row wrap;">
<div class="SideContainer" style="background-color: green;left:0; top:80; bottom: 400;width: 20vw;flex-grow: 1;padding: 3px;min-width: 200px;max-width: 300px">
<div style="background-color: red;width: 100%;">Keys</div>
<div style="background-color: blue;">Error Box</div>
<div style="background-color: grey;border: none;width: 100%;border-radius: 3px;">File Menu Button</div>
<p> Enter Display Name</p>
<div style="background-color: yellow;">Name Box</div>
<p> Users Viewing </p>
<div style="background-color: orange;">User box</div>
</div>
<div class="ContentContainer" style="background-color: gold;float: left;left:20vw; flex-grow: 4;top: 25;margin-right: 3px;padding: 8px;min-width: 200px;">
<div style="background-color: purple;border: 1px solid;border-radius: 4px;line-height: 2.6;padding: 3px;margin-bottom: 6px;">Doc Title</div>
<div style="background-color: maroon;min-height: 150px;border: 1px solid;border-radius: 4px;padding: 3px;">Doc Content</div>
</div>
</div>
<body>
I got your code working using Display:flex, it's a good idea to also separate your code into html and css and use classes references in the HTML. There is a lot of benefits to this including easier to maintain, cleaner, and also makes it easy to follow etc.
I'm new to html/css and I'm trying to do an adaptive header for the website. I'm using padding-right with 5% for divs, but las div always goes to a new line and the parent div don't want to expand. I want parent div expand depending on the text in child divs. Also when I'm using padding in px, all works properly, but it loses adaptive part.
What am I doing wrong?
With padding in percents
With padding in pixels
HTML and CSS
button{
height:34px;
width:100%;
font-weight:bold;
border:none;
background-color:#fc592d;
color:#ffeded;
border-radius:4px;
}
<div style="width: 100%; background-color: rgb(44, 62, 80); float: left;">
<div style="width: 47.36%; height: auto; margin: auto;">
<div style="display: inline-block; float: left; padding-bottom: 4%; padding-top: 4%;">
<div style="display:inline-block; padding-right:5%;">
<img src="images/icon1.png" alt="farkops">
<a class="href" href="#">One thing</a>
</div>
<div style="display:inline-block; padding-right:5%;">
<img src="images/icon2.png" alt="pricep">
<a class="href" href="#">Second</a>
</div>
<div style="display:inline-block; padding-right:5%;">
<img class="href" src="images/icon3.png" alt="otzivi">
<a class="href" href="#">Three</a>
</div>
<div style="display:inline-block;">
<img src="images/icon4.png" alt="works">
<a class="href" href="#">Fourth thing</a>
</div>
</div>
<div style="float: left; display: inline-block; margin-top: 1.24%; margin-left: 2%;">
<div style="">
<p style="margin: 0px; padding-bottom: 8px; font-weight: bold; font-size: 3vh;"><span>7 (905)</span> 639-29-03</p>
</div>
<div style="">
<button>Call</button>
</div>
</div>
</div>
</div>
UPD1:
When I add one new div, the previous one fits just right (the parent div expands as I want), but the new one goes to new line.
This is what I'm trying to do, in between the two pink lines is my max width.
This is what I'm getting:
I'm getting close:
This is my HTML:
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h7>GET SOCIAL WITH US!</h7>
<div class="container'>
<div class="row">
<div class="col-md-2">
<img src="img/FB_LINK.png" alt="Follow us on Facebook"></div>
<div class="col-md-2">
<img src="img/TWITTER_LINK.png" alt="Follow us on Twitter"></div>
<div class="col-md-2">
<img src="img/LINKEDIN_LINK.png" alt="Link In with Us"></div>
</div>
<div class="row">
<div class="col-sm-6"><h7>© 2016 COPYRIGHT LINE</h7></div>
</div>
</div>
</div>
</footer>
This is my CSS for this section:
footer {
height: 60px;
width: 100%;
font-size: 14px;
position: absolute;
background-color: #2A3E47;
font-family: 'Contrail One', cursive;
margin: 0px 10px 0px 10px;
text-align:center;
}
footer.a{
display:inline-block;
margin:0 auto 0 auto;
}
h7{
color:#FFF;
font-size:24px;
font-family: 'Contrail One', cursive;
text-align:center;
}
I can't seem to figure this out, I've drawn it out on a couple sheets of paper, but I can seem to style like like I'd like. Can anyone point out where I'm going wrong?
After trying your the posted code I found that you are using wrong quote pair.
Also the css you gave isn't designed to achieve the goal.
I made a working fiddle here. Check it out
HTML:
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 parent">
<p>GET SOCIAL WITH US!</p>
<div class="icon">
<img src="https://myapnea.org/assets/myapnea/icons/facebook_icon-7eedcb8837293505e1d3b1494ff19c9c3842340d1dfcd193e098e2b44f34456b.png" alt="Follow us on Facebook">
<img src="http://frcgamesense.com/dnn/portals/0/Home/Twitter_icon.png" alt="Follow us on Twitter">
<img src="https://store-images.s-microsoft.com/image/apps.36749.9007199266245564.6701eae8-16d2-4ba0-bdaa-8d9d9f9a1e70.03e5f6a9-3866-4ad9-9f2b-6b57ff90419e?w=100&h=100&q=60" alt="Link In with Us"></div>
</div>
<div class="col-md-6">
<p class="copyright">© 2016 COPYRIGHT LINE</p>
</div>
</div>
</div>
</footer>
CSS:
footer {
padding: 5px;
height: 100px;
width: 100%;
font-size: 14px;
position: absolute;
background-color: #2A3E47;
font-family: 'Contrail One', cursive;
margin: 0px 10px 0px 10px;
text-align:center;
}
.copyright {
padding-top: 40px;
}
footer p {
color: #fff;
}
footer a img {
display: inline-block;
width:50px;
}
.parent .icon {
margin: auto 7px;
}
It looks like your second col-sm-6 is nested too deep. It should be at the same level of the other one, not within it. Your divs are all sitting on half the grid (6 wide) and then the three social logos are taking half of that, and the copyright bit is taking the other half. You need the col-sm-6 divs to be siblings.
Furthermore, I don't think col-sm-6 looks like it'll work, looking at what you're trying to achieve. You might want to make the first group col-sm-3 or so and add an offset class to the copyright part. :-)
There are at least 3 errors in your HTML markup:
<h7>GET SOCIAL WITH US!</h7>
<div class="container'>
The ending quote should be double ("), not single (')
Since you place it in a column, the class name of this tag should be container-fluid, not container
</div>
<div class="row">
<div class="col-sm-6">
Missing close tag, the div .row is not neccessary.
</div>
</div>
</div>
<div class="col-sm-6">
Please see the fixed code here
I am trying to split the page into two sections. One left area and right will be the content page. I have the following html but looks like it is not working. Any ideas, what I am not doing right?
<div id="wuiMainArea">
<div id="wuiMainContent">
<div id="wuiLeftArea">
<div id="wuiLefthandNavRoot">
<h2 class="wui-hidden">Section Navigation</h2>
<h3 class="wui-navigation-title"><p>Applications</p><p> </p></h3>
<div id="tree" style="float: left; width: auto; background-color: #f2f4f5;"> </div>
</div>
</div>
<div id="wuiInpageNav">
<div class="wui-inpage-container" id="in_100">
<p>This is the div I will be using for charts </p>
</div>
</div>
</div>
</div>
Like this
<div id="wuiMainArea" style="border: 1px solid;">
<div id="wuiMainContent" style="border: 1px solid;">
<div id="wuiLeftArea" style="border: 1px solid;float: left;">
<div id="wuiLefthandNavRoot">
<h2 class="wui-hidden">Section Navigation</h2>
<h3 class="wui-navigation-title"><p>Applications</p><p> </p></h3>
<div id="tree" style="float: left; width: auto; background-color: #f2f4f5;"> </div>
</div>
</div>
<div id="wuiInpageNav" style="border: 1px solid; float: left;">
<div class="wui-inpage-container" id="in_100">
<p>This is the div I will be using for charts </p>
</div>
</div>
<div style="clear: both;"></div>
</div>
</div>
#wuiMainArea, #wuiMainContent{
margin: 0 auto;
width: 960px;
}
#wuiLeftArea, #wuiInpageNav{
/* use half of the main content div's width */
/* -2 because of 1px-border on both sides */
width: 478px;
display: inline-block;
float: left;
}
It'll be better to use CSS styling HTML.
Define the widths to fit your needs. Also I recommend using classes instead of ids when appling same styles to multiple elements.