Hide top of content from external source in iframe? - html

I have som html that looks something like this...
html
<div class="container">
<div class="left-col">
</div>
<div class="right-col">
<iframe src="external-site" border="0" scroll="no">
</div>
</div>
css:
.container {overflow:hidden;}
.right-col iframe {margin-top:-100px;}
I wanted to hide the 100 first top pixels of external site that is shown in the iframe. It seems to works in those browsers I have tested, but testing it on a "smart tv" without knowing what browser is used, there's an issue that not all the iframe is shown... BUT my question is therefore...
Is there any other way of achieving what I want to do?

You can do following way.
.right-col iframe {
position: relative;
top: -100px;
}
Check Fiddle.

Related

How do I get fullscreen div without iframe?

My website https://saxobroko.gq has multple divs as different windows and when I take away the divs they stop fitting the whole page.
I've tried using css to make it fullpage without the iframe and with just <p>Test</p>
I want the iframe to fit the users view without having an iframe in it.
Edit: I will include the before and after code.
Before (Not Working):
<style>
.sec1 {background-attachment: fixed;min-height: 100%;background-position: center;background-repeat: repeat-xy;}
</style>
<div class="sec1">
<iframe src="#"></iframe>
</div>
After (Working):
<style>
.sec1 {background-attachment: fixed;min-height: 100%;background-position: center;background-repeat: repeat-xy;width:100%;height: 101vh;}
</style>
<div class="sec1">
<h1>Sec1 Test</h1>
</div>
try applying this style into your iframs that are wraped in the div with sec(*) w3-center class name.
for example :
.sec4 w3-center > iframe {
width: 100%
height: 100vh;
}

Disabling auto adjusment to image in CSS when zooming in/out

<div class="footer">
<img class="fisk" src="fisk1.jpg" alt="fisk">
</div>
I have a img inside a div and i want this image to keep the same size when zooming in and out, but i can't get this to work. I feel like i have tried everything and it feels like this is not possible?
I get the text to stay the same size but not the image.
This should be the solution, it seems to stay the same even during resize!
Note: tested in my local html file, while zooming in/out!
html,
body {
width: 100%;
margin: 0px;
}
<div class="footer">
<img class="fisk" src="http://via.placeholder.com/350x150" alt="fisk" width="100%">
</div>

Making iframe fit into an element that has left-margin set

Hi all I think this should be a relatively quick question but since I am a beginner to HTML and CSS I can't seem to figure this out.
I have the following CSS code:
<style>
div.specialspecial {
width: 100%;
height: 0;
padding-bottom: 56%;
position: relative;
margin-left: 160px;
}
iframe {
width: 90%;
height: 100%;
position: absolute;
display: block;
}
</style>
And this html code:
<div class="specialspecial">
<iframe src='dirToLocalHTML' id = 'bg'></iframe>
</div>
It seems that the margin-left set in the div class (which I need as I am using a sidebar on this website) makes it so the content inside the iframe is off center (presumably by 160px). Is there a way for me to use CSS to easily fix this? Or will I need to resort to JavaScript to resize the frame? I am comfortable with learning either approach.
Edit:
Apologies for not providing enough information. Hopefully adding this will help:
This is the body of my html:
<body>
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card-2" style="width:160px;">
<button class="w3-button w3-block w3-left-align" onclick="myAccFunc('demoAcc')">
Accordion <i class="fa fa-caret-down"></i>
</button>
<div id="demoAcc" class="w3-hide w3-white w3-card-2">
Link
Link
</div>
</div>
<div class="specialspecial">
<iframe src='dirToLocalHTML' id = 'bg'></iframe>
</div>
</body>
This code is mainly taken from the example of: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_accordion
As I am trying to get a similar style for my webpage
I think the best fix is to simply create a container for the iframe that isolates it from the element with the large margin:
<div class="specialspecial">
<div class="pageContent">
<iframe src='dirToLocalHTML' id = 'bg'></iframe>
</div>
</div>
Even with no additional CSS, this should restrain the size of the iframe, which will get its size from the element without the large margin.
It's worth noting that layouts like that, which rely on large margins for side content, are somewhat archaic. Each part of the document should be contained in an element that doesn't care what's happening around it.
<style>
.page-container > * {
display: inline-block;
}
.page-sidebar {
width: 160px;
}
<div class="page-container">
<nav class="page-sidebar"></nav>
<main class="page-content"></main>
<div>
See also: http://www.developer.com/lang/understanding-the-proper-way-to-lay-out-a-page-with-html5.html

In HTML5 How can I align my header the way I need to

I'm currently practicing some HTML 5 Web App development, but I can't even get my header to align properly.
visit http://www.sithhappens.net to see what I mean, (view page source to see my html)
and http://www.sithhappens.net/iphone.css
to see the CSS
I want the "Route.me" to align middle, and button (which is just a place holder till I implement a button there) to stay to the left. Thanks.
(Visit the webpage on your mobile device)
Here is the correct HTML, I have injected the styling into the HTML so you can see how it is done. The trick is to make the button position: absolute so it does not affect the spacing of the text "Route.Me".
<article>
<header><button style="
position: absolute;
">Button</button> <div align="center" style="display: block; text-align: center;">Route.Me </div>
</header>
</article>
use only
<div align="center" style="margin-top:-20px;">Route Me</div>
You will have to place button text in a <p> element. Set styles like this:
<div class="btn">Button</div>
<div align="center" class="txt" >Route.Me </div>
CSS
.btn {
float:left;
}
.txt {
display:block;
}

Hyperlinks do not work

I have the following code in the head section of my website. I have read this question but my css does not seem to have a z-index.The image and the like box display but nothing happens when I click them or I should say that the hyperlinks do not work. Please help out. Thanks
<div class="content-pad" style="float:left;">
<img src="http://www.startupsandfinance.com/wp-content/uploads/2012/06/Advertise-here-728x90.png" width="728" height="90" />
<span class="widget-pad" style="margin-left:25px;">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FStartupAndFinance&width=290&height=62&colorscheme=light&show_faces=false&border_color&stream=false&header=true&appId=384169901601437" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:62px;" allowTransparency="true"></iframe>
</span>
</div>
</div>
When you click on the header image, the default email application is launched as you have an href to:
mailto:developerfahaduddin#gmail.com
You can check it out live in here:
http://jsfiddle.net/MSRXU/
So, is something else that you haven't write the code for.
After looking at your page with Firebug, I see something else is messed up. If you add some height to:
<div class="content">
...
</div>
You will be fine, and the image will be clickable.
The problem is that .content has no height, and pointer events are not reaching the iframe because it is outside of it's parent element's boundaries.
Adding this rule to whatever else you have for your .content selector.
div.content {
height: 120px;
}