Flexibele iFrame?

Status
Niet open voor verdere reacties.

DaveCuppen

Gebruiker
Lid geworden
11 jan 2008
Berichten
49
Hoi allen,

Kan iemand mij aub helpen met het creëren van een flexibele iFrame?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>dave</title>
<style type="text/css">
<!--
body {
	background-color: #dededf;
	margin-top: 10px;
}
.style3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
.style4 {color: #CC092A}
.style10 {font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; font-weight: bold; }
.style11 {font-size: 10px}
.style12 {font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; }
.style14 {font-size: 24px; color: #CC092A; font-family: Arial, Helvetica, sans-serif;}
.style16 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #000000;
}
a:link {
	text-decoration: none;
	color:#000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px
}
a:visited {
	text-decoration: none;
	color:#000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px
}
a:hover {
	text-decoration: none;
	color:#CC092A
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px
}
a:active {
	text-decoration: none;
	color:#000000
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px
}
a.topmenu:link {
	text-decoration: none;
	color:#000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px
}
a.topmenu:visited {
	text-decoration: none;
	color:#000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px
}
a.topmenu:hover {
	text-decoration: none;
	color:#CC092A;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px
}
a.topmenu:active {
	text-decoration: none;
	color:#000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
a.centermenu:link {
	text-decoration: none;
	color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px
}
a.centermenu:visited {
	text-decoration: none;
	color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px
}
a.centermenu:hover {
	text-decoration: none;
	color:#FFFF00;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px
}
a.centermenu:active {
	text-decoration: none;
	color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
a.bottommenu:link {
	text-decoration: none;
	color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px
}
a.bottommenu:visited {
	text-decoration: none;
	color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px
}
a.bottommenu:hover {
	text-decoration: none;
	color:#FFFF00;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px
}
a.bottommenu:active {
	text-decoration: none;
	color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}
body,td,th {
	color: #FFFFFF;
}
.style22 {font-family: Arial, Helvetica, sans-serif}
.style23 {font-size: 11px}
.style25 {font-family: Arial, Helvetica, sans-serif; color: #000000; }
.style26 {color: #FFFF00}
.style27 {color: #000000}
-->
</style>

</head>

<body>
<div align="center">
  <table width="845" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
    <!--DWLayoutTable-->
    <tr>
      <td height="14" colspan="12" valign="top"><img src="images/INTRANET_DEF_01.jpg" width="845" height="14"></td>
    </tr>
    <tr>
      <td width="38" height="26">&nbsp;</td>
      <td width="6">&nbsp;</td>
      <td width="182">&nbsp;</td>
      <td width="6">&nbsp;</td>
      <td width="47">&nbsp;</td>
      <td width="15">&nbsp;</td>
      <td width="129">&nbsp;</td>
      <td width="189">&nbsp;</td>
      <td width="53">&nbsp;</td>
      <td width="12">&nbsp;</td>
      <td width="124">&nbsp;</td>
      <td width="44">&nbsp;</td>
    </tr>
    <tr>
      <td height="48">&nbsp;</td>
      <td colspan="4" valign="top"><a href="Index.html"><img src="images/INTRANET_DEF_04.jpg" alt="Go back to "Homepage"" width="241" height="48" border="0"></a></td>
      <td>&nbsp;</td>
      <td colspan="3" align="right" valign="middle" class="menu1" id="menu1"><span class="style3"><span class="style25">site map&nbsp;&nbsp;&nbsp;&nbsp;I&nbsp;&nbsp;&nbsp;&nbsp;<a href="EU-CONTACTUS.htm" class="topmenu">contact us</a>&nbsp;&nbsp;&nbsp;&nbsp;I&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="style4">choose country</span></span></td>
      <td colspan="2" align="right" valign="middle" id="country selection">
	  <form name='countrymenu'>
	  </form>
	  </td>
    <td>&nbsp;</td>
    </tr>
    <tr>
      <td height="51">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td height="17"></td>
      <td></td>
      <td></td>
      <td></td>
      <td colspan="3" valign="top"><img src="images/INTRANET_DEF_08.jpg" width="191" height="17"></td>
      <td valign="top"><img src="images/INTRANET_DEF_09.jpg" width="189" height="17"></td>
        <td colspan="3" valign="top"><img src="images/INTRANET_DEF_10.jpg" width="189" height="17"></td>
      <td></td>
    </tr>
    <tr>
      <td height="25"></td>
      <td></td>
      <td></td>
      <td>&nbsp;</td>
      <td colspan="3" align="center" valign="top" bgcolor="#404041" class="contractmenu" id="contractmenu"><span class="style10">Contract<span class="style11">&nbsp;&nbsp;&nbsp;&nbsp;</span></span><span class="style12"><span class="style19 style21 style26"><strong>Quark-files</strong></span>&nbsp;&nbsp;I&nbsp;&nbsp;<a href="EU-CONTRACT-PDF.htm" class="centermenu">PDF-files</a></span></td>
      <td valign="top" bgcolor="#626263" class="directmenu" id="directmenu"><div align="center"><span class="style10">Direct&nbsp;&nbsp;&nbsp;<span class="style11">&nbsp;&nbsp;&nbsp;&nbsp;</span></span><span class="style12"><span class="contractmenu"><a href="EU-DIRECT-QUARK.htm" class="centermenu">Quark-files</a></span>&nbsp;&nbsp;I&nbsp;&nbsp;<span class="contractmenu"><a href="EU-DIRECT-PDF.htm" class="centermenu">PDF-files</a></span></span></div></td>
      <td colspan="3" valign="top" bgcolor="#8f8e90" class="retailmenu" id="retailmenu"><div align="center"><span class="style10">Specials<span class="style11">&nbsp;&nbsp;&nbsp;</span></span><span class="style12"><span class="contractmenu"><span class="style12 style28"><a href="EU-SPECIALS-QIP.htm" class="centermenu">Working-files</a></span></span>&nbsp;&nbsp;I&nbsp;&nbsp;<span class="contractmenu"><span class="style12 style28"><a href="EU-SPECIALS-PDF.htm" class="centermenu">PDF-files</a></span></span></span></div></td>
      <td></td>
    </tr>
    <tr bgcolor="#404041">
      <td height="1" colspan="12" valign="top"><img src="images/spacer.gif" width="1" height="1"></td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td height="600" colspan="12" valign="top"><iframe name="contractquark" frameborder="0" width="845" height="600" scrolling="auto" 
	   src="test.htm"></iframe></td>
    </tr>
    <tr valign="middle" bgcolor="#CC092A">
      <td height="53" colspan="2" valign="top" bgcolor="#CC092A"><!--DWLayoutEmptyCell-->&nbsp;</td>
      <td colspan="9" align="right" valign="middle" class="menubottom" id="menubottom"><span class="style23 style20 style22"><span class="style6 style19"><a href="EU-STYLEGUIDES.htm" class="bottommenu">Styleguides</a></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Inputmaker&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://10.140.230.5/index.html" target="_blank" class="bottommenu">Online DBS</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="EU-IMAGES.htm" class="bottommenu">Images</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="bottommenu style31"><a href="EU-DOCUMENTATION.htm" class="bottommenu">Documentation</a></span></span></td>
      <td valign="top" bgcolor="#CC092A"><!--DWLayoutEmptyCell-->&nbsp;</td>
    </tr>
    <tr valign="middle" bgcolor="#FFFFFF">
      <td height="41">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr valign="middle" bgcolor="#FFFFFF">
      <td height="34">&nbsp;</td>
      <td colspan="2" rowspan="2" valign="top"><p class="style3"><span class="style3 style32 style27">Office Depot International B.V.<br>
            <br>
Columbusweg 33<br>
<br>
5928 LA&nbsp;&nbsp;Venlo<br>
<br>
The Netherlands</span></p></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr valign="middle" bgcolor="#FFFFFF">
      <td height="47">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td align="right" valign="bottom" class="style14">Europe</td>
      <td></td>
    </tr>
    <tr valign="middle" bgcolor="#FFFFFF">
      <td height="11"></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr valign="middle" bgcolor="#FFFFFF">
      <td height="13" colspan="12" valign="top"><img src="images/INTRANET_DEF_15.jpg" width="845" height="13"></td>
    </tr>
    <tr bgcolor="#dededf">
      <td height="30" colspan="12" align="right" valign="middle"><span class="style16">&copy; 2008 by Office Depot, Inc. All rights reserved </span></td>
    </tr>
  </table>
</div>
</body>
</html>

Alvast vriendelijk bedankt

Gr.
Dave
 
Ik weet dat normaal gesproken een iFrame een vaste afmeting heeft, maar dit zou je met een bepaalde javaScripting flexibel kunnen maken, zodat deze de hoogte zou aanpassen aan het formaat pagina wat geladen wordt in de iFrame?

Is er iemand die mij hiermee kan helpen, ik had al enkele dingen geprobeerd, maar het lijkt me allemaal niet te lukken :(

Alvast bedankt :)
 
De grote vraag is, waarom wil je dit? Er zijn vaak betere oplossingen. Als het gewoon om een menu gaat wat pagina's opent in een iframe zou ik dat om te beginnen afraden (geen permalinks). Je kunt beter gewoon naar een nieuw html of php bestand linken wat de goede pagina laat zien. Met PHP zijn er erg handige methodes om makkelijk je menu en standaard layout te plaatsen.

Maar als je dan toch met Javascript gaat werken kun je beter Ajax gebruiken en de HTML in een <div> laden (de bestanden mogen dan geen <html>, <head> of <body> tags hebben). Een div neemt automatisch de grootte over van de inhoud. Maarja, dit maakt je site wel onbuikbaar als javascript uit staat. Daarom moet je eigenlijk beginnen met een site zonder Javascript en achteraf links onderscheppen en deze methode toepassen.
 
Hoi Glest,

Bedankt voor je antwoord.
Het is meer dat er een database geladen word in een iframe hierbij wordt geen gebruik gemaakt van een ingeladen html of php voor zover ik weet?
Meer een folderstructuur.

maar ik kijk wel even verder dan mijn neus lang is ;)

bedankt

Gr.
Dave
 
nouja, alles wat je op het web ziet is uiteindelijk HTML, flash, java of iets obscuurs. Als je het in een iframe wilt laden ga ik er toch van uit dat het HTML is. Maar anders kun je eens laten zien wat je hebt?
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan