inline frame inside right column of 2 col layout

  pcadv 22:21 11 Jan 2007
Locked

Hi,

I am trying to insert an inline frame inside a column. However the frame is not expanding itself according to the width and height of the column.

I am using css and html. If anyone can help me, it would be great.

thanks,

  LeadingMNMs 22:28 11 Jan 2007

Its hard to no exactly what your doing, and the section of the code may help people to see the problem.

I'm assuming you're doing "width:100%;height:100%" already within the CSS ?

  pcadv 22:42 11 Jan 2007

Hello Leading,

Thanks for your response. In the style sheet my column is defined as follows:

.inlineframe {
margin-left:20%; width: 80%; height:100%;
}

and in the main code:
<div class="inlineframe">
<iframe src="index11.htm" width="100%" height="100%">
</iframe>
</div>

However, with this somehow the entire column wraps up into a very small width. I am not sure where the problem lies. it would be great if you can suggest something.

thanks

  PurplePenny 18:07 12 Jan 2007

Is it online yet? If so please post a link.

I've just tried it out with your code (with another page for the source of the iframe of course!) and it seemed to work perfectly in both Firefox and IE7.

  pcadv 20:32 12 Jan 2007

Hi,

Thanks for helping me. Am not sure why its not working. Althought the code is not online, I have pasted it below. If possible let me know where I am wrong.

In the stlye.css sheet:
BODY {
MARGIN-TOP: 0px; margin-bottom: 0px; border-width: 0px; padding: 0px;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #996633;
background-repeat: no-repeat;
}


H1 {
position: relative; top: 30px; width: 100%; height: 300px; z-index: 1;
}
A:hover {
COLOR: maroon;
}
H2 {
position: relative; top: 10px; width: 100%; height: 50px; z-index: 1;
FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
H3 {
position: relative; top: 7px; width: 100%; height: 25px;FONT-SIZE: 15px; text-align: center;
FONT-FAMILY: Times New Roman, Verdana, Arial, Helvetica, sans-serif
}
.small {
float: left; width:20%; FONT-SIZE: 11pt; line-height:150%;
text-align:left; COLOR: #000000;
FONT-FAMILY: Times New Roman, Verdana, Arial, Helvetica, sans-serif
}
.inlineframe {
width: 80%; height:100%;
text-align: left; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}

#wrap
{
top: 10px;
left:-20px;
width:98%;
padding:0;
margin:0;
border:0;
height:87%;
background: white;

}
.cen
{

margin-left: 12%;
margin-right: 12%;
height:100%;
padding:0;
border:0;
overflow: hidden;
}

img.x
{
position:absolute;
z-index:-2
}


ul.none {
text-align:left;
list-style-type: none}


In the HTML file:
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<title>Photographs</title>

<link rel="stylesheet" href="style11.css" type="text/css">


</head>

<body>
<div class="cen">


<img class="x" src="Presentation6565.jpg">
<H1><img src="image005.gif" title="dcp_6231.jpg">

<H2>
<li style="display: inline"><a style="float:left;width:19%;text-align: center" href="index11.htm"><img border="0" src="image007.gif"></a></li>
<li style="display: inline"><a style="float:left;width:19%;text-align: center" href="about us.htm"><img border="0" src="image008.gif"></a></li>
<li style="display: inline"><a style="float:left;width:19%;text-align: center" href="index11.htm"><img border="0" src="image006.gif"></a></li>
<li style="display: inline"><a style="float:left;width:19%;text-align: center" href="Photographs.htm"><img border="0" src="image009.gif"></a></li>
<li style="display: inline"><a style="float:left;width:19%;text-align: center" href="index11.htm"><img border="0" src="image010.gif"></a></li>

<div id="wrap">
<h3 style="text-align: left"> Photographs </h3>

<div class="small">
<ul class="none">
<li>PA</li>
<li>S</li>
<li>HMB</li>
<li>SC</li>
</ul>
</div>

<div class="inlineframe">
<iframe src="index11.htm" width="10%" >
</iframe>
</div>

</div>
</h2>
</h1>
</div>
</body>
</html>

  PurplePenny 23:27 12 Jan 2007

I haven't tried your code out but at a quick look through there are a couple of errors that could be the problem.

The use of the the heading tags may be messing it up: that isn't how they are used! You can't have an h3 *inside* an h2 and both of them *inside* an h1.

An h1 should be either the site name (if it is on every page) or the page title (if the site name is a banner or logo). The other heading tags have to be used in a strict hierachy: depending on how you used h1, h2 is either the page title or a subheading; then h3s are subheadings beneath h2s and so on.

You don't seem to have <ul> tags around the first set of list items. That could also be a source of confusion for the browser trying to interpret it.

  PurplePenny 23:36 12 Jan 2007

Could be even simpler! In your first code excerpt you had:

<iframe src="index11.htm" width="100%" height="100%">

But in the second, full, code it says:
<iframe src="index11.htm" width="10%" >

  pcadv 22:36 17 Jan 2007

thanks for all your help.

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Fujitsu Lifebook P727 laptop review

11 best portfolio websites for designers and artists

Office for Mac buying guide: Price, Office 2017 rumours & new features

Comment désactiver les programmes qui s'exécutent au démarrage de Windows 10 ?