I am having some trouble with this for some reason... I've been using old school html frames forever and decided I should start using iframes for easier javascript integration... I need a top nav and a left nav with content filling the rest of the page... Tell me what I'm doing wrong!!
Original:
<html>
<head>
<title></title>
</head>
<iframe style="display:block; width:100%; height:50px"
src="navTop.html" name="iframeTop" scrolling="no" frameBorder="0">
</iframe>
<iframe style="display:inline; overflow:hidden; width=10%; height=100%;"
src="navLeft.html" name="iframeLeft" scrolling="no" frameBorder="0">
</iframe>
<iframe style="display:block; float:right; width=90%; height=100%"
src="content.html" name="iframeCenter" scrolling="auto" frameBorder="0">
</iframe>
<noframes></noframes>
</html>
I am sure its something really simple that I am missing. Thanks in advance!
Edit:
I started trying to accomplish this with div's and css... This is where I am... It's not working still... Help!!!
CSS:
<style>
body {
margin:0px;
padding:0px;
}
#topNavigation div {
background-color:100719;
margin:0px;
padding:0px;
margin-top:0px;
margin-left:0px;
width:100%;
height:50px;
}
#leftNavigation div {
background-color:100719;
margin:0px;
padding:0px;
margin-top:50px;
margin-left:0px;
width:400px;
height:100%;
}
#displayContent div {
background-color:100719;
margin:0px;
padding:0px;
margin-top:50px;
margin-left:400px;
width:100%;
height:100%;
}
</style>
DIVS:
<body>
<div id="topNavigation">
<iframe src="navTop.html"
style="border:0px #FFFFFF none;"
name="navTop"
scrolling="no"
frameborder="0"
marginheight="0px"
marginwidth="0px">
</iframe>
</div>
<div id="leftNavigation">
<iframe src="navLeft.html"
style="border:0px #FFFFFF none;"
name="navLeft"
scrolling="no"
frameborder="0"
marginheight="0px"
marginwidth="0px">
</iframe>
</div>
<div id="displayContent">
<iframe src="content.html"
style="border:0px #FFFFFF none;"
name="content"
scrolling="no"
frameborder="0"
marginheight="0px"
marginwidth="0px">
</iframe>
</div>
</body>
Resolved:
<body style="margin:0px; padding:0px; line-height:0; height:100%">
<iframe src="navTop.html"
style="margin:0px; padding:0px; line-height:0; width:100%; height:8%;"
name="navTop" scrolling="no" frameborder="0">
</iframe>
<iframe src="navLeft.html"
style="margin:0px; padding:0px; line-height:0; width:10%; height:100%; float:left"
name="navLeft" scrolling="no" frameborder="0">
</iframe>
<iframe src="content.html"
style="margin:0px; padding:0px; line-height:0; width:90%; height:100%; float:right"
name="content" scrolling="no" frameborder="0">
</iframe>
Related
Anyone know how to put a tag next to the youtube videos without creating extra line space between the border box and the video vertically? Like I'm trying to put text in the right side of the first video but it keeps making extra space between the video and the border box where it says vide.
<!DOCTYPE html
<html lang="en">
<meta charset="UTF-8">
<head>
<title>007 Nightfire | Videos</title>
</head>
<style>
.div1 {
background-color:#77BFC7;
text-align:center;
font-size:50px;
border:1px solid #77BFC7;
height:70px;
font-weight:bold;
}
body {
background-color:#00AAFF;
}
hr {
height:0px;
background-color:#000000;
border:solid;
}
</style>
<body>
<div class="div1">
Videos
</div>
<center>
<iframe width="520" height="300"
src="https://www.youtube.com/embed/7TVYA_o5Fsw" allowfullscreen style="position:relative; top:5px; right:360px;">
</iframe>
<br>
<br>
<hr>
<iframe width="520" height="300"
src="https://youtube.com/embed/XZMtPu35UT8" allowfullscreen style="position:relative; top:10px; left:350px;">
</iframe>
</body>
</html>
You just need a div with inline style, and to float the text to the right. I'd also recommend to change the center tag to a div, as its not the recommended HTML5 way to center stuff.
.div1 {
background-color: #77BFC7;
text-align: center;
font-size: 50px;
border: 1px solid #77BFC7;
height: 70px;
font-weight: bold;
}
body {
background-color: #00AAFF;
}
hr {
height: 0px;
background-color: #000000;
border: solid;
}
<div class="div1">
Videos
</div>
<center>
<div style="display: inline-block;">
<iframe width="520" height="300" src="https://www.youtube.com/embed/7TVYA_o5Fsw" allowfullscreen style="position:relative; top:5px; right:360px;">
</iframe>
<p style="float: right">Text Content Here</p>
</div>
<br>
<br>
<hr>
<iframe width="520" height="300" src="https://youtube.com/embed/XZMtPu35UT8" allowfullscreen style="position:relative; top:10px; left:350px;">
</iframe>
</center>
I would be really, really happy if someone could help me with removing the click (link) option from this iframe. I just want the image to be not clickable.
<iframe src="http://snapwidget.com/in/?u=bW9sbGVrcnVrbWFrZXJpfGlufDI1MHwxfDF8fG5vfDB8bm9uZXxvblN0YXJ0fG5vfG5v&ve=120215" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:200px; height:200px"></iframe>
You can put a transparent div in front of the iframe.
.iframeContainer{
position:relative;
border:1px solid;
width:200px;
height:200px;
}
.iframeBlocker{
position:absolute;
width:100%;
height:100%;
background:#000;
opacity:0.5;
}
<div class="iframeContainer">
<div class="iframeBlocker"></div>
<iframe src="http://snapwidget.com/in/?u=bW9sbGVrcnVrbWFrZXJpfGlufDI1MHwxfDF8fG5vfDB8bm9uZXxvblN0YXJ0fG5vfG5v&ve=120215" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:200px; height:200px"></iframe>
</div>
On my website, section "Presse and Medias", I'd like a white square to appear a few px next to the video (on the right side) with the word "hello" in it.
Unfortunately this is not working. I see the word hello, but not in a white square.
Any idea what the issue is and how to fix it?
Many thanks,
Here is my html:
<div class="section" id="medias">
<div class="center">
<iframe width="350" height="200" class="youtube-player" src="http://www.youtube.com/embed/qqXi8WmQ_WM" frameborder="0" allowfullscreen></iframe>
<div id="medias-txt"
<p>hello</p></div>
</div>
</div><!--END page4-->
And here is my css:
#medias-txt
{
background-color:#fff;
color:#000;
width:100px;
height:100px;
padding:10px;
float:right;
}
You aren't closing your div tag
<div class="section" id="medias">
<div class="center">
<iframe width="350" height="200" class="youtube-player" src="http://www.youtube.com/embed/qqXi8WmQ_WM" frameborder="0" allowfullscreen></iframe>
<div id="medias-txt">
<p>hello</p></div>
</div>
</div><!--END page4-->
This should do the trick.
PS Love the video on that page :)
In your css, you need to add spaces between the colons and the content.
eg:
#medias-txt
{
background-color: #fff;
color: #000;
width: 100px;
height: 100px;
padding: 10px;
float: right;
}
I have a problem trying to move div's on the page based on the screen size..
I have got my pages (code as per below) displaying the width correctly but can't seem to get the height correct when the user re-sizes the page.
What I am trying to do is..
have a header that is displayed across the top
a page on the left which will have a menu in it
a page to the right that will display the page text
a footer across the bottom
My pages looks like this below:
index.htm:
<style type="text/css">
body{
margin:0;
padding:0px;
line-height: 1.5em;
padding-bottom:10px; /* Height of the footer */
}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
</style>
<!-- top -->
<div id="topsection">
<div>
This is the top
</div>
</div>
<!-- Left side -->
<div ID="left" STYLE="width:260px; left:0px; height:90%; float:left;">
<iframe src="test.htm" NAME="menu" width="270px" height="100%" frameborder="0"></iframe>
</div>
<!-- right side -->
<div ID="right" STYLE="height:90%; left:0px; float:left;">
<iframe src="test1.htm" NAME="right" width="100%" height="100%" frameborder="0"></iframe>
</div>
<!-- footer -->
<div ID="foot" STYLE="height:10%; left:0px; top:90%; float:left;">
<iframe src="foot.htm" NAME="footer" width="100%" height="100%" frameborder="0"></iframe>
</div>
test.htm:
<body bgcolor="#808080">
test1.htm:
<body bgcolor="#88888888">
right side text
foot.htm:
<body bgcolor="#9999999">
This is a footer
Your Header:
#topsection{
position:absolute;
}
Your footer:
#foot{
position:absolute;
}
you should use absolute I think
Here is some more info about the position 'tag' in css
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
do this for top bar and footer.
hope might work in your case.
#topsection{
position:fixed;
................
}
#foot{
position:fixed;
................
}
This is exactly what you ak for. Fixed header and footer
I am trying to create a border around an image on the page, and the border works fine in IE8 Normal mode, but fills to 100% of the outer div in IE8 compatibility mode, my css is the following:
.page-layout .page-header .page-image
{
float:left;
vertical-align:top;
width:170px;
}
.page-layout .page-header .page-image div,
.page-layout .page-header .page-image img
{
float:left;
}
.page-image-imgtop
{
background-image:url('/Style Library/images/pagecontent-image-top-bg.png');
background-repeat:repeat-x;
height:6px;
float:left;
clear:both;
width:100%;
}
.page-image-imgleft
{
background-image:url('/Style Library/images/pagecontent-image-bg-left.png');
background-repeat:repeat-y;
float:left;
text-align:right;
clear:both;
}
.page-image-imgright
{
margin-left:7px;
padding-right:8px;
background-image:url('/Style Library/images/pagecontent-image-bg-right.png');
background-repeat:repeat-y;
background-position:top right;
float:left;
clear:both;
}
.page-image-imgbottom
{
background-image:url('/Style Library/images/pagecontent-image-bottom-bg.png');
background-repeat:repeat-x;
height:6px;
float:left;
clear:both;
width:100%;
}
And the following HTML:
<div class="page-image">
<div class="page-image-imgleft">
<div class="page-image-imgtop">
<img src="/Style Library/images/pagecontent-image-top-left.png" style="float:left;" />
<img src="/Style Library/images/pagecontent-image-top-right.png" style="float:right" />
</div>
<div class="page-image-imgright">
<img src="MAINIMAGE.jpg" style="border-width:0px;text-align:top;" />
</div>
<div class="page-image-imgbottom">
<img src="/Style Library/images/pagecontent-image-bottom-left.png" style="float:left;" />
<img src="/Style Library/images/pagecontent-image-bottom-right.png" style="float:right" />
</div>
</div>
</div>
Not totally sure if I understand what you want to do. But why not trying to add the boarder in the css file?
Remove style="border-width:0px;text-align:top;" from the MAINIMAGE.jpg tag
and add this to .page-image-imgright in the css source
border: 5px solid #000000;
I didn't have any problem with the boarder in IE 8 when I tested this - the border was only around the main image.
Let me know if that solves the problem.