I am trying to put a pdf object on my web page. The pdf loads fine, but it creates a gray area around the document. I know that the gray area is part of the pdf document and it is just part of the object, but I am trying to find out how to get rid of it. I have adjusted margins and padding. I have adjusted height and width to try and get it to go away. I have tried passing a zoom option to the pdf when it opens and nothing worked.
I want the document to load without creating any sort of edges or borders on the page. Any help would be appreciated. The markup that applies to it is below. I'm pretty sure it won't help much but you never know.
<article class="main_content">
<object id="resume_object" type="application/pdf" data="images/AlexsResume30Jan15.pdf">Alex's Resume</object>
</article>
article.main_content{
margin-top:70px;
}
#resume_object{
height:1190px;
width: 910px;
margin-left:20%;
margin-right:20%;
padding:-20px;
background-color:white;
}
Related
I just want to add a basic banner at the top of my tumblr website. The code (posted below) is just below the <body> part of the html, however I can't figure out why any img link that I put into the 'imgurlhere' section only shows up as a broken icon (see picture).
<a href=“myurlhere”><center><img src=“imgurlhere” width=“500”></center></a>
broken image icon that's showing up
My idea is to upload a short gif to tumblr, and then copy the code into the html so that it is placed at the top of my website as an advertisement. However, every url I put into the 'imgurlhere' section shows up as broken - regardless of advice I've found online stating that's all one needs to do.
I'm making sure to include the correct link, such as .png etc
And making sure to copy it straight from the 'copy image address'.
Any idea?
Thanks!
I think that setting width="500" in img tag was causing this issue.
-The best way would be to add a class and then set the width of the image.
.image{
width:500px;
}
</center>
Try using your image there and let me know if it works or not.Thank You
I'm attempting to render HTML as PDF using Razor ASP.NET pages and Select.pdf.
At first, everything seems fine, and the report generates correctly. But then I started adding images to the end of the report, and for some reason this caused the last page to render incorrectly, resulting in only half of the content being rendered. Not half the page, but half the content on the last page specifically. So if I have a single image on the last page, half the image renders. If I have two images side by side, it will render down to halfway through the tallest of the two images. If I add text after the images, it renders more until it is half of the height of the image + the text.
Have anyone encountered this bug before? If so, how can I make the PDF generator work correctly?
EDIT: The way I'm adding the images is to add them via a for-loop, because I need to add them dynamically. As such, I loop through a list of URLs and pull images from there and link them in, two images per row, four images max per page.
If I look at the HTML directly, the browser will render it correctly. But when attempting to render it into a PDF through Select.PDF, it will cause the aforementioned "only renders half the content" bug. Though I have successfully made it render less than that (Down to something like 10%; a tiny sliver of the images) by separating the image text from the image itself.
The for-loop I use is as follows:
#{counter = 0;}
#foreach (var image in Model.ReportImages)
{
#if (counter == 4)
{
<p style="page-break-before: always; clear: both;"></p>
counter = 0;
}
<p style="float: left; width:45%; height:45%; text-align: center; margin-right:2%; margin-bottom: 2%; page-break-inside: avoid;"><img src="#Url.Content(image.ImageURL)" alt="IMAGES" style="width: 100%; page-break-inside: avoid;"/>#image.QuestionNumber</p>
counter++;
}
Right, so, I've been informed by a usually high-quality, reliable source that best practice when creating linked images that also include text is as follows:
Create some placeholder text inside the anchor element like this:
<a class="logoWithText" href="logoWithText.raw">Mr Happy Forever Foobar</a>
Change the element CSS to indent this text outside the viewing window:
.logoWithText {
background-image: logoWithText;
width = 200px;
height = 100px;
display: inline-block;
text-indent: -9999px;
}
The idea is that without doing this, if CSS is turned off on a user's machine, or they are trying to look at it with a screen reader, they're going to have problems viewing the image. But this way they will only see the text if CSS is switched off, and it will be positioned correctly.
But what if the image fails to load for some reason but they do have CSS switched on? The user is not going to see the placeholder text at all... and I'm also pretty uneasy about the whole put the text all of the way off the screen, as far as it can go as it seems pretty inelegant and I am worried there are likely to be all sort of unforeseen problems with writing code that's totally against the logic of the language in this way.
Can anyone suggest a solution which would account for both broken image links and a lack of CSS support on a user's device, and which would be more immediately intuitive to people viewing the code? If there's really no other way of doing this or you guys think my approach is totally wrong or whatever that's ok, I just want to know if I'm going about things the right way.
Why not
Html
<a href="http://yoururl.com" class="logo--text">
<img src="zoidberg.jpg" alt="This is the text that shows up when your image is broken">
</a>
CSS
.logo--text{ width:200px; height:100px; }
The problem I'm having is located at http://fourbetpoker.com/play/index.html
If you click on either "Poker" or "Dice", you'll see that my iframe has space around it (easier to see on the dicing tab). Can anyone tell me why, and potential fixes? I've been messing with the code for well over an hour and I have no idea what's wrong with it. I'm a newbie when it comes to Bootstrap/CSS. Thanks!
When I click Dice tab, I saw lot of empty space around for the content. It is coming because of the following class available in global.css file. Margin applied around the form.
#loginContent #loginHeadlineContainer
{
margin:100px 100px 0 100px;
}
If you don't want apply any margin then reduce it in the class. By Simple make it zero.
#loginContent #loginHeadlineContainer
{
margin:0;
}
is there any way I could pull only a portion of an external website using iframe?
This is the page I am trying to pull..
http://clep.collegeboard.org/search/test-centers
The div I wanted to get specifically is the white box in the center (#mainContentWrapper).
I already have a solution myself although it has some flaws. The trick I made was I made an outer div and disabled the iframe and I tweaked the height/width and the positioning where it would only show that portion ...
#outeriframe
{
width:960px;
height:1415px;
overflow:hidden;
position:relative;
}
#inneriframe
{
position:absolute;
top:-300px;
left:-160px;
width:1280px;
height:1415px;
}
The problem is, if the iframe is too big, the footer would show up, if it's too short, the results would be cut off and you can't see them all...
Is there any way I could get around this? Maybe Hide the footer? or grab only the Div I need? Please help me...
Thanks!
You can't, the same origin policy forbids you to interact with a Web page located in a different domain.
Some techniques like CORS or postMessage allow you to work around this limitation, but require some level of control on the other domain.