HTML and CSS Reference
In-Depth Information
Replace Frames with CSS Positions
Convert framesets to single pages.
Code View:
<frameset cols="20%,80%">
<frame frameborder="1" src="navframe.html" name="navframe"
scrolling="auto" />
<frame frameborder="1" src="contentframe.html"
name="contentframe"
scrolling="auto" />
<noframes>
<body>
<p>
Go away! We don't want your kind here.
</p>
</body>
</noframes>
</frameset>
<div id="outer">
<div id="nav" style="border: 1; overflow: scroll; width: 20%">
navigation links here...
</div>
<div id="content"
style="border: 1; overflow: scroll; width: 80%">
<p>
Howdy neighbor! Come on in.
</p>
</div>
</div>
Motivation
Frames were a bad idea that hasn't improved in the ten years since they were invented. They are a usability
disaster. They make it extremely hard to bookmark or return to a particular page. They make it hard to save a
page or print it. They break the connection between the URL displayed in the title bar and the content on the
page. They take control away from the user, because frame sizes are set by the page author. Users cannot
resize individual frames to fit their needs. Scroll bars take up valuable screen real estate.
Frames confuse search engines and reduce your Google rank. Furthermore, when users do find a relevant
framed page with a search engine, they're likely to come into the framed page directly, rather than the
frameset, thus completely bypassing your carefully designed frame layout.
Browsers have partially compensated for some of these flaws with tools such as the This Frame context menu in
Firefox. However, this is still a limited solution. Furthermore, when users take advantage of such functionality,
they may well break a site that depends on having all frames in a set visible at once. Critical navigation or other
Search WWH ::
Custom Search