mimic iframe

c010depunkk · #1 Jul 24th, 2007, 14:03

I'm working on redoing my company's homepage and I've kinda coded myself into a corner... The original page is here: http://www.modus-hightech.de and is made with tables, inline css and an iframe.

I started with a design from Stu at cssplay.co.uk and started modifying it. The header and footer work but my problem is the content in the center. I'm having trouble getting the background image and text centered and the content the right width (in IE) and getting the content to scroll (in FF). The site looks ok as long as the browser window is big enough, but as soon as it gets smaller everything looks ass. Any suggestions?

HTML:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>modus High-tech electronics</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<style type="text/css" media="all">@import "css.css";</style>

<?php include("flashdetect.mo"); ?>

</head>

<body>
<div id="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,</p>
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.r sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet</p>
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.r sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet</p>
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.r sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet</p>
<p>Dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.r sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.r sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit</p>
<p>Dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.r sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.r sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit</p>
<p>Dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.r sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.r sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit</p>
<p>Dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.r sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.r sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit</p>
</div>
</div>

<div id="header">
    <?php echo("<script type=\"text/javascript\">var lang = \"".$_SESSION['lang']."\";</script>");?>
    <script type="text/javascript">
        if (flashpresent) {
            document.write("<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0' id='header' width='978' height='131'> <param name= 'movie' value='gfx/header_final.swf'> <param name='bgcolor' value='#FFFFFF'> <param name='quality' value='high'> <param name='allowscriptaccess' value='samedomain'> <embed type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' width='978' height='131' name='header' src='gfx/header_final.swf' bgcolor='#FFFFFF' quality='high' swLiveConnect='true' allowScriptAccess='samedomain'></embed></object>");
        } else {
            document.write("<img src=\"gfx/head.jpg\" alt=\"modus High-tech GmbH\" />");
        }
    </script>
</div>

<div id="footer">
    <img src="gfx/bottom.png" alt="footer" />
</div>

</body>

</html>

and the css:

Code: Select all

html, body {
    margin:0;
    border:0;
    padding:0;
    height:100%;
    width:100%;
    /*max-height:100%;*/
    overflow:hidden;
    background:#000000 url('gfx/bg.jpg');
    font:10pt verdana,arial;
    text-align:center;
}
* html body { padding:120px 0 50px 0; }  /* for internet explorer */
#container {
    position:fixed;
    top:131px;
    left:0;
    bottom:39px;
    right:0;
    margin:0 155px 0 155px;
    padding:0;
    overflow:hidden;
    /*background:#ffffff url('gfx/center.png') repeat-y center;*/
    text-align:left;
}
* html #container { height:100%;width:100%; }
.content {
    margin:0;
    padding:0 20px 0 30px;
    overflow:auto;
    background:#ffffff url('gfx/center.png') repeat-y center;
    /*min-width:978px;*/
}
* html .content { width:940px;height:80% }
#header {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:131px;
    overflow:hidden;
    padding:0;
    margin:0;
}
* html #header { height:120px; }
#footer {
    position:absolute; 
    bottom:0;
    left:0;
    width:100%;
    height:39px; 
    overflow:hidden; 
}
* html #footer { height:50px; }
#footer img { border:0; }

moojoo · #2 Jul 24th, 2007, 15:53

http://www.newguyinennis.com/samples...s/faux_frames/

c010depunkk · #3 Jul 24th, 2007, 17:25

ok, tx! I'll check that out tomorrow.

c010depunkk · #4 Jul 25th, 2007, 13:55

The faux design is working ok, the only problem is that the 'frame' can't have a set height, it needs to stretch from 131 pixels from the top to 39 pixels above the bottom... How do I do that? Here's a link: http://www.modus-hightech.de/valid/faux and here's my code:

HTML:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<html>
<head>
<title>modus High-tech electronics</title>

<link rel="stylesheet" href="layout.css" media="screen" type="text/css" />
<!--[if IE]><link rel="stylesheet" href="ie6.css" media="screen" type="text/css" /><![endif]-->

<?php include("flashdetect.mo"); ?>

