I am working on a business card application, where at the final stage you can generate a PDF file from HTML and CSS. What I am trying to achieve is to absolute position the elements on the image within a div, which has relative positioning. All of my elements are draggable on the card.
Here is my PHP file: (note: I shortened the file to be understandable)
<?php
$html = '<div class="card">
<span id="company_card" class="draggable_data">BMW</span>
<img class="bck_icon" src="redtop.jpg" alt="red">
</div>';
include('mpdf/mpdf.php');
$mpdf = new mPDF();
$stylesheet = file_get_contents('test.css'); // external css
$mpdf->WriteHTML($stylesheet,1);
$mpdf->WriteHTML($html, 2);
$mpdf->Output();
The CSS file is the following:
.bck_icon {
border: 1px solid black;
}
.card {
margin: auto;
width: 460px;
height: 260px;
position:relative;
}
#name_card {
position: absolute;
top: 190px;
left:80px;
}
Is there a way to achieve this? I know there are positioning issues in mPDF, but when I do not use the div element, then the elements inside the div will not fit the outside relative element.
Any suggestions?
I encounter similar positioning problems with mPDF. Some of them I solved by using negative margins.
For example, instead of attempting to use position:absolute; you could try to position the name on the card like this:
#name_card {
margin-top: -70px; // more or less
margin-left: 80px;
}
Another option to consider is using background-images: background-image; and background-position' CSS also works in mPDF.
Related
I'm doing a grid with several elements in the sidebar of a WordPress site.
Each element of the grid is an image with a label below.
My goal is to have an image change:
the normal state of the image is to be green (#66be2c), then to the passage of mouse cursor will change it in the original image.
I tried using two physical images for the two states and overlaying them when needed. But this solution is very wasteful... load two different image files is not a good thing.
There's a way to achieve the same effect in a more efficient manner?
This is a part of my page code:
<td style="width: 150px; text-align: center;">
<p style="color: #66be2c;">
<img src="mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png" style="width:50px; height:50px" onmouseover="this.src='mydomain.com/aaa/wp-content/uploads/2015/08/OriginalImage.png';" onmouseout="this.src='mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png';">
</p
<p style="color: #66be2c;">.NET</p>
</td>
SOLUTION:
The correct way to do this is creating a Vector Image.
What you need is an image editor (such as Adobe Illustrator or others) and a C compiler (in particular two libraries for xslt)
These are two links that may be useful: SVG-Stacking_Guide and GitHub-SVG-Stacking-Download
I hope this can be of help to others who have the same problem.
It's a bad approach,
I'm not an expert in CSS or design but i think you should do :
<div class='overlay'></div>
<img src="mydomain.com/aaa/wp-content/uploads/2015/08/OriginalImage.png" style="width:50px; height:50px">
</div>
And put a class in CSS like this :
.overlay { background-color: your_color; }
.overlay:hover { background-color: transparent; }
You can overlay a DIV with a lesser opacity on to the image, and then register the hover such that the covering div fades away and the real image appears.
<div class='cover'></div>
<img id='your-image' />
The CSS for the image would be as such:
.cover{
position: absolute;
top: 0;
left: 0;
opacity: .7;
background: green;
/* additional transition effects */
-webkit-transitions: all .3s;
-moz-transitions: all .3s;
transitions: all .3s;
}
.cover:hover{
opacity: 0;
}
Note that the covering div and the image should be in the same containing div relative to each other.
You could use the ::before selector to achieve this. This would mean not using any extra markup, and no javascript either. You'd really benefit from not using that inline css either. Take a look at CSS :: Before
HTML:
<table>
<tr>
<td>
<p>
<img src="mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png" class="image">
</p
<p>.NET</p>
</td>
</tr>
</table>
CSS:
td {
width: 150px;
text-align: center;
}
td p {
color: #66be2c;
}
.image {
width:50px;
height:50px;
position: relative;
}
.image::before {
content: "";
position: absolute;
height: 50px;
width: 50px;
top: 0;
left: 0;
background: green;
}
.image:hover::before{
display: none;
}
Basically, this targets your image with a class of .image and puts a 50 x 50px box on top of it with a green background. When you then move your mouse over it, it gets rid of the box.
You can see this working in this fiddle
Background:
I am trying to render a business card at 300dpi using the mPDF library. The document has an image background which should fill the canvas and then have various text elements overlayed.
Dimensions:
The PDF document is set to 91mm x 61mm and is in Landscape format.
$pdf = new mPDF('utf-8', array(91,61), 0, '', 0, 0, 0, 0, 0, 'L');
I have the resolution set in the config as follows;
$this->dpi = 300;
$this->img_dpi = 300
I have create an image in photoshop, also at 300dpi to the same dimensions as the card (91mm x 61mm).
I have tried adding the image to the document inside a div using markup as follows:
$html .= '<div style="position: absolute; left:0; right: 0; top: 0; bottom: 0;width:100%; height:100%"><img style="width:100%; height:100%" src="/assets/images/bg.jpg"></div>';
When the PDF document is displayed, the image seems to be smaller than the document, ie, it is not scaled to fit the page. In fact the image only appears to fill approximately 55-60% of the canvas in X and Y directions.
When I save the PDF document and look at its properties inside Adobe reader it is confirmed to be the correct size of 91x61mm.
Has anyone had a similar problem or understand what is going on here?
I really need to be able to have a 300dpi image which will fill the page exactly.
I look forward to your suggestions.
Regards
James
the css styles you have dont entirely match the ones in the manual's recommendation in the 'size constraint' section
in my case, i have a landscape image that's 11x8.5 inches 150dpi in photoshop, which is matched in mpdf as the page size, i separated the css for cleanliness
just in case, i specified any other mpdf values or css settings
so try something more like this code that is working for me, position the text with css & adjust the dpi/page size as needed:
$html = '
<html>
<head>
<style>
body {
position: relative;
text-align: center;
overflow: hidden;
page-break-inside: avoid;
}
#bg {
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}
#bg img {
width: 100%;
height: 100%;
margin: 0;
}
#text1 {
top: 20%;
font-size: 20pt;
position: absolute;
width: 100%;
color: #fff;
}
#text2 {
top: 60%;
font-size: 16pt;
position: absolute;
width: 100%;
color: #ddd;
}
</style>
</head>
<body>
<div id="bg">
<img src="bg.png" />
</div>
<div id="text1">John Smith</div>
<div id="text2">555-5555</div>
</body>
</html>';
$mpdf = new mPDF('UTF8','Letter-L',14,'Arial',0,0,0,0,0,0);
$mpdf->dpi = 150;
$mpdf->img_dpi = 150;
$mpdf->WriteHTML($html);
$mpdf->SetDisplayMode('fullpage');
$mpdf->Output();
there is of course an easier way to make a background... tell body or html to have a background image in css, but then you run into this bug so it's not my first recommendation
I'm trying to make square images from rectangular in css. They also need to be centered.
I've read a lot of questions here, but the answers, good as they might be, always use constant sizes in pixels whereas I need tem to be in percents so the theme can remain responsive.
Basically I need to change this:
into this:
but if the screen is even smaller:
The main problem here is I cannot predict the screen size. It is designed for mobile, so they can vary.
I was thinking about doing css in php (it's for wordpress so it's possible). I was thinking something like width:50% and use the width as a variable, but if I set the height to be equal to width, it will be 50% as well. Is there a way to, I don't know, convert the width to pixels or something? I'm out of ideas, please help.
The problem is, that it is just not possible to change the height relative to the width. So your problem is not the image itself (using overflow: hidden or background-size: cover will do that) but having the square size of your container with dynamic width and then the same height.
A very strange way would be to use a square image (_blank.png with 1px x 1px) and add width: 100% so the height will be the same.
with css:
div{width: 30%;}
img{width: 100%;}
and then add your actual picture as background-image with
background-size: cover;
background-position: center;
Neither performant nor beautiful, but it works.
have you tried this
img { width: 80%; }
make sure there is no height for img in your css file. Also make sure not to set something like height="500px" width="500px" in your html/php file.
also to be centered just do
img { margin: auto; }
Nice picture ;)
If you have an image you want centred—but covers—a parent element, using CSS only, then you’ll need two wrappers:
This works only for wide images. Portrait images will just centre themselves within the container.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.outer-wrapper {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
overflow: hidden;
}
.inner-wrapper {
position: relative;
display: inline-block;
right: -50%;
}
.inner-wrapper img {
display: inline-block;
position: relative;
left: -50%;
}
</style>
</head>
<body>
<div class="outer-wrapper">
<div class="inner-wrapper">
<img src="//placehold.it/400x200" alt="" />
</div>
</div>
</body>
</html>
Just use img{max-width:100% !important; margin:0 auto !important;} and I think it will help you.
Try following css for your image. It won't break the pixels/dimensions for the image.
.imageClass img {
width: 50%;
height: auto;
}
.imageClass img {
width: auto;
height: 50%;
}
<img src="image_path" alt="" class="imageClass" />
I'm trying to code a design I've just made: http://www.richardhedges.co.uk/brlan/design.jpg
I'm pretty much done coding but the only thing I don't know how to do is the footer overlapping the main content. What I'd like it to do is scroll the content. (Like it is on Facebook messages)
The footer is simply a div with nothing in it:
<div class="footer"></div>
And here's the stylesheet:
div.footer {
width: 980px;
height: 114px;
float: left;
background-image: url(../images/footer.png);
background-repeat: no-repeat;
margin-bottom: 20px;
}
I need to create a new div which I'll include the content in (as shown in the design.JPG) however it must be 'behind' the PNG image in the footer. I've absolutely no idea how I'd do this - My apologies for ignorance.
div#footer {
position: absolute;
bottom: 0px;
z-index: 9001;
}
div#content {
position: relative;
}
Use absolute positioning and a higher z-index on the footer div than on the ones it'll be in front of.
hi
in my php application i want to change the style using javascript
<div id="middle-cnt" class="ad-image-wrapper"><div class="ad-image" style="width: 1000px; height: 450px; top: 0px; left: 131px;"><img height="450" width="1000" src="images/Gallery2/4.jpg"><p class="ad-image-description" style="width: 1000px; bottom: 0px;"><table width="100%"><tbody><tr><td class="image-desc">Stevie III – 36" long x 24" wide - Oil on Canvas<div style="color: rgb(187, 167, 0); padding-left: 10px; position: absolute; top: 0pt; left: 450px; font-size: 35px; letter-spacing: 6px;">SOLD</div></td></tr></tbody></table></p></div></div>
In the baove code i want to change the div style left:0px ie <div id="middle-cnt" class="ad-image-wrapper" ><div class="ad-image" style="width: 1000px; height: 450px; top: 0px; left: 0px;"><img ..
I am using the script below.
function fnshowgallery(){
var elm=document.getElementById('middle-cnt').childNodes;
var divElm=elm[0];
divElm.style.Left='0px';
}
But it's not get the desired result.
Does any one know this?
But i don't know how.
document.getElementById("middle-cnt").childNodes[0].style.left = "0px";
This should work, if it doesn't, please double-check your DOM structure.
The element needs a position-property too, if you want the left-property to have any effect.
javascript is a case sensitive language. and it's camel case. So it's not Left but **left. It has to be:
divElm.style.left='0px';
Rather than manipulate the CSS directly with JavaScript it's usually a better approach to only use JavaScript to set the CSS class name and leave all your CSS in your .css files. For example:
/* CSS */
.foo {
height:450px;
left:0;
position:relative; /* or maybe absolute? */
top:0;
width:1000px;
}
Then change your JavaScript to something like:
var elm = document.getElementById('middle-cnt').childNodes[0];
if (elm) {
var cssClass = (elm.className) ? ' foo' : 'foo';
elm.className += cssClass;
}
Then, if you need to make any more changes to your CSS you shouldn't need to touch the Javascript.
But for the left property to work in your CSS you'll need to set the position property to either relative or absolute.
If I evaluate that javascript in my console with that HTML snippet, it works; the "left" styling is changed to 0px.
But, I think you need to have the parent (#middle-cnt) to have position:relative, and your div (.ad-image) with position:absolute. Maybe you have this in your stylesheet...
Might help if you say what browser(s) you have tested with, as well.