I have just noticed my element is not rendered in the browser after an iframe element.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="xpto">
<iframe id="myIframe" src="http://www.google.com/custom?q=&btnG=Search" height="500px" width="100%"/>
</div>
<div class="footer">
something
</div>
</body>
</html>
jsfiddle
Does anyone knows why?
Is I remove the iframe everything works fine!
Use </iframe> instead of ending the element tag within itself which is <tag />
<div class="xpto">
<iframe id="myIframe" src="http://www.google.com/custom?q=&btnG=Search" height="500px" width="100%"></iframe>
</div>
<div class="footer">
something
</div>
If you close the <iframe> tag it will show the footer
<iframe id="myIframe" src="http://www.google.com/custom?q=&btnG=Search" height="500px" width="100%">
</iframe>
You should close iframe by tag.
Here is working fiddle ,
FIDDLE
<iframe id="myIframe" src="http://www.google.com/custom?q=&btnG=Search" height="500px" width="100%"></iframe>
Related
I tried to add two local html file (as frame, inside one html code) in two different iframe, but its not working. Output showing the same html file in both frame.[I guess, screenshot will help to understand my problem]
Here my html code.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Frame1:</h1>
<iframe src="frame1.html" frameborder="1" width="100%" height="250px" name="frame1">
</iframe>
<br /><br /><br />
<h2>Frame 2:</h2>
<iframe src="frame2.html" frameborder="1" width="100%" height="250px" name="frame2">
</iframe>
</body>
</html>
frame1.html file:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h2>This is a separate frame than others</h2>
</body>
</html>
frame2.html file:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h3>Frame 3:</h3>
<iframe src="" frameborder="1" width="90%" height="180px">
</iframe>
</body>
</html>
Screenshot, describing my problem
I just try copy pasting your code in 3 different file in same folder, and i got what you need to have
Maybe this is a cache problem. Have you try to clear your cache browser?
How to print text in IFRAME in html? my code is here
<!DOCTYPE html>
<html>
<body>
<iframe height="300px" width="100%" src="demo_iframe.htm" name="iframe_a">
Hello How are you and show me now
</iframe>
<p></p>
</body>
</html>
the above text is not shown in IFRAMe how can i add that
you can do that make a html file and put some text in that file let consider in our case your file name is htmlframe.html and embed that file with iframe like
<iframe height="300px" width="100%" src="htmlframe.html" name="iframe_a"></iframe>
A simple text can not be added on an iframe as the content of the iframe will be overridden by the src specified. So try this trick .
<!DOCTYPE html>
<html>
<body>
<iframe height="300px" width="100%" src="https://www.youtube.com/embed/VkzVgiYUEIM" name="iframe_a">
</iframe>
<span style="position:absolute;z-index:99;font-size:50px;color:RED;margin-top:-200px;">YOUR LABEL HERE</span>
</body>
</html>
Okay, so i have these sample html pages.
-main.html
-framepage.html
I was wondering what i can add to make the contents of the iframe(from main.html) display the whole page of "framepage.html" and have the iframe along with the contents of framepage.html also resize when you resize the net browser window.
Here are the codes:
main.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<head>
<title>main</title>
<body style="background-color:gray;">
<iframe style="frame" src="framepage.html" scrolling="no" width="800px" height="600px" name="window" noresize frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
And the framepage.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<head>
<title>lalala</title>
<style>
.cap {
position:relative;
top:10px;
left:6px;
}
</style>
</head>
<body>
</br>
<div style="position:relative;left:1220px;top:-15px;">
<div style="width:390px; height:215px; background-color:blue;">
<p class="cap" style="font-weight:bold;">Frame 3</p>
</div>
<div style="width:390px; height:438px; background-color:red;">
<p class="cap" style="font-weight:bold;">Frame 4</p>
</div>
</div>
<div style="width:1160px; height:405px; position:relative;top:-699px;left:35px;background-color:green;">
<p class="cap" style="font-weight:bold;">Frame 1</p>
</div>
<div style="position:relative;top:-699px;left:35px; width:1160px; height:250px;background-color:yellow;">
<p class="cap" style="font-weight:bold;">Frame 2</p>
</div>
</body>
</html>
firstly, you could use relative values instead absolute values (eg. use 100% instead of 800px). Refer to the below code snippet. This essentially make the size of iframe to be 100% fit to the size of the browser (and main.html) and then the framepage.html should have blocks defined as relative values as well.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<head>
<title>main</title>
<body style="background-color:gray;">
<iframe style="frame" src="framepage.html" scrolling="no" width="100%" height="600px" name="window" noresize frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
If you are not limited to use particular browser types (and so css3 can be used), then you can use "flex box" which gives more flexible options for displaying contents like your divs. Refer to the url here http://www.w3schools.com/cssref/css3_pr_flex.asp
and here https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more information.
Feel free to ask any questions regarding flex box or css. Hope this helps.
i have this simple html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="position:absolute;">
<div style="position:absolute; display:block; z-index:999; left:450px;">stuff</div>
</div>
<object data='C:/mypdf.pdf' type="application/pdf" width="500px" heigth="500px" style="z-index:1;">
<p>stuff</p>
<p>stuff</p>
</object>
</body>
</html>
In internet explorer i can not make div in front of the pdf, in others browsers works well,
Any Sugestions?
[EDIT]
Here's a JsFiddle
thanks
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="position:absolute;">
<div style="position:absolute; display:block; z-index:999; left:450px;">stuff</div>
</div>
<object type="application/pdf" width="500px" heigth="500px" style="z-index:1;">
<param name="src" value="http://www.who.int/medicines/publications/essentialmedicines/18th_EML_Final_web_8Jul13.pdf" />
</object>
</body>
</html>
I am trying to embed a map using the code supplied by Google Maps with no alterations. When the page is displayed the Google pointer, zoom level indicator, etc. show but no streets or map, per se. This is the code Google suppled:
<iframe width="425" height="350" frameborder="0" scrolling="No" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=First+Baptist+Church,+Mc+Caysville,+GA+30555&hl=en&cd=2&ei=Gh10TNbbGZj0ygTT24nwCQ&sig2=hvRb-F6JuV91UcC6QUKGUw&ie=UTF8&view=map&cid=16713672426408470324&ved=0CBoQpQY&hq=First+Baptist+Church,+Mc+Caysville,+GA+30555&hnear=&ll=34.986955,-84.368584&spn=0.006153,0.013754&z=16&output=embed&iwloc=near&addr"></iframe>
<br />
<small>View Larger Map</small></div>
What is the problem?
It works on my machine.
Maybe you forgot to add the <html> and <body> tags. You also have a closing </div> that doesn't start anywhere, but it should nevertheless work even without its opening tag.
<html>
<head>
<title></title>
</head>
<body>
<div>
<iframe width="425" height="350" frameborder="0" scrolling="No" marginheight="0"
marginwidth="0" src="http://maps.google.com/maps?q=First+Baptist+Church,+Mc+Caysville,+GA+30555&hl=en&cd=2&ei=Gh10TNbbGZj0ygTT24nwCQ&sig2=hvRb-F6JuV91UcC6QUKGUw&ie=UTF8&view=map&cid=16713672426408470324&ved=0CBoQpQY&hq=First+Baptist+Church,+Mc+Caysville,+GA+30555&hnear=&ll=34.986955,-84.368584&spn=0.006153,0.013754&z=16&output=embed&iwloc=near&addr">
</iframe>
<br />
<small><a href="http://maps.google.com/maps?q=First+Baptist+Church,+Mc+Caysville,+GA+30555&hl=en&cd=2&ei=Gh10TNbbGZj0ygTT24nwCQ&sig2=hvRb-F6JuV91UcC6QUKGUw&ie=UTF8&view=map&cid=16713672426408470324&ved=0CBoQpQY&hq=First+Baptist+Church,+Mc+Caysville,+GA+30555&hnear=&ll=34.986955,-84.368584&spn=0.006153,0.013754&z=16&source=embed"
style="color: #0000FF; text-align: left">View Larger Map</a></small></div>
</body>
</html>