</head>

<body>

<div id="container">

<div id="masthead">
    <?php echo("<script type=\"text/javascript\">var lang = \"".$_SESSION['lang']."\";</script>");?>
    <script type="text/javascript">
        if (flashpresent) {
            document.write("<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0' id='header' width='978' height='131'> <param name= 'movie' value='gfx/header_final.swf'> <param name='bgcolor' value='#FFFFFF'> <param name='quality' value='high'> <param name='allowscriptaccess' value='samedomain'> <embed type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' width='978' height='131' name='header' src='gfx/header_final.swf' bgcolor='#FFFFFF' quality='high' swLiveConnect='true' allowScriptAccess='samedomain'></embed></object>");
        } else {
            document.write("<img src=\"gfx/head.jpg\" alt=\"modus High-tech GmbH\" />");
        }
    </script>
</div>

<div id="contentFrame">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec adipiscing nibh nec nunc. Sed ac lacus sit amet mauris facilisis posuere. Nullam turpis. Aenean vestibulum, sem eu faucibus nonummy, lorem nisi blandit ipsum, a ultrices mauris arcu vel magna. Proin est. Nam tempor. Fusce ut diam in felis luctus luctus. Duis facilisis lobortis nisl. Integer ligula enim, adipiscing in, volutpat non, interdum et, felis. In a pede. Integer dolor nunc, gravida nec, accumsan non, vulputate eget, velit. Praesent eu massa sit amet leo commodo tincidunt. Aenean quis nisl. Praesent orci. Proin et sapien et dolor ullamcorper eleifend. Mauris faucibus facilisis purus. Integer diam lorem, congue sit amet, adipiscing in, mollis sit amet, neque. Ut eu lacus id velit bibendum imperdiet. In pharetra quam sagittis felis.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec adipiscing nibh nec nunc. Sed ac lacus sit amet mauris facilisis posuere. Nullam turpis. Aenean vestibulum, sem eu faucibus nonummy, lorem nisi blandit ipsum, a ultrices mauris arcu vel magna. Proin est. Nam tempor. Fusce ut diam in felis luctus luctus. Duis facilisis lobortis nisl. Integer ligula enim, adipiscing in, volutpat non, interdum et, felis. In a pede. Integer dolor nunc, gravida nec, accumsan non, vulputate eget, velit. Praesent eu massa sit amet leo commodo tincidunt. Aenean quis nisl. Praesent orci. Proin et sapien et dolor ullamcorper eleifend. Mauris faucibus facilisis purus. Integer diam lorem, congue sit amet, adipiscing in, mollis sit amet, neque. Ut eu lacus id velit bibendum imperdiet. In pharetra quam sagittis felis.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec adipiscing nibh nec nunc. Sed ac lacus sit amet mauris facilisis posuere. Nullam turpis. Aenean vestibulum, sem eu faucibus nonummy, lorem nisi blandit ipsum, a ultrices mauris arcu vel magna. Proin est. Nam tempor. Fusce ut diam in felis luctus luctus. Duis facilisis lobortis nisl. Integer ligula enim, adipiscing in, volutpat non, interdum et, felis. In a pede. Integer dolor nunc, gravida nec, accumsan non, vulputate eget, velit. Praesent eu massa sit amet leo commodo tincidunt. Aenean quis nisl. Praesent orci. Proin et sapien et dolor ullamcorper eleifend. Mauris faucibus facilisis purus. Integer diam lorem, congue sit amet, adipiscing in, mollis sit amet, neque. Ut eu lacus id velit bibendum imperdiet. In pharetra quam sagittis felis.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec adipiscing nibh nec nunc. Sed ac lacus sit amet mauris facilisis posuere. Nullam turpis. Aenean vestibulum, sem eu faucibus nonummy, lorem nisi blandit ipsum, a ultrices mauris arcu vel magna. Proin est. Nam tempor. Fusce ut diam in felis luctus luctus. Duis facilisis lobortis nisl. Integer ligula enim, adipiscing in, volutpat non, interdum et, felis. In a pede. Integer dolor nunc, gravida nec, accumsan non, vulputate eget, velit. Praesent eu massa sit amet leo commodo tincidunt. Aenean quis nisl. Praesent orci. Proin et sapien et dolor ullamcorper eleifend. Mauris faucibus facilisis purus. Integer diam lorem, congue sit amet, adipiscing in, mollis sit amet, neque. Ut eu lacus id velit bibendum imperdiet. In pharetra quam sagittis felis.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec adipiscing nibh nec nunc. Sed ac lacus sit amet mauris facilisis posuere. Nullam turpis. Aenean vestibulum, sem eu faucibus nonummy, lorem nisi blandit ipsum, a ultrices mauris arcu vel magna. Proin est. Nam tempor. Fusce ut diam in felis luctus luctus. Duis facilisis lobortis nisl. Integer ligula enim, adipiscing in, volutpat non, interdum et, felis. In a pede. Integer dolor nunc, gravida nec, accumsan non, vulputate eget, velit. Praesent eu massa sit amet leo commodo tincidunt. Aenean quis nisl. Praesent orci. Proin et sapien et dolor ullamcorper eleifend. Mauris faucibus facilisis purus. Integer diam lorem, congue sit amet, adipiscing in, mollis sit amet, neque. Ut eu lacus id velit bibendum imperdiet. In pharetra quam sagittis felis.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec adipiscing nibh nec nunc. Sed ac lacus sit amet mauris facilisis posuere. Nullam turpis. Aenean vestibulum, sem eu faucibus nonummy, lorem nisi blandit ipsum, a ultrices mauris arcu vel magna. Proin est. Nam tempor. Fusce ut diam in felis luctus luctus. Duis facilisis lobortis nisl. Integer ligula enim, adipiscing in, volutpat non, interdum et, felis. In a pede. Integer dolor nunc, gravida nec, accumsan non, vulputate eget, velit. Praesent eu massa sit amet leo commodo tincidunt. Aenean quis nisl. Praesent orci. Proin et sapien et dolor ullamcorper eleifend. Mauris faucibus facilisis purus. Integer diam lorem, congue sit amet, adipiscing in, mollis sit amet, neque. Ut eu lacus id velit bibendum imperdiet. In pharetra quam sagittis felis.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec adipiscing nibh nec nunc. Sed ac lacus sit amet mauris facilisis posuere. Nullam turpis. Aenean vestibulum, sem eu faucibus nonummy, lorem nisi blandit ipsum, a ultrices mauris arcu vel magna. Proin est. Nam tempor. Fusce ut diam in felis luctus luctus. Duis facilisis lobortis nisl. Integer ligula enim, adipiscing in, volutpat non, interdum et, felis. In a pede. Integer dolor nunc, gravida nec, accumsan non, vulputate eget, velit. Praesent eu massa sit amet leo commodo tincidunt. Aenean quis nisl. Praesent orci. Proin et sapien et dolor ullamcorper eleifend. Mauris faucibus facilisis purus. Integer diam lorem, congue sit amet, adipiscing in, mollis sit amet, neque. Ut eu lacus id velit bibendum imperdiet. In pharetra quam sagittis felis.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec adipiscing nibh nec nunc. Sed ac lacus sit amet mauris facilisis posuere. Nullam turpis. Aenean vestibulum, sem eu faucibus nonummy, lorem nisi blandit ipsum, a ultrices mauris arcu vel magna. Proin est. Nam tempor. Fusce ut diam in felis luctus luctus. Duis facilisis lobortis nisl. Integer ligula enim, adipiscing in, volutpat non, interdum et, felis. In a pede. Integer dolor nunc, gravida nec, accumsan non, vulputate eget, velit. Praesent eu massa sit amet leo commodo tincidunt. Aenean quis nisl. Praesent orci. Proin et sapien et dolor ullamcorper eleifend. Mauris faucibus facilisis purus. Integer diam lorem, congue sit amet, adipiscing in, mollis sit amet, neque. Ut eu lacus id velit bibendum imperdiet. In pharetra quam sagittis felis.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec adipiscing nibh nec nunc. Sed ac lacus sit amet mauris facilisis posuere. Nullam turpis. Aenean vestibulum, sem eu faucibus nonummy, lorem nisi blandit ipsum, a ultrices mauris arcu vel magna. Proin est. Nam tempor. Fusce ut diam in felis luctus luctus. Duis facilisis lobortis nisl. Integer ligula enim, adipiscing in, volutpat non, interdum et, felis. In a pede. Integer dolor nunc, gravida nec, accumsan non, vulputate eget, velit. Praesent eu massa sit amet leo commodo tincidunt. Aenean quis nisl. Praesent orci. Proin et sapien et dolor ullamcorper eleifend. Mauris faucibus facilisis purus. Integer diam lorem, congue sit amet, adipiscing in, mollis sit amet, neque. Ut eu lacus id velit bibendum imperdiet. In pharetra quam sagittis felis.</p>
</div>

