Creating a frame
Adding content to left & right panel
Open both left_frame.html and right_frame.html in a text editor.
Inside left_frame.html add the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head><body> <h3>Left Side Navigation</h3> <p><a href="http://www.yahoo.com" target="right">Yahoo!</p> <p><a href="right_frame.html" target="right">Main Content</p> </body> </html>
Anchor tags— target attribute
Remember, we gave our right panel a name of right, which is used above. When we load our frameset, click the Yahoo link and Yahoo’s home page will load into the right panel. It doesn’t matter whether you link to another website or to a web page in your website, you must use a target attribute with the appropriate value.
Next, copy the following into right_frame.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head><body> <h3>Ryan's Page</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.</p> <p>IMAGE HERE PROBABLY</p>
</body> </html>
Save your file and preview the results.
Frame loading left and right panels
Here’s how it works
Let’s summarize how this works: when you load frame.html in your browser, it reads your frameset tag. The frameset tag determines whether to display the frameset in columns or rows. Then, it looks for the HTML files which make up the frame, in our case, left_frame.html and right_frame.html and requests these from your server. The frameset then loads these files into one frame. The following illustration depicts this concept:
We can see the final result below:
Difference between frameset and frames
Framesets are considered a container or parent file which contains one or more frames. Frames are the individual HTML files that are loaded into the browser.
Site Maintenance
This can become a very time consuming and tedious process. Each new file you create, you must make sure you link properly in left_side.html so that the file loads into right_content.html. Also, understand you can add any HTML element you want to left or right frame. The only difference is how you create the frameset page and how we link to the right frame.
Resizing Issue
If we position our mouse in the middle sidebar:
If we drag the sidebar to the left or right it would move. There is a simple fix, modify your frameset tag:
<frameset cols="180, *">
<frame src="left_side.html" name="left" noresize>
<frame src="main_content.html" name="main">
</frameset>
Save your changes and preview the results.
Frameset bug in Internet Explorer
There’s a rather interesting bug relating to frames and Internet Explorer. For example, in left_frame.html, enter enough content to force a vertical scrollbar, and then the frameset in Internet Explorer and you see this:
The reason this is a puzzling anomaly is we set a width on the left frame with more than enough room to compensate for the text being shown, without a horizontal scroll bar being needed. After searching Google, here’s what happens: when Internet Explorer displays a frameset, if one of the frames, in our case, left frame has too much content height to fit, as expected, a vertical scrollbar appears. Unfortunately, Internet Explorer also considers the vertical strip under the vertical scrollbar as additional space. The result is Internet Explorer stretches the left frame underneath the scroll bar, thus, the horizontal scroll bar.
Solutions
We have two:
- Remove our DOCTYPE, which will make our page invalid
- Add an attribute, scrolling="yes" to the left frame tag
We’ll choose the second option; just add the following code to the frameset page:
<frameset cols="180, *">
<frame src="left_side_horizontal_scroll.html" name="left" noresize scrolling="yes">
<frame src="main_content.html" name="main">
</frameset>
Save your file and preview the results.
Internet Explorer Horizontal Scroll Fix
Summary
In this article you created a frame layout. You also learned a bit about:
- Using a text editor to create the frameset
- How frame work
- Targeting links to one specific frame
- A resizing issue regarding frames and a solution
- A browser anomaly regarding Internet Explorer, along with two solutions
Take the knowledge gained here and create any frame of your imagination!
If you have questions, contact me.