Split a page in 2 halfs and call it with an iframe - Page 2

Joakim · 12-12-2007, 07:11 AM

Well, you're making it to hard for me

Actually, I want the solution you'll think work the best (smoothest to edit etc). The template itself isn't made by me, so my html-knowledge is still very limited

. I just added some small changes..

What's the difference with ajax and other solutions ? Pro's and cons ?

My menu looks like this

Code:

<td valign=top>
<div style="overflow: auto; width: auto; height: 635; border-left: 0px gray solid; border-top: 0px gray solid; border-bottom: 0px gray solid; padding:0px; margin: 0px">
<table border=0 cellspacing="0" cellpadding="2" BGCOLOR="#f1f5f8">




<tr>
<td nowrap>
<FONT FACE="arial" SIZE="2" color="#516a88">
<B><u><a href="#Instructions"><center>INSTRUKTIONER (Klicka här)</center></a></u></B></FONT></td>
</tr>



<tr>
<td nowrap>
<FONT FACE="arial" SIZE="2" color="#516a88">
<br />
<B>&nbsp<IMG SRC="v3/forum/style_images/pixelized/nav_m.gif" align="middle">&nbsp Nordlig vind</B>
</FONT>
</td>
</tr>


<tr>
<td nowrap>
<FONT FACE="arial" SIZE="1">
&nbsp  <a href="#TOind24" > &#149 Ett nordligt ställe <font color=red>New!</font></a>
</FONT>
</td>
</tr>

<tr>
<td nowrap>
<FONT FACE="arial" SIZE="1">
&nbsp  <a href="#TOind1" > &#149 Ännu ett</a>
</FONT>
</td>
</tr>


<tr>
<td nowrap>
<FONT FACE="arial" SIZE="1">
&nbsp  <a href="#TOind2" > &#149 3 stycken</a>
</FONT>
</td>
</tr>

</table>
</div>
</td>

Costin Trifan · 12-12-2007, 07:38 AM

use Nat's solution

Boogle · 12-12-2007, 08:03 AM

OK Joakim, that HTML you posted is really really outdated and is in dier need of being revamped man!

look, i put it together for you anyway but you should know it's got to be re-done at some point... try learning some HTML and CSS and re-making the menu and then re-integrate it... anyway i don't think you posted the full HTML for the menu because i've only got a tiny menu with the code you posted.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
    #container
    {
    text-align:center;
    }

    #menuContainer
    {
    width:22%;
    height:780px;
    float:left;
    }
    #frameContainer
    {
    width:57%;
    height:780px;
    float:right;
    }
    #floatFix
    {
    visibility: hidden;
    height: 0;
    clear:both;
    }   
    </style>
</head>
<body>

<div style="width:800px; margin: 0 auto;">
    <div id="container">
        <div id="menuContainer">
           <div style="overflow: auto; width: auto; height: 635; border-left: 0px gray solid; border-top: 0px gray solid; border-bottom: 0px gray solid; padding:0px; margin: 0px">
                <table border="0" cellspacing="0" cellpadding="2" bgcolor="#f1f5f8">
                <tr>
                <td nowrap>
                <font face="arial" size="2" color="#516a88">
                <b><u><a href="#Instructions"><center>INSTRUKTIONER (Klicka här)</center></a></u></b></font></td>
                </tr>
                <tr>
                <td nowrap>
                <font face="arial" size="2" color="#516a88">
                <br />
                <b>&nbsp;<img src="v3/forum/style_images/pixelized/nav_m.gif" align="middle" />&nbsp; Nordlig vind</b>
                </FONT>
                </td>
                </tr>
                <tr>
                <td nowrap>
                <font face="arial" size="1">
                &nbsp;  <a href="#TOind24" > • Ett nordligt ställe <font color="red">New!</font></a>
                </FONT>
                </td>
                </tr>
                <tr>
                <td nowrap>
                <font face="arial" size="1">
                &nbsp;  <a href="#TOind1" > • Ännu ett</a>
                </FONT>
                </td>
                </tr>
                <tr>
                <td nowrap style="height: 17px">
                <font face="arial" size="1">
                &nbsp;  <a href="#TOind2"> • 3 stycken</a>
                </FONT>
                </td>
                </tr>
                </table>
                </div>
        </div>

        <div id="frameContainer">
             <iframe id="Spotguide" width="57%" height="780" src="http://www.homepage.com/spot.html" frameborder="0"></iframe>
       </div>
<div id="floatFix"></div>
    </div>
</div>
</body>
</html>

you need to put in the correct path to the i-frame too then it shall display how you want...

HTH's

Boog's

Joakim · 12-15-2007, 06:07 AM

You've got PM Boogle..

Joakim · 12-19-2007, 04:14 AM

Quote:

Originally Posted by Costin Trifan

use Nat's solution

Which one is that ?

Boogle · 12-19-2007, 04:17 AM

Quote:

Which one is that ?

It was to get the HTML for the menu and place it in a container down the left handside, like he wants, then to put just the map in an i-frame wrapped in a container. I've PM'd the solution i think....

(My memory is a bit jagged after the weekends large amount of alcohol in-take!)

Joakim · 12-19-2007, 04:27 AM

OK, well, I don't think you did

I've made some work on this, but can't get it right. If you have the link I gave you, you can see that the map seems to be aligned outside the border.
However, this solution is great, but I still can't use the link-function (from menu to map). I think it is because I use 2 files and that screws that function up.