</div>

<div id="footer">
    <img src="gfx/bottom.png" alt="" />
</div>

</body>
</html>

CSS main:

Code: Select all

body {
    margin:0;
    padding:0;
    background:#000000 url('gfx/bg.jpg');
    font:10pt verdana,arial;
    text-align:center;
}
#container {
    width:978px;
    height:100%;
    margin:0 auto;
    padding:5px 0;
    background:#ffffff url('gfx/center.png') repeat-y center;
}
#masthead {
    position:fixed;
    top:0;
    height:131px;
    width:978px;
    padding:0;
    text-align:center;
    z-index:2;
}
#contentFrame {
    margin:131px 20px 0 0;
    z-index:1;
    padding:2px 20px 2px 30px;
    height:500px;
    overflow:auto;
    text-align:left;
}
#footer {
    position:absolute; 
    bottom:0;
    left:0;
    width:100%;
    height:39px;
    overflow:hidden;
}
* html #footer { height:50px; }
#footer img { border:0; }

and IE css:

Code: Select all

#container {
    padding:0;
}
#contentFrame {
    margin:5px 20px 5px 0;
}

Paramiliar · #5 Jul 25th, 2007, 16:07

unsure if this will work as unable to test but try setting a height of 100% on the divider and the bottom margin to the height of your footer. Personally I would have not used the scrollbar divider and just let the content flow down the page

