Welcome to WebmasterWorld Guest from 3.80.60.248

Forum Moderators: not2easy

Message Too Old, No Replies

CSS and IFrame in 1 website

I am having problems wit CSS and my IFrame

     
9:12 pm on Jan 22, 2008 (gmt 0)

New User

10+ Year Member

joined:Jan 22, 2008
posts: 1
votes: 0


First off thankyou all for any help you can give me. I am new to CSS but willing to learn. I am using a combination of code that was found online and trying to expand on it to make it work the way I want until I can get better with CSS. Right now my knowledge of CSS is what i have learned from reviewing code, friends have shown me and books. The problem is this. The CSS code allows for css frame emulation but it doesn't allow for trageting the frames. So I set the code up to take an IFRAME to use for targeting. Seems to work fine but it will not go all the way to the right to to the bottom of the screen. What do you think? Here is the code...?

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title> page title </title>

<style type="text/css">
/* commented backslash hack v2 \*/
* html {overflow:hidden;}
/* end of hack */

body {background:url("menu_body.gif"); background-repeat:repeat-y; background-color:#f8f8f8; background-attachment:fixed; margin:0; padding:0 10px 0 10px; border:0; height:100%;}

* html body {overflow-y:auto;}

#menu {position:fixed; display:block; top:160px; left:0px; width:130px; height:400px; background-color:transparent; z-index:20;}

* html #menu {position:absolute;}

#hand {position:fixed; display:block; top:185px; left:0px; width:207px; height:250px; background-color:transparent; z-index:20;}

* html #hand {position:absolute;}

#face {position:fixed; display:block; top:0; left:0; width:590px; height:210px; background-color:transparent; z-index:20;}

* html #face {position:absolute;}

#shadow {position:fixed; display:block; top:156px; left:98px; width:490px; height:248px; background-color:transparent; z-index:1;}

* html #shadow {position:absolute; z-index:-1;}

body {font-family:arial, sans-serif; font-size:12px; letter-spacing:1px;}

#content {position:relative; display:block; margin:0 0 0 131px; background:transparent; overflow:hidden; letter-spacing:.08em; z-index:10; height:100%}

.text {display:block; padding:0px 0px 0px 0px; width:100%; margin-left:-8px; text-align:justify; float:left; color:#000;}
.text {width/* */:/**/100%; width: /**/100%; }
.text img {float:right;}

#topper {position:fixed; display:block; top:0; right:0; width:100%; height:156px; background:url("menu_top.gif"); background-repeat:repeat-x; font-size:40px; font-style:italic; line-height:80px; font-family:times new roman, serif; overflow:hidden; color:#000; z-index:12;}

* html #topper {position:absolute; right:0;right/* */:/**/17px; right: /**/17px;}

#topper img {float:right;}

.clear {clear:both; height:1px;}

#foot {display:block; padding:10px 10px 0 100px; text-align:justify; background:transparent; font-size:10px; color:#000; text-align:center;}

.h4 {font-size:40px; color:rgb(250,111,0); margin-bottom:5px; border-bottom:1px solid #000; letter-spacing:1px; font-weight:bold;}

#rl {position:fixed; display:block; top:-10px; left:10px; width:600px; height:130px; font-size:60px; line-height:90px; font-family:arial, verdana, sans-serif; overflow:hidden; color:rgb(250,111,0); z-index:25; font-weight:bold;}

* html #rl {position:absolute;}

#rl div {color:#000; font-size:30px; margin-top:-40px;}

.bold {font-size:14px; font-weight:bold;}

#pad {display:block; height:154px;}

#adsie {clear:both; text-align:center;}

</style>

</head>

<body scroll="no">
<div>
<div id="topper">
</div>

<div id="face"><img src="menu_face.gif" alt="" title="" />
</div>

<div id="hand"><img src="menu_hand.gif" alt="" title="" />
</div>

<div id="menu">
<a href="http://www.example.com" target="content">Sausage</a>
</div>

<div id="content" style="left: 0px; top: 0px; height: 595px" >

<div id="pad">
</div>

<div class="text">
<iframe name="contentforpage" src="test.html" style="height:100%; width:100%">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
</div><!-- end of col1 -->

</div> <!--content-->

</div>

</body>

</html>

[edited by: SuzyUK at 10:01 pm (utc) on Jan. 22, 2008]
[edit reason] examplified url [/edit]

9:38 pm on Jan 22, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 18, 2007
posts:671
votes: 0


You have a mistaken mindset for the issue at hand. The main question should be why do you want to use a frame (or iframe). There are major problems with using frames, such as accessibility, and search engine readability.

CSS itself does not emulate frames in any way. All it does is give the option to add borders to things... I'm not sure if that's what you mean.

Generally speaking, almost all sites no longer use frames in favor of something called "server side programming". Web servers run code to help your page add special features and add dynamic content, languages such as PHP, Pearl and ASP are the most common, but you could even run C++, just that it's not designed for webpages and the internet so much.

One little, yet very popular and common feature of Server side code is something called "server side includes", which means that in my HTML code, I can use a template for the page, and/or certain elements, without having to re-write them every time on each page. The only downside to this over frames, is that the entire page needs to be loaded again. Fortunately, caching makes it so that it does not add a significant load time increase!

<php include header>
this is my content, whee!
<php include footer>

There would be separate files for header and footer, which could also refer to other includes, such as the header including
starting header code
<php include navigation_links>
remaining header code

There's more than just one way to use these includes too. My exmaples were just pseudocode, not actual PHP.
This way it's easy to creature very advanced pages, without having to deal with the mess of frames.

Other information:
For starters, you should question if you want to use that XHTML doctype. Chances are the answer's no. XHTML is a special subset of HTML which is only needed for certain applications typically involving XML. It is not an advancement of HTML, and it is used way too often than it needs to be. It also requires you to code a bit more strictly.
The second part of your doctype says that it's the strict rendition. strict does not allow the use of iframes (or frames), among other things, so it would not be appropriate to use. Transitional is a good choice. Look up doctypes on this forum or online to find the proper one.

Secondly, I noticed many CSS hacks being used. This is generally a bad idea, as they may change functionality when a browser is updated, among other problems (such as invalid code by the W3C)
To fix Internet Explorer (the only browser that has many, and serious rendering errors), it supports the use conditional comments, enabling you to avoid having to use hacks for it at all.

Another issue which isn't very bad, but should be at least examined or thought about now or in the future, is the measurement used for font size. Right now you're using pixels, which is a problem for a few reasons:
Firstly, Internet Explorer 6 won't let people change their font size if you use pixels; secondly, it overrides their default font size, which may be smaller or larger than what you specified. Due to different screen resolutions, as well as different vision qualities, people will customize their default font size. A person with bad vision and 1600x1200 resolution may need a 4-10 times larger font than a person with 800x600 resolution and fresh eyes. To make use of default font size, specify font sizes RELATIVE to their default, by using the EM unit. 1 em is equal to their default font size.

I also noticed various thing which may be messy or problematic, such as absolute positioning. They aren't bad if implemented well, or on their own, but combined with other things they may make a lousy page.

Conclusion: I highly recommend you do not copy any code from other websites if you don't know how it works (not just what it does)! It's like playing a (sports) game professionally (or even casually) if you don't know the rules.
Keep learning the basics of CSS, and you'll be up and about in no time. It does not take long to learn.
To help ensure you write clean and proper code, use the W3C validation service. The W3C is an online organization which decide standards as to how pages should be displayed/coded (the founder is also the founder of the internet itself!).
use this to validate HTML: [validator.w3.org...]
[jigsaw.w3.org...]
With your current code, I assume you'd get some validation errors, but that's partially because you were copying from other people.

[edited by: Xapti at 10:02 pm (utc) on Jan. 22, 2008]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members