richiej Posted July 8, 2009 Share Posted July 8, 2009 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 More sharing options...
Ingolme Posted July 8, 2009 Share Posted July 8, 2009 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 More sharing options...
dsonesuk Posted July 8, 2009 Share Posted July 8, 2009 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 More sharing options...
richiej Posted July 9, 2009 Author Share Posted July 9, 2009 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 More sharing options...
richiej Posted July 9, 2009 Author Share Posted July 9, 2009 I think INGOLME has it right. I did not know that the whole page was reloaded. I'll learn CSS. The links I want to load in the right panel are from external links.Thanks,Rich j. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.