c010depunkk · #6 Jul 26th, 2007, 06:31

Figured it out myself: http://modus-hightech.de/valid/faux2/
I ended up using absolute positioning for the two center 'frames' but it works, also in IE!

dcpweb · #7 Jul 31st, 2007, 21:24

Hi,

In my opion aviod using iframes if possible. iframes may provide a better user interace for long scrolling pages but when it come to website SEO optimisation iframes are not good. I would recommend you remove Iframes from your website http://www.modus-hightech.de as google / other search engines will perform a better crawl of your website for displaying seach results. I have also looked at the way you have implimented flash, although a 6 - 12 months ago this would be ok now with the latest versions of Internet Explorer you will find a problem which requires the user to click on the flash once to activate then the again to user the button controls, this problem can be fixed by simply using an external javascript file to load the flash into your website page.

P Shah - www.dcpweb.co.uk

c010depunkk · #8 Aug 1st, 2007, 06:30

I know, my friend. That's why I'm working on a redesign. The site was written about two years ago (by someone else) and it took so long for our marketing division to give us the content that the site was out-of-date by the time it finally went online (about half a year ago).

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Iframe background	goangus	Web Page Design	0	Apr 22nd, 2008 12:26
[SOLVED] refresh a different iframe once an iframe elsewhere has loaded	cosmicbdog	JavaScript Forum	1	Jan 25th, 2008 01:50
Can a jsp file in an IFrame calls a javascript function outside of the IFrame	jadeite100	JavaScript Forum	0	May 31st, 2007 14:29
mimic table rows	flann	Web Page Design	5	Apr 13th, 2007 23:30
<iframe>	u2orange	Web Page Design	10	Nov 29th, 2003 20:06

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
mimic iframe