Website frames problem

Discussion in 'Off-Topic Chat' started by DaveR, Jun 21, 2006.

  1. DaveR

    DaveR Active Member

    I've got a really odd problem with my website. It uses frames, with the navigation buttons on the left and the main target frame on the right. What should happen is that when a navigation button is clicked, the target page should open in the main frame on the right hand side. 19 times out of 20 this works fine. However, occasionally it opens up a new page for no apparent reason and I'm stumped why this is happening. It does it in Firefox and in Internet Explorer so I don't think it is a browser issue. I've also seen it on more than one PC. The only way to fix the problem once it happens is to close the browser (or the Firefox tab) and reopen it again, when the problem will have gone away.

    This is driving me crazy and I can't work out what's going on! :mad: Has anybody seen anything like this before? There doesn't seem to be any rhyme or reason to it - the only possible clue I have is that it only seems to do it in a browser window that has been open for a while and which has been used to view other websites. However, this isn't consistent so it could be red-herring......

    Any suggestions are more than welcome.....
     
  2. DaveR

    DaveR Active Member

    Just done a bit more testing on this - and can now consistently break this. It happens consistently after you have visited http://news.bbc.co.uk. There may be other sites that do this as well I guess but the BBC is one I visit regularly.

    I've tried refreshing the browser, using the back button etc and it is always the same. Once the BBC has been viewed in the browser session, my website breaks. Aarrrrgh!!! :eek:
     
  3. davidquinlan

    davidquinlan Member

    Hi Dave,

    Ensure you either have <base target="{your target frame name}"> on each page in the frame set, or set a target attribute in each anchor link <a href="your page" target="your target"/>

    Should do the trick.
     
  4. DaveR

    DaveR Active Member

    Cheers Dave - I'll check the code. I thought I had this actually, but I could be mistaken! It wouldn't be the first time!
     
  5. AJSOP

    AJSOP Member

    Many people do avoid using frames nowadays as they are bad practise. With so much emphasis on accessability and usability nowadays. Although frames do have their uses every so often.
     
  6. DaveR

    DaveR Active Member

    Yes I know, but using frames was the most convenient way to layout the website in the way I wanted! I expect I'll completely revise the website sometime in the next 12 months or so to make it look a bit more "spangly" and modern (it's very basic and a little old-fashioned looking at the moment), but for the moment it does the job! Apart from this little bug... :mad:
     
  7. DaveR

    DaveR Active Member

    Ah-ha, this is now fixed, thanks to the genius of Keith Penton (tMP's kp51) - Sandhurst Silver Band's webmaster!

    Apparently, my frameset was in a bit of a knot, and added to that the target frame was called main. Once this was renamed, it worked.

    Theory is that the BBC also use a frame called main and this was getting it into a muddle somehow. So now the frameset is unmuddled, the target frame has been renamed, and the links all contain the correct target attribute (as suggested above by davidquinlan) and hopefully it is now bombproof!

    Thanks to you all for your suggestions!
     
  8. johnmartin

    johnmartin Active Member

    Glad you got your problem sorted. You should seriously look at ditching the frames and using CSS for screen layout though. Frames are an abomination and are not guaranteed to be supported in future browser releases.
     
  9. DaveR

    DaveR Active Member

    That's as maybe - but I know more or less how to use frames, whereas CSS etc is completely new and I didn't have time to learn a new trick! As I said earlier, the website will be revamped later in the year or early next year - maybe by a professional if I can afford one! :rolleyes:
     
  10. johnmartin

    johnmartin Active Member

    CSS is not difficult. I used to think that way until I just got down and did it. Picked the whole lot up in about a week and now cannot do without it. For an example of how easy it is to create a page with CSS try the following.

    Create a file called test.css with the following content

    #pageHeader {
    height: 100px;
    width: 800px;
    border:1px solid #FF0000;
    }
    #mainMenu {
    position: absolute;
    top: 120px;
    left: 10px;
    width: 120px;
    border:1px solid #00FF00;
    }
    #mainContent {
    position:absolute;
    top:120px;
    left:135px;
    width:675px;
    border:1px solid #0000FF;
    }

    Create a second file called layout.html with the following content

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="test.css" rel="stylesheet" type="text/css">
    <title>test css layout page</title>
    </head>

    <body>

    <div id="pageHeader">
    The Page Header Goes Here
    </div>

    <div id="mainMenu">
    menu Item 1<br>
    menu Item 2<br>
    Menu Item 3<br>
    </div>

    <div id="mainContent">
    This is the main content area and all the usual page info goes here.
    </div>

    </body>
    </html>

    Save both of these files in the same directory and then open the file layout.html in your favourite browser. You should see a three "frame" page with different coloured borders around each separate area. If you play about with the numbers for top and left in the CSS file you can re-position the areas anywhere on the screen, even overlap if you want. Of course CSS can do a lot more than simply position things on screen but that's a good example to start off with. There are plenty of CSS resources on the web and I would encourage you to do a bit of research, it's well worth it.
     
  11. theMouthPiece Visitor Guide

    Find more discussions like this one
    problem
    website
    target frame
    frames
    frame
  12. TheMusicMan

    TheMusicMan tMP Founder Staff Member

  13. DaveR

    DaveR Active Member

    Right, I've taken the plunge and I've started playing with css. Thanks to John Martin for posting an example that I have been able to study and learn how it works! :clap:

    However, I have created a horizontal bar with some navigation links on it. In CSS, how do I make it display in the main part of the page, and not open a new page? If you have a look at http://www.odbba.org and click on the about button you will see what I mean. I want the contents of that page to replace the photo on the front page.

    I'm sure someone must have done this and will know that answer off the top of their heads.....
     
  14. johnmartin

    johnmartin Active Member

    Very nice Dave. I'm a bit confused by your question. If I'm understanding correctly then what you want to do is to have the content of the main area change whilst the rest of the page remains static. What you would end up with is a single index.htm page which dynamically changes content depending upon which links are clicked. If I'm correct then this is not really a job for CSS, it's more suited to a programming language or flash.

    Alternatively you can use templates in Dreamweaver to define a template page which would contain all of your static content visible on every page of your site e.g header area, main menu and the footer area. Dreamweaver protects the template areas so they cannot be edited under normal circumstances. You can also define editable regions within your template i.e. your main page content area. In this way all of your pages maintain the same look and feel but you would still have two separate pages, index.htm and about.htm.

    I've looked at your code for the page you have there and with a bit of work you can use CSS to take away java script from your menu page and have everything defined using UL and LI tags. I'll work on it a bit and post back later.
     
    Last edited: Jul 26, 2006
  15. DaveR

    DaveR Active Member

    Hi John,

    Thanks for your message - that is exactly what I want. It is easy-peasy using frames, but I couldn't see a way of doing it in CSS. I know I could copy index.htm to be called about.htm and just change the content of the main area, but if I then needed to change something else - e.g. the footer I would have to edit about 8 different html files, whereas with frames I could just edit the one file! I figured there had to be an easier way of doing it than that....

    I think the CSS is a bit over-engineered on the page - I was trying to acheive something that turned out to be too difficult and gave up! I will simplify the CSS sometime to make it more straight-forward. I think the javascript all relates to the navigation buttons - could CSS really replace all that????
     
  16. Jan H

    Jan H Moderator Staff Member

    Like John said, that's what you can use the "template" thing in Dreamweaver (or other software I suppose...) for. That's how I do it on the two sites that I maintain.

    There is on more drawback: when you have changed the template, and therefore automatically changed all other files, you also need to upload all these files to your webserver (instead of only having to upload the html file for the frame that was changed)
     
  17. DaveR

    DaveR Active Member

    I should also say I don't have DreamWeaver - I'm using FrontPage. :(
     
  18. johnmartin

    johnmartin Active Member

    Frontpage used to be frowned upon but recent versions have upped their game a little. I would be surprised if it didn't have a template tool in it for maintaining multiple similar pages in one go.

    CSS can be used to replace all that javascript. The SBBA and Lochgelly Band sites have all their menus done in CSS. The first link in musicmans post is a very useful resource for creating menus using unordered lists and CSS. I've actually redone your menu on the train this morning to use CSS rather than javascript.

    I just thought of another tag which you should investigate - iframe. Off the top of my head I don't know if it'll do what you want but just google it and see what comes up.
     
  19. DaveR

    DaveR Active Member

    I wondered about using iFrames. We use them in one of our pieces of software at work. I like them, but as our developers seem to be trying to phase them out I thought maybe they were yesterday's news too.

    Thanks for your help John - much appreciated!
     
  20. johnmartin

    johnmartin Active Member

    Right here's your new CSS file for the menu stuff

    body, p, td {
    font: normal 10pt Arial, Helvetica, sans-serif;
    text-decoration: none;
    }

    #pageHeaderLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 90px;
    width: 175px;
    background-color: white;
    text-color: #000000;
    text-align: center
    border:0px solid #FF0000;
    }

    #pageHeaderRight {
    position: absolute;
    top: 0px;
    left: 175px;
    height: 90px;
    width: 450px;
    background-color: white;
    border:0px solid #FF0000;
    }

    #mainMenu {
    position: absolute;
    top: 103px;
    left: 25px;
    width: 835px;
    height:40px;
    background-color: white;
    border:0px solid #FF0000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    font-style: normal;
    line-height: normal;
    text-transform: capitalize;
    text-align: left;
    vertical-align: top;
    }
    #mainMenu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    text-transform: capitalize;
    }
    #mainMenu li {
    display: inline;
    background-image:url(images/button9.jpg);
    }
    #mainMenu li a {
    text-decoration: none;
    padding: 5px 4px 5px 0.5em;
    text-align:center;
    width:100px;
    background-image:url(images/button9.jpg);
    }
    #mainMenu li a:visited {
    text-decoration: none;
    background-image:url(images/button9.jpg);
    }
    #mainMenu li a:hover, a:active {
    text-decoration: none;
    background-image:url(images/buttonB.jpg);
    }

    #mainContent {
    position:absolute;
    top:135px;
    left:0px;
    height: 435px;
    width:100%;
    background-color: white;
    border:0px solid #0000FF;
    }

    #pageFooter {
    position:absolute;
    top:570px;
    left:0px;
    height: 30px;
    width: 100%;
    background-color: white;
    text-align: center;
    border:0px solid #FF0000;

    Tidied up unnecessary classes and included the bits to do the unordered lists.



    Your new index page is as follows

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html><!-- InstanceBegin template="/Templates/odbb.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="stylesheet.css" rel="stylesheet" type="text/css">
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Oxford and District Brass Band Association Website</title>
    <!-- InstanceEndEditable --><!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
    </head>

    <body>
    <div id="pageHeaderLeft">
    <img border="0" src="images/logo.png" width="132" height="95">
    </div>

    <div id="pageHeaderRight">
    <p align="center"><font size="6">Oxford and District Brass Band Association</font>.</p>
    </div>

    <div id="mainMenu">
    <ul>
    <li><a href="index.html">Home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    <li><a href="about.html">About&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    <li><a href="index.html">Contests&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    <li><a href="index.html">Results Archive</a></li>
    <li><a href="index.html">What's On&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    <li><a href="index.html">Newsletter&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    <li><a href="index.html">Member Bands</a></li>
    <li><a href="index.html">Guestbook&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    </ul>
    </div>

    <div id="mainContent">
    <!-- InstanceBeginEditable name="main" -->
    <p align="center"><img border="0" src="images/frontphoto.jpg" width="446" height="305"></p>
    <!-- InstanceEndEditable -->
    </div>

    <div id="pageFooter">All Content © 2006. Website sponsored by <a href="http://www.aldbrickham-music.co.uk">Aldbrickham Music</a>, hosted by <a href="http://www.theMouthpiece.com">theMouthpiece.com</a></div>

    </body>
    <!-- InstanceEnd --></html>

    The unfamiliar tags that look like "<!-- InstanceBeginEditable name="main" -->
    " are dreamweavers way of marking template areas and you can generally ignore them. You'll see the reference to your image in there.



    The about page looks like this.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html><!-- InstanceBegin template="/Templates/odbb.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="stylesheet.css" rel="stylesheet" type="text/css">
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Oxford and District Brass Band Association Website</title>
    <!-- InstanceEndEditable --><!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
    </head>

    <body>
    <div id="pageHeaderLeft">
    <img border="0" src="images/logo.png" width="132" height="95">
    </div>

    <div id="pageHeaderRight">
    <p align="center"><font size="6">Oxford and District Brass Band Association</font>.</p>
    </div>

    <div id="mainMenu">
    <ul>
    <li><a href="index.html">Home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    <li><a href="about.html">About&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    <li><a href="index.html">Contests&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    <li><a href="index.html">Results Archive</a></li>
    <li><a href="index.html">What's On&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    <li><a href="index.html">Newsletter&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    <li><a href="index.html">Member Bands</a></li>
    <li><a href="index.html">Guestbook&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    </ul>
    </div>

    <div id="mainContent">
    <!-- InstanceBeginEditable name="main" -->
    <p>This is the about page.</p>
    <!-- InstanceEndEditable -->
    </div>

    <div id="pageFooter">All Content © 2006. Website sponsored by <a href="http://www.aldbrickham-music.co.uk">Aldbrickham Music</a>, hosted by <a href="http://www.theMouthpiece.com">theMouthpiece.com</a></div>

    </body>
    <!-- InstanceEnd --></html>

    This is virtually identical to the index page because it was generated from the same template. The only difference is in the main content area. Cut & paste and save that lot and then try it in your browser. Please note that the background image for the button is basically taken from your existing ones but with the text erased. You'll see the references to the images I used in the CSS file.

    The menu is a bit of a fudge because I had to use blanks to pad things out to get the curved endings on the menu tabs. There are other, more elegant ways to do this but I was in a hurry this morning.

    Get yourself a 30 day trial of DreamWeaver either from Adobe or from the coverdisc of virtually and internet magazine. You can pick up copies on ebay for less than £100 quid on the educational license scheme if you qualify.
     
  21. DaveR

    DaveR Active Member

    Wow, that's amazing! You've virtually written my website for me!! :clap: :tup

    I'll try this out later and let you know how I get on. Thanks ever so much for your help!
     
  22. theMouthPiece Visitor Guide

    Find more discussions like this one
    problem
    website
    target frame
    frames
    frame

Share This Page