I am using mPDF to create a PDF from the following HTML-Code:
<div style="border: 5px solid black; height: 115px;">
<div style="width: 29%; height: 115px; float: left; background-color: red;">
<img src="testimage.png"
alt="Bild 1" style="height: 115px;">
</div>
<div style="width: 55%; float: left; padding-top: 60px; font-size: 18px; font-weight: bold;">
SOME TEXT
</div>
<div style="float: right; width: 16%; font-size: 18px; padding-top: 10px;">
<div style="float: left; width: 25px;">ANOTHER TEXT</div>
</div>
</div>
The outcome in the PDF is rather unsatisfying:
The outcome
I am dealing with this weird space below the image. I tried giving the image a blue and the div a red background and it is always red, so the div is too high. It just ignores every fixed height I give. I already read about using display: top but none of it worked. What exactly is the problem here? On a HTML-Page everything is just fine.
Try adding width:100%; height:100%; object-fit:cover; to the image. Hope it works for you.
<div style="border: 5px solid black; height: 115px;">
<div style="width: 29%; height: 115px; float: left; background-color: red;">
<img src="https://via.placeholder.com/150"
alt="Bild 1" style="width:100%;
height:100%;
object-fit:cover;">
</div>
<div style="width: 55%; float: left; padding-top: 60px; font-size: 18px; font-weight: bold;">
SOME TEXT
</div>
<div style="float: right; width: 16%; font-size: 18px; padding-top: 10px;">
<div style="float: left; width: 25px;">ANOTHER TEXT</div>
</div>
</div>
Related
I have two blocks of text with colored background. I want them to sit next to each other and then be horizontally centered on the page but I can't get them to center on the page. Also I have to use inline styling because I am just coding on wordpress for work. Help!
<div align="center">
<div style="background-color: #526f87; width: 60%; float: left; height: 160px; " >
<p style="font-size: 40px; color: #b9cbea; letter-spacing: 2px; line-height: 110%; padding-top: 20px; padding-right: 20px; text-align: right;">YOU'RE NEEDED AT THE TOP </p>
<p style="font-size: 40px; color: white; letter-spacing: 2px; line-height: 110%; padding-bottom: 20px; padding-right: 20px; text-align: right;" ><strong>MEET US THERE</strong>
</p>
</div>
<div style="background-color: #526f87; width: 20%; float: left; margin-left: 10px; height: 160px;">
<p style="color: #ffffff; font-size: 20px;" align="center">22 ICF CEUs <br /><span style="font-size: 12px;">(12.17 Core Competencies / 10.25 Resource Development)</span></p>
</div>
</div>
In general, you should know that there is a trick for centering divs on the page. If you want to center some content, you know what its width will be, right? So you can use:
width: /* something */;
margin-left: auto;
margin-right: auto;
So for your code snippet, I recommend using flex if you're not targetting old browsers. I would do something like this:
<div style="display: flex; width: 80%; margin-left: auto; margin-right: auto;">
<div style="flex: 3">this is the larger div to the left</div>
<div style="flex: 1">this is the one that should fall on the right</div>
</div>
NOTE: My code keeps proportions with the ones in your code.
I am trying to create a setup mimicking the one in the link with an image, text and a border all horizontally and vertically centered. I've tried a number of different ideas.
The below is the closest I've gotten but even then I'm still experiencing issues with the border displaying and things not being centered the way I want them.
<div style="max-width: 800px; height border: 1px solid #c6c6c6; border-radius: 5px; padding: 35px; margin-left: 60px; float: center; height: 220px; display: inline-block;">
<img src="image.gif" />
</div>
<div style="height: 220px; display: inline-block;">
<div style="position: relative; top: 50%;">
<h4 style="text-align: center;">Text 1/h4>
<p style="text-align: center;">Text 2<br />Text 3</p>
</div>
</div>
I would try using CSS tables, put the image and the text in separate block level elements that use display: table-cell, all of which are contained in a parent container using display: table.
.wrapper {
border: 1px solid gray;
border-radius: 5px;
display: table;
height: 220px;
margin: 0 auto;
}
.wrapper .item {
display: table-cell;
vertical-align: middle;
text-align: center;
min-width: 200px;
padding: 35px;
}
.item img {
display: block;
}
<div class="wrapper">
<div class="item">
<a href="www.google.com" target="_blank">
<img src="http://placehold.it/200x150" />
</a>
</div>
<div class="item">
<h4>Text Line One</h4>
<p>Text 2
<br />Text 3</p>
</div>
</div>
you should put inline-block on image and the parent div of text panel and vertical-align:middle .. would do that
.textpane{
height: 220px;
display: inline-block;
vertical-align:middle;
}
.imagepane{
width:50px;
height:50px;
display:inline-block;
vertical-align:middle;
max-width: 800px;
border: 1px solid #c6c6c6;
border-radius: 5px;
padding: 35px;
margin-left: 60px;
height: 220px;
}
<div class='imagepane'>
<img src="image.gif" />
</div>
<div class='textpane'>
<div style="position: relative; top: 50%;">
<h4 style="text-align: center;">Text 1/h4>
<p style="text-align: center;">Text 2<br />Text 3</p>
</div>
</div>
jsfiddle
Note
there is not such thing as float:center;
I have a serious problem :( I am making a profile page and my DIV's are always clickable(This should not happen), when I inspect element it on chrome, it shows a bunch of on all DIVS... I did not write these codes here are sample
Code on Visual Studio
<div style="width: 1179px; height: 100px;">
<div style="width: 350px; height: 100px; float:left; margin-right: 64.5px; background-color: pink; border-radius: 5px;">
<img src="../Resources/Referrals-Icon.png" height="100" style="float: left;" />
<p>Referrals</p>
<p><%=ReferralsCount%></p>
</div>
<div style="width: 350px; height: 100px; float:left; background-color: green; border-radius: 5px;">
<p>Blessing Points</p>
<p><%=BlessingPoints%></p>
</div>
<div style="width: 350px; height: 100px; float:left; margin-left: 64.5px; background-color: grey; border-radius: 5px;">
<p>Support</p>
FAQ
</div>
</div>
Code on Browser
<div style="width: 1179px; height: 100px;"><a href="Profile.aspx">
<div style="width: 350px; height: 100px; float:left; margin-right: 64.5px; background-color: pink; border-radius: 5px;">
<img src="../Resources/Referrals-Icon.png" height="100" style="float: left;">
<p>Referrals</p>
<p>0</p>
</div>
<div style="width: 350px; height: 100px; float:left; background-color: green; border-radius: 5px;">
<p>Blessing Points</p>
<p>0</p>
</div>
</a><div style="width: 350px; height: 100px; float:left; margin-left: 64.5px; background-color: grey; border-radius: 5px;"><a href="Profile.aspx">
<p>Support</p>
</a>FAQ
</div>
</div>
I tried searching all around my codes :( and all my CSS but I do not know what this is :(
This is the current design(no problem in design but the divs being clickable bugs me a lot and the anonymous tags are really irritating)
Some where in your aspx page you have <a href="Profile.aspx"> it looks like you have not closed that tag and Chrome is taking it's best bet at closing it for you.
I am having problems with my two slides in Firefox. In Chrome it looks as it should but in Firefox the elements/images is positioned outside the browser. When I remove "position:relative" from the elements the position back in the browser but the dimensions of images is weird. Please see images below:
Here is the markup for the black squares on the bottom of the page:
<div class="ca-item ca-item-<%=Featsitems %>">
<div class="ca-item-main" style="border:2px solid #<%=_dis.FeaturedBorderColor %>">
<a style="float: left;" href="<%=featNews.ElementAt(i).PageUrl %>">
<div class="Feat_Element" style="width: 181px; position: relative; height: 175px;">
<div style="width: 181px; height: 100px; border: none; float: left;">
<img src="Images/Page_Images/<%=featNews.ElementAt(i).Picture %>" style="width: 181px; border: none; height: 100px;" />
</div>
<div style="width: 171px; float: left; font-size: 16px; padding: 5px 2px 2px 2px;">
<b><%=featNews.ElementAt(i).Title%></b>
</div>
<div style="width: 171px; float: left; border: none; font-size: 11px; padding: 0px 2px 5px 2px;">
<%=featNews.ElementAt(i).Text %>
</div>
</div>
</a>
</div>
</div>
And here is the markup for the big image
<div id="SlideForm" style="height: 320px; display: block; width: 100%;">
</div>
My question is why is this happening? Is firefox handling position:relative that much different than chrome?
From the below figure. I am changing the div(tab) styles based on the different page.
If the control is in page 1, I am displaying the tab with red color border.
Likewise,
If the control is in page 2, I am displaying the tab with red color border and filling the background of page 1 with other color.
Here, I need to use <HR> tag to connect these page1, page2 and page3.
My output should be like this..
Here is my code.
index.html
<html>
<head>
<style>
.outer{
margin: 0 10%;
padding: 50px 0;
border: 2px solid #666666;
}
.hidden-div
{
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
function showHide(divId) {
$("#"+divId).toggle();
}
</script>
</head>
<body>
<div id="hidethis" style="display:none">
<hr/>
<ons-row style="display: flex;">
<div style="border: 3px solid #C10000; width: 19%; border-radius: 7px; margin-left: 10%; text-align: center; line-height: 2.5;">
Page 1
</div>
<div style="width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">Page 2</div>
<div style="width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">Page 3</div>
</ons-row>
<hr/>
<div class="outer">
<div class="row" style="text-align: center;">
Page 1 Content
</div>
</div>
<br>
</div>
<div id="hidethis2" style="display:none">
<hr/>
<ons-row style="display: flex;">
<div style="border: 3px solid #666666; border-radius: 7px; background-color: #666666; width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">
Page 1
</div>
<div style="border: 3px solid #C10000; width: 19%; border-radius: 7px; margin-left: 10%; text-align: center; line-height: 2.5;">Page 2</div>
<div style="width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">Page 3</div>
</ons-row>
<hr/>
<div class="outer">
<div class="row" style="text-align: center;">
Page 2 Content
</div>
</div>
<br>
</div>
<div id="hidethis3" style="display:none">
<hr/>
<ons-row style="display: flex;">
<div style="border: 3px solid #6F08F2; border-radius: 7px; background-color: #6F08F2; width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">
Page 1
</div>
<div style="border: 3px solid #6F08F2; border-radius: 7px; background-color: #6F08F2; width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">Page 2</div>
<div style="border: 3px solid #C10000; width: 19%; border-radius: 7px; background-color: #C10000; margin-left: 10%; text-align: center; line-height: 2.5;">Page 3</div>
</ons-row>
<hr/>
<div class="outer">
<div class="row" style="text-align: center;">
Page 3 Content
</div>
</div>
<br>
</div>
<input type="button" onclick="showHide('hidethis')" value="First Page" />
<input type="button" onclick="showHide('hidethis2')" value="Second Page">
<input type="button" onclick="showHide('hidethis3')" value="Third Page">
</body>
</html>
First I would add a class on each Page like:
HTML
<div id="hidethis" class="hidden-div">...</div>
<div id="hidethis2" class="hidden-div">...</div>
<div id="hidethis3" class="hidden-div">...</div>
Then in your JS hide first all elements with class hidden-div and then make the div with the right ID appear again:
JS
function showHide(divId) {
$('.hidden-div').each( function() {
$(this).hide();
});
$("#"+divId).show();
}
Here is a Fiddle. (Perhaps you have to change the HTML-Markup a little bit).
If you want to show the Page with the ID hidethis by default add this CSS Code:
#hidethis {
display: block;
}
This works because ID Selectors are higher rated by CSS than Class Selectors.
For more information about Selectors read this article.
EDIT:
According to your comments I think you are looking for something like this.
HTML
Insert a new div where a line should be shown and remove the margin-left: 10% property on the following div's CSS.
<div class="line"></div>
<div style="border: 3px solid #C10000; width: 19%; border-radius: 7px; text-align: center; line-height: 2.5;">Page 2</div>
CSS
Set width: 10% because of previous margin-left: 10%. Feel free to play with the other values.
.line {
width: 10%;
height: 2px;
background: green;
margin-top: 25px;
}