Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation Noobie needs help; is an iframe my best option?

    Hey guys,

    New to the forum - figured you guys may be able to help.

    I'm building myself a website, now when it comes to HTML/CSS/etc - I really don't know much. I basically designed the entire website in photoshop - made some slices and am now trying to put it all together.

    My progress so far;
    http://www.gregorymstevens.com/testsite/site.html

    As you can see I've placed my navigation on the left hand side and would like to have the content on the right. I used an iframe - which worked great. However, I didn't realize it only looked great on MY pc's resolution and no one elses...

    Long and short of it, does anyone have suggestions (maybe something other than an iframe) to have the content iframe adapt to the viewers resolution/window size?


    Thanks in advance guys...

  • #2
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Right, I changed a few things. Hope it helps.
    Firstly iframes? There are better ways to do it.

    • I took the image from the iframe and placed it directly it on the main page.
    • I created 3 div containers: 1 main container and one surrounding both the navigation and main content.
    • I styled these 3 divs using CSS at the top of the page.
    • I got rid of the <br> at the top of the page and applied top padding to the nav div.


    I think it might be worth spending some time looking into some basic XHTML and CSS.

    Code:
    <!-- Created by Gregory Martin Stevens -->
    
    <html>
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #wrapper {
    width: 100%;
    }
    
    #leftContainer {
    width: 35%;
    float: left;
    border: 0px solid white;
    padding-top: 10px;
    }
    
    #rightContainer {
    margin-top: 40px;
    float: left;
    width: 64%;
    border: 0px solid white;
    }
    
    #rightContainer img {
    width: 100%;
    }
    
    </style>
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadtestsite/images() { //v3.0
      var d=document; if(d.testsite/images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadtestsite/images.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    </head>
    <body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadtestsite/images('images/rollover/facebook_lit.gif','images/rollover/twitter_lit.gif','images/rollover/bird1.gif','images/rollover/bird2.gif','images/rollover/bird3.gif','images/rollover/bird4.gif','images/rollover/bird5.gif')">
    
    
    <div id="wrapper">
    
    <div id="leftContainer">
    
    <table id="Nav" width="437" height="841" border="0" cellpadding="0" cellspacing="0">
    	<tr>
    		<td colspan="17">
    
    			<img src="images/site_01.gif" width="436" height="16" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="16" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="5" rowspan="2">
    			<img src="images/site_02.gif" width="164" height="127" alt=""></td>
    		<td colspan="4"><a href="http://www.facebook.com/gregmstevens" target="_blank" onMouseOver="MM_swapImage('Facebook','','images/rollover/facebook_lit.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/facebook.gif" alt="Facebook" name="Facebook" width="52" height="52" border="0"></a></td>
    		<td rowspan="2">
    
    			<img src="images/site_04.gif" width="4" height="127" alt=""></td>
    		<td colspan="3"><a href="https://twitter.com/#!/gregorystevens" target="_blank" onMouseOver="MM_swapImage('Image68','','images/rollover/twitter_lit.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/twitter.gif" alt="Twitter" name="Image68" width="53" height="52" border="0"></a></td>
    		<td colspan="4" rowspan="2">
    			<img src="images/site_06.gif" width="163" height="127" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="52" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="4">
    
    			<img src="images/site_07.gif" width="52" height="75" alt=""></td>
    		<td colspan="3">
    			<img src="images/site_08.gif" width="53" height="75" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="75" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="14">
    			<img src="images/site_09.gif" width="22" height="697" alt=""></td>
    
    		<td colspan="15">
    			<a href="#">
    				<img src="images/name.gif" width="393" height="46" border="0" alt=""></a></td>
    		<td rowspan="12">
    			<img src="images/site_11.gif" width="21" height="642" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="46" alt=""></td>
    	</tr>
    	<tr>
    
    		<td colspan="15">
    			<img src="images/site_12.gif" width="393" height="175" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="175" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="2" rowspan="3">
    			<img src="images/site_13.gif" width="121" height="93" alt=""></td>
    		<td colspan="4"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Bird1','','images/rollover/bird1.gif',1)"><img src="images/bird1.gif" name="Bird1" width="37" height="28" border="0"></a></td>
    
    		<td colspan="9" rowspan="2">
    			<img src="images/site_15.gif" width="235" height="73" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="28" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="4" rowspan="2">
    			<img src="images/site_16.gif" width="37" height="65" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="45" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="4" rowspan="5">
    			<img src="images/site_17.gif" width="44" height="153" alt=""></td>
    		<td rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image69','','images/rollover/bird2.gif',1)"><img src="images/bird2.gif" name="Image69" width="41" height="30" border="0"></a></td>
    		<td colspan="4" rowspan="4">
    			<img src="images/site_19.gif" width="150" height="143" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="20" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="9">
    			<img src="images/site_20.gif" width="90" height="383" alt=""></td>
    		<td colspan="2" rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image70','','images/rollover/bird3.gif',1)"><img src="images/bird3.gif" name="Image70" width="42" height="28" border="0"></a></td>
    		<td colspan="3" rowspan="4">
    			<img src="images/site_22.gif" width="26" height="133" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="10" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="8">
    			<img src="images/site_23.gif" width="41" height="373" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="18" alt=""></td>
    	</tr>
    	<tr>
    
    		<td colspan="2" rowspan="7">
    			<img src="images/site_24.gif" width="42" height="355" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="95" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="2" rowspan="6">
    			<img src="images/site_25.gif" width="14" height="260" alt=""></td>
    		<td rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image71','','images/rollover/bird4.gif',1)"><img src="images/bird4.gif" name="Image71" width="39" height="30" border="0"></a></td>
    
    		<td rowspan="4">
    			<img src="images/site_27.gif" width="97" height="205" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="10" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="2" rowspan="5">
    			<img src="images/site_28.gif" width="14" height="250" alt=""></td>
    		<td colspan="2" rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image72','','images/rollover/bird5.gif',1)"><img src="images/bird5.gif" name="Image72" width="40" height="26" border="0"></a></td>
    
    		<td colspan="3" rowspan="5">
    			<img src="images/site_30.gif" width="16" height="250" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="20" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="4">
    			<img src="images/site_31.gif" width="39" height="230" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="6" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="2" rowspan="3">
    			<img src="images/site_32.gif" width="40" height="224" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="169" alt=""></td>
    	</tr>
    	<tr>
    
    		<td colspan="2">
    			<img src="images/choosea.gif" width="118" height="26" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="26" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="2">
    			<img src="images/site_34.gif" width="118" height="29" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="29" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="images/spacer.gif" width="22" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="90" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="31" height="1" alt=""></td>
    
    		<td>
    			<img src="images/spacer.gif" width="11" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="10" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="12" height="1" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="28" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="8" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="41" height="1" alt=""></td>
    
    		<td>
    			<img src="images/spacer.gif" width="8" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="6" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="39" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="97" height="1" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="21" height="1" alt=""></td>
    		<td></td>
    			</tr>
    </table>
    </div>		
    
    <div id="rightContainer">
            <img src="bogart.jpg" alt="Main content image" />		
    </div>
    
    </div>
    
    
    </body>
    </html>
    Last edited by dan-dan; 03-06-2012 at 01:45 PM.

  • Users who have thanked dan-dan for this post:

    gstevens (03-06-2012)

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks alot dan-dan. Appreciate you taking the time to help me out...


    Few questions/problems - That image I was using was used more or less as a placeholder. The iframe in which that picture was in was where I hope to put the content for all of the different links (bio, resume, etc). How can I make sure when a link is clicked the information loads only in the "rightcontainer" (where the picture is)?

    Dreamweaver is also telling me there is a "synta error on line 35." which contains this: function MM_preloadtestsite/images() { //v3.0

    Other than that, I just have to figure out why my rollovers aren't working on the birds...

  • #4
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    OK I apologise, I misread your post. I thought you were using the iframe to structure your page instead of using CSS, the same as people use tables. My bad.

    I put the iframe back:
    Code:
    <!-- Created by Gregory Martin Stevens -->
    
    <html>
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #wrapper {
    width: 100%;
    }
    
    #leftContainer {
    width: 35%;
    float: left;
    border: 0px solid white;
    padding-top: 10px;
    }
    
    #rightContainer {
    margin-top: 40px;
    float: left;
    width: 64%;
    border: 0px solid white;
    }
    
    #iframe {
    overflow: none;
    height: 800px;
    border: 0px solid white;
    }
    
    </style>
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadtestsite/images() { //v3.0
      var d=document; if(d.testsite/images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadtestsite/images.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    </head>
    <body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadtestsite/images('images/rollover/facebook_lit.gif','images/rollover/twitter_lit.gif','images/rollover/bird1.gif','images/rollover/bird2.gif','images/rollover/bird3.gif','images/rollover/bird4.gif','images/rollover/bird5.gif')">
    
    
    <div id="wrapper">
    
    <div id="leftContainer">
    
    <table id="Nav" width="437" height="841" border="0" cellpadding="0" cellspacing="0">
    	<tr>
    		<td colspan="17">
    
    			<img src="images/site_01.gif" width="436" height="16" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="16" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="5" rowspan="2">
    			<img src="images/site_02.gif" width="164" height="127" alt=""></td>
    		<td colspan="4"><a href="http://www.facebook.com/gregmstevens" target="_blank" onMouseOver="MM_swapImage('Facebook','','images/rollover/facebook_lit.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/facebook.gif" alt="Facebook" name="Facebook" width="52" height="52" border="0"></a></td>
    		<td rowspan="2">
    
    			<img src="images/site_04.gif" width="4" height="127" alt=""></td>
    		<td colspan="3"><a href="https://twitter.com/#!/gregorystevens" target="_blank" onMouseOver="MM_swapImage('Image68','','images/rollover/twitter_lit.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/twitter.gif" alt="Twitter" name="Image68" width="53" height="52" border="0"></a></td>
    		<td colspan="4" rowspan="2">
    			<img src="images/site_06.gif" width="163" height="127" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="52" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="4">
    
    			<img src="images/site_07.gif" width="52" height="75" alt=""></td>
    		<td colspan="3">
    			<img src="images/site_08.gif" width="53" height="75" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="75" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="14">
    			<img src="images/site_09.gif" width="22" height="697" alt=""></td>
    
    		<td colspan="15">
    			<a href="#">
    				<img src="images/name.gif" width="393" height="46" border="0" alt=""></a></td>
    		<td rowspan="12">
    			<img src="images/site_11.gif" width="21" height="642" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="46" alt=""></td>
    	</tr>
    	<tr>
    
    		<td colspan="15">
    			<img src="images/site_12.gif" width="393" height="175" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="175" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="2" rowspan="3">
    			<img src="images/site_13.gif" width="121" height="93" alt=""></td>
    		<td colspan="4"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Bird1','','images/rollover/bird1.gif',1)"><img src="images/bird1.gif" name="Bird1" width="37" height="28" border="0"></a></td>
    
    		<td colspan="9" rowspan="2">
    			<img src="images/site_15.gif" width="235" height="73" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="28" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="4" rowspan="2">
    			<img src="images/site_16.gif" width="37" height="65" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="45" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="4" rowspan="5">
    			<img src="images/site_17.gif" width="44" height="153" alt=""></td>
    		<td rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image69','','images/rollover/bird2.gif',1)"><img src="images/bird2.gif" name="Image69" width="41" height="30" border="0"></a></td>
    		<td colspan="4" rowspan="4">
    			<img src="images/site_19.gif" width="150" height="143" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="20" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="9">
    			<img src="images/site_20.gif" width="90" height="383" alt=""></td>
    		<td colspan="2" rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image70','','images/rollover/bird3.gif',1)"><img src="images/bird3.gif" name="Image70" width="42" height="28" border="0"></a></td>
    		<td colspan="3" rowspan="4">
    			<img src="images/site_22.gif" width="26" height="133" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="10" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="8">
    			<img src="images/site_23.gif" width="41" height="373" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="18" alt=""></td>
    	</tr>
    	<tr>
    
    		<td colspan="2" rowspan="7">
    			<img src="images/site_24.gif" width="42" height="355" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="95" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="2" rowspan="6">
    			<img src="images/site_25.gif" width="14" height="260" alt=""></td>
    		<td rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image71','','images/rollover/bird4.gif',1)"><img src="images/bird4.gif" name="Image71" width="39" height="30" border="0"></a></td>
    
    		<td rowspan="4">
    			<img src="images/site_27.gif" width="97" height="205" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="10" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="2" rowspan="5">
    			<img src="images/site_28.gif" width="14" height="250" alt=""></td>
    		<td colspan="2" rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image72','','images/rollover/bird5.gif',1)"><img src="images/bird5.gif" name="Image72" width="40" height="26" border="0"></a></td>
    
    		<td colspan="3" rowspan="5">
    			<img src="images/site_30.gif" width="16" height="250" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="20" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="4">
    			<img src="images/site_31.gif" width="39" height="230" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="6" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="2" rowspan="3">
    			<img src="images/site_32.gif" width="40" height="224" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="169" alt=""></td>
    	</tr>
    	<tr>
    
    		<td colspan="2">
    			<img src="images/choosea.gif" width="118" height="26" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="26" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="2">
    			<img src="images/site_34.gif" width="118" height="29" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="29" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="images/spacer.gif" width="22" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="90" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="31" height="1" alt=""></td>
    
    		<td>
    			<img src="images/spacer.gif" width="11" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="10" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="12" height="1" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="28" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="8" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="41" height="1" alt=""></td>
    
    		<td>
    			<img src="images/spacer.gif" width="8" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="6" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="39" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="97" height="1" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="21" height="1" alt=""></td>
    		<td></td>
    			</tr>
    </table>
    </div>		
    
    <div id="rightContainer">
             <iframe src="main.html" name="iframe" id="iframe" width="100%" frameborder="0" scrolling="no"></iframe>		
    </div>
    
    </div>
    
    
    </body>
    </html>
    And here is main:
    Code:
    <html>
    <head>
    <style type="text/css">
    img {
    width: 100%;
    }
    </style>
    </head>
    
    <body>
    
    <img src="http://www.gregorymstevens.com/testsite/bogart.jpg" alt="Main Image" />
    
    </body>
    
    </html>
    I used CSS to set the image to 100% width, thus expanding the iframe to fill the right container.

    Sorry but I can't help with the javascript part, really don't understand it. I hope someone else can help
    Last edited by dan-dan; 03-06-2012 at 08:29 PM.

  • #5
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    dan-dan,

    I used your code and it looks great. However, I just noticed that when I resize my window the iframe seems to overlap my navigation (on the left side). Wouldn't this mean people with lower resolutions (1024, 800x600, etc) would not be able to see the entire navigation bar on the left side?

    Your recent code live here: http://www.gregorymstevens.com/testsite/site.html

  • #6
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    OK, here it is.
    I fixed the left containers width to 450px which is roughly the size of your tree thing so it will stay fixed width. I set a min and max width on the right container too.

    Code:
    <!-- Created by Gregory Martin Stevens -->
    
    <html>
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #wrapper {
    width: 100%;
    }
    
    #leftContainer {
    width: 450px;
    float: left;
    border: 0px solid white;
    padding-top: 40px;
    }
    
    #rightContainer {
    margin-top: 40px;
    float: left;
    width: 60%;
    max-width: 809px;
    min-width: 329px;
    border: 0px solid white;
    }
    
    #rightContainer img {
    width: 100%;
    }
    
    </style>
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadtestsite/images() { //v3.0
      var d=document; if(d.testsite/images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadtestsite/images.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    </head>
    <body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadtestsite/images('images/rollover/facebook_lit.gif','images/rollover/twitter_lit.gif','images/rollover/bird1.gif','images/rollover/bird2.gif','images/rollover/bird3.gif','images/rollover/bird4.gif','images/rollover/bird5.gif')">
    
    
    <div id="wrapper">
    
    <div id="leftContainer">
    
    <table id="Nav" width="437" height="841" border="0" cellpadding="0" cellspacing="0">
    	<tr>
    		<td colspan="17">
    
    			<img src="images/site_01.gif" width="436" height="16" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="16" alt=""></td>
    	</tr>
    	<tr>
    
    		<td colspan="5" rowspan="2">
    			<img src="images/site_02.gif" width="164" height="127" alt=""></td>
    		<td colspan="4"><a href="http://www.facebook.com/gregmstevens" target="_blank" onMouseOver="MM_swapImage('Facebook','','images/rollover/facebook_lit.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/facebook.gif" alt="Facebook" name="Facebook" width="52" height="52" border="0"></a></td>
    		<td rowspan="2">
    
    			<img src="images/site_04.gif" width="4" height="127" alt=""></td>
    		<td colspan="3"><a href="https://twitter.com/#!/gregorystevens" target="_blank" onMouseOver="MM_swapImage('Image68','','images/rollover/twitter_lit.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/twitter.gif" alt="Twitter" name="Image68" width="53" height="52" border="0"></a></td>
    		<td colspan="4" rowspan="2">
    			<img src="images/site_06.gif" width="163" height="127" alt=""></td>
    
    		<td>
    			<img src="images/spacer.gif" width="1" height="52" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="4">
    
    			<img src="images/site_07.gif" width="52" height="75" alt=""></td>
    		<td colspan="3">
    			<img src="images/site_08.gif" width="53" height="75" alt=""></td>
    
    		<td>
    			<img src="images/spacer.gif" width="1" height="75" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="14">
    			<img src="images/site_09.gif" width="22" height="697" alt=""></td>
    
    		<td colspan="15">
    			<a href="#">
    
    				<img src="images/name.gif" width="393" height="46" border="0" alt=""></a></td>
    		<td rowspan="12">
    			<img src="images/site_11.gif" width="21" height="642" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="46" alt=""></td>
    	</tr>
    	<tr>
    
    		<td colspan="15">
    
    			<img src="images/site_12.gif" width="393" height="175" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="175" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="2" rowspan="3">
    			<img src="images/site_13.gif" width="121" height="93" alt=""></td>
    		<td colspan="4"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Bird1','','images/rollover/bird1.gif',1)"><img src="images/bird1.gif" name="Bird1" width="37" height="28" border="0"></a></td>
    
    		<td colspan="9" rowspan="2">
    			<img src="images/site_15.gif" width="235" height="73" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="28" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="4" rowspan="2">
    			<img src="images/site_16.gif" width="37" height="65" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="45" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="4" rowspan="5">
    			<img src="images/site_17.gif" width="44" height="153" alt=""></td>
    		<td rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image69','','images/rollover/bird2.gif',1)"><img src="images/bird2.gif" name="Image69" width="41" height="30" border="0"></a></td>
    		<td colspan="4" rowspan="4">
    			<img src="images/site_19.gif" width="150" height="143" alt=""></td>
    
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="20" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="9">
    			<img src="images/site_20.gif" width="90" height="383" alt=""></td>
    		<td colspan="2" rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image70','','images/rollover/bird3.gif',1)"><img src="images/bird3.gif" name="Image70" width="42" height="28" border="0"></a></td>
    		<td colspan="3" rowspan="4">
    
    			<img src="images/site_22.gif" width="26" height="133" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="10" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="8">
    			<img src="images/site_23.gif" width="41" height="373" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="18" alt=""></td>
    	</tr>
    	<tr>
    
    		<td colspan="2" rowspan="7">
    			<img src="images/site_24.gif" width="42" height="355" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="95" alt=""></td>
    	</tr>
    
    	<tr>
    		<td colspan="2" rowspan="6">
    			<img src="images/site_25.gif" width="14" height="260" alt=""></td>
    		<td rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image71','','images/rollover/bird4.gif',1)"><img src="images/bird4.gif" name="Image71" width="39" height="30" border="0"></a></td>
    
    		<td rowspan="4">
    			<img src="images/site_27.gif" width="97" height="205" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="10" alt=""></td>
    
    	</tr>
    	<tr>
    		<td colspan="2" rowspan="5">
    			<img src="images/site_28.gif" width="14" height="250" alt=""></td>
    		<td colspan="2" rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image72','','images/rollover/bird5.gif',1)"><img src="images/bird5.gif" name="Image72" width="40" height="26" border="0"></a></td>
    
    		<td colspan="3" rowspan="5">
    			<img src="images/site_30.gif" width="16" height="250" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="20" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="4">
    			<img src="images/site_31.gif" width="39" height="230" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="6" alt=""></td>
    	</tr>
    
    	<tr>
    		<td colspan="2" rowspan="3">
    			<img src="images/site_32.gif" width="40" height="224" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="169" alt=""></td>
    	</tr>
    	<tr>
    
    		<td colspan="2">
    
    			<img src="images/choosea.gif" width="118" height="26" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="26" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="2">
    			<img src="images/site_34.gif" width="118" height="29" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="29" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="images/spacer.gif" width="22" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="90" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="31" height="1" alt=""></td>
    
    		<td>
    			<img src="images/spacer.gif" width="11" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="10" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="12" height="1" alt=""></td>
    
    		<td>
    
    			<img src="images/spacer.gif" width="28" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="8" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
    
    		<td>
    			<img src="images/spacer.gif" width="41" height="1" alt=""></td>
    
    		<td>
    			<img src="images/spacer.gif" width="8" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="6" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="39" height="1" alt=""></td>
    
    		<td>
    			<img src="images/spacer.gif" width="97" height="1" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="21" height="1" alt=""></td>
    		<td></td>
    			</tr>
    </table>
    </div>		
    
    <div id="rightContainer">
              <iframe src="main.html" name="iframe" id="iframe" width="100%" height="840" frameborder="0" scrolling="no"></iframe>	
    
    </div>
    
    </div>
    
    
    </body>
    </html>

  • #7
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Dan,

    Won't that solution just make the iframe stack UNDER the navigation tree if the viewing resolution is too small?

  • #8
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    I just moved the iframe to the top of the page, reversed the float and moved it back to %. The left container is now fixed width and the right container will skrink as the window does.

    Code:
    <!-- Created by Gregory Martin Stevens -->
    
    <html>
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #wrapper {
    width: 100%;
    }
    
    #leftContainer {
    width: 40%;
    float: right;
    border: 0px solid white;
    padding-top: 40px;
    }
    
    #rightContainer {
    margin-top: 40px;
    float: right;
    width: 59%;
    border: 0px solid white;
    }
    
    #rightContainer img {
    width: 100%;
    }
    
    </style>
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadtestsite/images() { //v3.0
      var d=document; if(d.testsite/images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadtestsite/images.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    </head>
    <body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadtestsite/images(
    'images/rollover/facebook_lit.gif,
    'images/rollover/twitter_lit.gif',
    'images/rollover/bird1.gif',
    'images/rollover/bird2.gif',
    'images/rollover/bird3.gif',
    'images/rollover/bird4.gif',
    'images/rollover/bird5.gif')">
    
    
    <div id="wrapper">
    
    <div id="rightContainer">
              <iframe src="main.html" name="iframe" id="iframe" width="100%" height="840" frameborder="0" scrolling="no"></iframe>	
    </div>
    
    <div id="leftContainer">
    
    <table id="Nav" width="437" height="841" border="0" cellpadding="0" cellspacing="0">
    	<tr>
    		<td colspan="17">
    
    			<img src="images/site_01.gif" width="436" height="16" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="16" alt=""></td>
    	</tr>
    	<tr>
    
    		<td colspan="5" rowspan="2">
    			<img src="images/site_02.gif" width="164" height="127" alt=""></td>
    		<td colspan="4"><a href="http://www.facebook.com/gregmstevens" target="_blank" onMouseOver="MM_swapImage('Facebook','','images/rollover/facebook_lit.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/facebook.gif" alt="Facebook" name="Facebook" width="52" height="52" border="0"></a></td>
    		<td rowspan="2">
    
    			<img src="images/site_04.gif" width="4" height="127" alt=""></td>
    		<td colspan="3"><a href="https://twitter.com/#!/gregorystevens" target="_blank" onMouseOver="MM_swapImage('Image68','','images/rollover/twitter_lit.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/twitter.gif" alt="Twitter" name="Image68" width="53" height="52" border="0"></a></td>
    		<td colspan="4" rowspan="2">
    			<img src="images/site_06.gif" width="163" height="127" alt=""></td>
    
    		<td>
    			<img src="images/spacer.gif" width="1" height="52" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="4">
    
    			<img src="images/site_07.gif" width="52" height="75" alt=""></td>
    		<td colspan="3">
    			<img src="images/site_08.gif" width="53" height="75" alt=""></td>
    
    		<td>
    			<img src="images/spacer.gif" width="1" height="75" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="14">
    			<img src="images/site_09.gif" width="22" height="697" alt=""></td>
    
    		<td colspan="15">
    			<a href="#">
    
    				<img src="images/name.gif" width="393" height="46" border="0" alt=""></a></td>
    		<td rowspan="12">
    			<img src="images/site_11.gif" width="21" height="642" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="46" alt=""></td>
    	</tr>
    	<tr>
    
    		<td colspan="15">
    
    			<img src="images/site_12.gif" width="393" height="175" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="175" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="2" rowspan="3">
    			<img src="images/site_13.gif" width="121" height="93" alt=""></td>
    		<td colspan="4"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Bird1','','images/rollover/bird1.gif',1)"><img src="images/bird1.gif" name="Bird1" width="37" height="28" border="0"></a></td>
    
    		<td colspan="9" rowspan="2">
    			<img src="images/site_15.gif" width="235" height="73" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="28" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="4" rowspan="2">
    			<img src="images/site_16.gif" width="37" height="65" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="45" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="4" rowspan="5">
    			<img src="images/site_17.gif" width="44" height="153" alt=""></td>
    		<td rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image69','','images/rollover/bird2.gif',1)"><img src="images/bird2.gif" name="Image69" width="41" height="30" border="0"></a></td>
    		<td colspan="4" rowspan="4">
    			<img src="images/site_19.gif" width="150" height="143" alt=""></td>
    
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="20" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="9">
    			<img src="images/site_20.gif" width="90" height="383" alt=""></td>
    		<td colspan="2" rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image70','','images/rollover/bird3.gif',1)"><img src="images/bird3.gif" name="Image70" width="42" height="28" border="0"></a></td>
    		<td colspan="3" rowspan="4">
    
    			<img src="images/site_22.gif" width="26" height="133" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="10" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="8">
    			<img src="images/site_23.gif" width="41" height="373" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="18" alt=""></td>
    	</tr>
    	<tr>
    
    		<td colspan="2" rowspan="7">
    			<img src="images/site_24.gif" width="42" height="355" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="95" alt=""></td>
    	</tr>
    
    	<tr>
    		<td colspan="2" rowspan="6">
    			<img src="images/site_25.gif" width="14" height="260" alt=""></td>
    		<td rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image71','','images/rollover/bird4.gif',1)"><img src="images/bird4.gif" name="Image71" width="39" height="30" border="0"></a></td>
    
    		<td rowspan="4">
    			<img src="images/site_27.gif" width="97" height="205" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="10" alt=""></td>
    
    	</tr>
    	<tr>
    		<td colspan="2" rowspan="5">
    			<img src="images/site_28.gif" width="14" height="250" alt=""></td>
    		<td colspan="2" rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image72','','images/rollover/bird5.gif',1)"><img src="images/bird5.gif" name="Image72" width="40" height="26" border="0"></a></td>
    
    		<td colspan="3" rowspan="5">
    			<img src="images/site_30.gif" width="16" height="250" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="20" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="4">
    			<img src="images/site_31.gif" width="39" height="230" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="6" alt=""></td>
    	</tr>
    
    	<tr>
    		<td colspan="2" rowspan="3">
    			<img src="images/site_32.gif" width="40" height="224" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="169" alt=""></td>
    	</tr>
    	<tr>
    
    		<td colspan="2">
    
    			<img src="images/choosea.gif" width="118" height="26" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="26" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="2">
    			<img src="images/site_34.gif" width="118" height="29" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="1" height="29" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="images/spacer.gif" width="22" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="90" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="31" height="1" alt=""></td>
    
    		<td>
    			<img src="images/spacer.gif" width="11" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="10" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="12" height="1" alt=""></td>
    
    		<td>
    
    			<img src="images/spacer.gif" width="28" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="8" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
    
    		<td>
    			<img src="images/spacer.gif" width="41" height="1" alt=""></td>
    
    		<td>
    			<img src="images/spacer.gif" width="8" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="6" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="39" height="1" alt=""></td>
    
    		<td>
    			<img src="images/spacer.gif" width="97" height="1" alt=""></td>
    		<td>
    
    			<img src="images/spacer.gif" width="21" height="1" alt=""></td>
    		<td></td>
    			</tr>
    </table>
    </div>	
    
    </div>
    
    
    </body>
    </html>

  • #9
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by gstevens View Post
    Thanks alot dan-dan. Appreciate you taking the time to help me out...


    Few questions/problems - That image I was using was used more or less as a placeholder. The iframe in which that picture was in was where I hope to put the content for all of the different links (bio, resume, etc). How can I make sure when a link is clicked the information loads only in the "rightcontainer" (where the picture is)?

    Dreamweaver is also telling me there is a "synta error on line 35." which contains this: function MM_preloadtestsite/images() { //v3.0

    Other than that, I just have to figure out why my rollovers aren't working on the birds...
    ^ That error persists (and will continue to do so) because you have a forward slash in the function name. That's a no-no.

    That said, there is nothing about your page layout that requires an iframe. If your main concern is avoiding a page load (and perhaps resetting effects on your menu or something) then you can achieve the same effect by using AJAX requests to load new content into the existing page (or by using cookies to store menu status). If there is no specific reason that you need to avoid a page load (if, say, you just don't want the page to "blink" or something so you are thinking you need to avoid a page load entirely) then I should mention that externally located scripts and style sheets (those listed with src and href rather than with the actual information typed into the header) are cached by the user's browser, making subsequent page views almost instant and usually invisible. When styles and scripts are cached the user will only need to download the page's HTML, which it gets pretty much all at once unless there is a server problem - until you receive a server response the browser won't display anything else/new anyway, so there is no white screen or unformatted text because the script and styles are already stored and ready to be applied when the content arrives.

    So, if you can explain your goals a little better we can do a more solid job of advising you...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #10
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Rowsdower,

    I'm really just more or less looking to have the page function properly no matter what resolution the viewer may be on. You claim nothing on my page requires an iframe, what's a better alternative? I am favoring the iframe only because If I am to make changes to the navigation psd it is much easier to export once on 'site.html' and have 'main.html' be in a seperate frame.



    ^That's really all I'm trying to do, in theory - sounds simple.

  • #11
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by gstevens View Post
    Rowsdower,

    I'm really just more or less looking to have the page function properly no matter what resolution the viewer may be on. You claim nothing on my page requires an iframe, what's a better alternative? I am favoring the iframe only because If I am to make changes to the navigation psd it is much easier to export once on 'site.html' and have 'main.html' be in a seperate frame.



    ^That's really all I'm trying to do, in theory - sounds simple.
    The fact is, even your use of iframes are not accomplishing your basic goal of fitting different screen resolutions. When I browse your page and shrink it, the iframe section overlaps the left sidebar and some point.

    Here is a good tutorial for css based cross browser compliant solutions to your issue. Using media queries you can style a site to fit many different screen res' without the use of js.

    btw: you mention changing a sidebar once and not multiple times. You can do this with server-side includes.

    Also worth mentioning is you dont declare a valid doctype, which is crucial in getting all browsers to render your document correctly. The validator will help you with proper coding as well.
    Last edited by teedoff; 03-07-2012 at 08:06 PM.
    Teed


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •