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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Inline frame on top of an image

    Hey, so what I'm trying to do it to get an inline frame to be overlaying the image here: http://cnewton.net , and sort of filling in the middle part of it, and I can't for the life of me figure out how to. Any help would be greatly appreciated!

    Thanks!

  • #2
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    There are several ways to achieve that outcome.

    Most of them involve "don't try". By that I mean use a different approach to achieve the same result.

    One of the most flexible approaches would be to cut your image into five pieces.

    1. The header / menu bar
    2. The left border (as a 1 px horizontal strip to be repeated vertically)
    3. The central section (as a 1px vertial strip to be repeated horizontally)
    4. The right border (as a 1px hz strip, same as 2)
    5. The footer

    Then use an img and map as now for your header / menu bar
    Use divs and CSS to set the background for the other parts of your image
    With 2 and 4 repeat in the y direction
    With 3 set a background colour that matches the colour at the bottom of the gradient and repeat in the x direction - this will allow you to have a page of any length - for very long pages the image will fade into the background
    With the footer set up the size of the div to match the size of the image.

    Having placed the image in the background you can place anything on top of it, including an iframe. However HTML4.01 Strict does not allow iframes, so you should either forego using iframes or revert to HTML4.01 Transitional (or start using HTML5 which does/likely will allow iframes).

    A less flexible alternative would be to use an absolutely positioned div as in the following:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html><head> 
      
      <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> 
      <title>CNewton</title> 
      <base href="http://cnewton.net/"> 
      <style type="text/css">
      div#page {
        width: 800px;
        height: 1000px;
        margin: 0 auto;
        position: relative;
      }
      div#background {
        z-index: 1;
      }
      div#content {
        z-index: 99;
        position: absolute;
        top: 170px;
        left: 50px;
      }
      iframe {
      border: 0 solid;
      }
      </style>
      
    </head><body> 
    <script src="ga.js" type="text/javascript"></script> 
    <script src="ga.js" type="text/javascript"></script> 
    <div id="page">
    <div id="background">
    <img style="border: 0px solid ; width: 800px; height: 1000px;" alt="CNewton" src="Headbar%20copy%20copy.png" usemap="#Header"> <map name="Header"> 
    <area shape="rect" coords="70,100,140,143" href="blog.html" alt="blog"> 
    <area shape="rect" coords="177,100,267,143" href="about.html" alt="about"> 
    <area shape="rect" coords="305,100,403,143" href="contact.html" alt="contact"> 
    <area shape="rect" coords="437,100,545,143" href="services.html" alt="services"> 
    <area shape="rect" coords="582,100,699,143" href="galleries.html" alt="galleries"> 
    </map> 
    </div><!-- end background -->
    <div id="content">
     
    <iframe src="blog.html" width="700" height="800" ></iframe>
    
    </div><!-- end content -->
    </div><!-- end page -->
    <script type="text/javascript"> 
     
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-16397437-1']);
      _gaq.push(['_trackPageview']);
     
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
     
    </script></body></html>
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.


  •  

    Posting Permissions

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