Jump to content

How Do I Create 2 Vertical Areas In A Page (frames)


richiej
 Share

Recommended Posts

Hi,I was designing a web page and using frames to link names on the left vertical column to bring up a page in the right vertical column. I found out that frames were outmoded and need to find a new way to do this. There are a few excellent sites that use a frame like application to do this, but it is not frames. I have looked at the CSS for these sites and cannot figure out if that was used to control the left/right display. If CSS controls this, then I'll learn it but looking thru CSS chapters in HTML references, they don't mention anything about frames-type applications.Is CSS being used for this purpose? I've ignored CSS because I have put in my own editing (fonts, style,etc..) for each of my elements.Thanks, Rich J.

Link to comment
Share on other sites

You should learn CSS, it helps your pages load faster, saves bandwidth on your web host and makes your code cleaner in general.The pages that appear to load links from a left column to a right column are actually reloading the whole page. Except that it loads really quickly because it's using CSS stylesheets which are already cached by the browser.

Link to comment
Share on other sites

did they link to external pages? or was it that the content changed, depending on link selected, similar to the scroll box example i produce early this week.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">#scrollbox {width: 300px; height: 300px; overflow:auto; border: 2px solid red;}#item1 {display: block;}#item2, #item3 {display: none;}#item2 {color:#3366FF;}#item3 {color: #FF6600;}</style><script type="text/javascript"><!--//function runthis(y) { var d = "item"; //div name without number //find the number of inner divs within scrollbox div var scrollbox_div = document.getElementById("scrollbox"); var inner_divs= scrollbox_div.getElementsByTagName("DIV"); var total_divs = inner_divs.length; //clear all inner divs for(i=1;i<=total_divs;i++) { if (document.getElementById(d+i)) { document.getElementById(d+i).style.display="none"; } } //make selected div visible var x = document.getElementById(d+y).style; x.display="block"; } //--></script> </head><body><a href="#" onclick="runthis(1)">show Item1/Home Page</a><br /><a href="#" onclick="runthis(2)">show Item2</a><br /><a href="#" onclick="runthis(3)">show Item3</a><div id="scrollbox"><div id="item1"> <p>Lorem ipsum dolor 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. Lorem ipsum dolor 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, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui.</p> </div><div id="item2"> <p>Lorem ipsum dolor 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. Lorem ipsum dolor 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, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui.</p> </div><div id="item3"> <p>Lorem ipsum dolor 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. Lorem ipsum dolor 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, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui.</p> </div></div></body></html>

Link to comment
Share on other sites

did they link to external pages? or was it that the content changed, depending on link selected, similar to the scroll box example i produce early this week.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">#scrollbox {width: 300px; height: 300px; overflow:auto; border: 2px solid red;}#item1 {display: block;}#item2, #item3 {display: none;}#item2 {color:#3366FF;}#item3 {color: #FF6600;}</style><script type="text/javascript"><!--//function runthis(y) { var d = "item"; //div name without number //find the number of inner divs within scrollbox div var scrollbox_div = document.getElementById("scrollbox"); var inner_divs= scrollbox_div.getElementsByTagName("DIV"); var total_divs = inner_divs.length; //clear all inner divs for(i=1;i<=total_divs;i++) { if (document.getElementById(d+i)) { document.getElementById(d+i).style.display="none"; } } //make selected div visible var x = document.getElementById(d+y).style; x.display="block"; } //--></script> </head><body><a href="#" onclick="runthis(1)">show Item1/Home Page</a><br /><a href="#" onclick="runthis(2)">show Item2</a><br /><a href="#" onclick="runthis(3)">show Item3</a><div id="scrollbox"><div id="item1"> <p>Lorem ipsum dolor 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. Lorem ipsum dolor 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, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui.</p> </div><div id="item2"> <p>Lorem ipsum dolor 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. Lorem ipsum dolor 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, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui.</p> </div><div id="item3"> <p>Lorem ipsum dolor 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. Lorem ipsum dolor 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, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui.</p> </div></div></body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...