Framesets

bjbaughcum03 · #1 Nov 11th, 2007, 19:03

ok...ive made a frameset....i need to find out how to make it scroll left to right when minimized, instead of shrinkin my frames to make them fit..anyone know how to accomplish this?

here is the code

Code: Select all

<!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=utf-8" />
<title>Home</title>
</head>
<frameset rows="*" cols="300,1024,300" framespacing="0" frameborder="yes" border="1" bordercolor="#000000">
  <frame src="LeftFrame.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
  <frameset rows="85,*" cols="*" frameborder="yes" border="1" framespacing="0">
    <frame src="TopFrame.html" name="topFrame" frameborder="no" scrolling="No" noresize="noresize" id="topFrame"  title="topFrame" />
    <frame src="MainFrame.html" name="mainFrame" scorlling="Auto" noresize="noresize" id="mainFrame" title="mainFrame"/>
  </frameset>
  <frame src="RightFrame.html" name="rightFrame" scrolling="No" noresize="noresize" id="rightFrame" title="rightFrame" />
</frameset>
<noframes><body>
</body>
</noframes></html>

alexgeek · #2 Nov 11th, 2007, 19:05

Why are you using frames? There is no good reason to.
And I'm sure everyone here will back me up.

bjbaughcum03 · #3 Nov 11th, 2007, 19:16

well what else could i do to make this layout work? i mean, whats the best way to do it then?

Stuart · #4 Nov 11th, 2007, 21:09

Alex is right, and I back him up 100%: Frames are bad! They are an annoying way to divide content, or display another site inside yours, which is not good anyways (usually against copyright/patenting laws). If you want to divide your page, use divs that are styled with css.
However, in order for us to get an idea of what you are attempting, posting a link to your site would be good. Please do so...

MikeHopley · #5 Nov 11th, 2007, 22:37

Quote:

Originally Posted by bjbaughcum03

well what else could i do to make this layout work? i mean, whats the best way to do it then?

Use PHP includes. These give you all the benefits of frames, and have none of their drawbacks. And once you've learned to use includes, you can save yourself even more time with variables.

bjbaughcum03 · #6 Nov 11th, 2007, 22:54

well ive pretty much got it straightened out now...but it has a few bugs..when i few it in firefox it doesnt display my right column...and in IE7 it doesnt display my left column...

here is my code...

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<metta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<style type="text/css">
#header{
  margin: 0px 0px 0px 0px;
  background: #c8c8c8;
  width: 1024px;
}
#leftFrame{
  position: absolute;
  width: 200px;
  background: #ffff66;
  padding-bottom: 10px;
  height: 600px;
}
#mainFrame{
  margin-left: 200px;
  width: 624px;
  background: #c8c8c8;
  padding-bottom: 10px;
  height: 600px;
}
#rightFrame{
  position: absolute;
  width: 200px;
  background: #ffff66;
  padding-bottom: 10px;
  height: 600px;
}
p{
  font-size: 14px;
  margin: 0px 10px 10px 10px;
}
</style>
</head>
 
<body>
 
<div id="header">
  <div align="center"><img name="blahblah" src="blahblah.jpg" width="1024" height="85" border="0" id="blahblah" /></div>
</div>
 
<div id="leftFrame">
  <p>This is my left frame if all went well</p>
</div>
 
<div id="mainFrame">
  <p>This is my main frame</p>
</div>
 
<div id="rightFrame">
  <p>This is my right frame hopefully</p>
</div>
 
</body>
</html>

i havent had a chance to upload this to my actual site yet..but when i do, ill be sure to post the link..

bjbaughcum03 · #7 Nov 11th, 2007, 23:37

ok ive got it working somewhat now, but when i minimize my browser, my columns drop down below the other...how can i fix that...

here is my code with the changes ive made...

Code: Select all

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<metta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<style type="text/css">
#header{
  margin: 0px 0px 0px 0px;
  background: #c8c8c8;
  width: 1024px;
}
#leftFrame{
  margin-right: auto;
  margin-left: 0px;
  width: 200px;
  background: #ffff66;
  padding-bottom: 0px;
  height: 600px;
}
#mainFrame{
  margin-right: auto;
  margin-left: 0px;
  width: 624px;
  background: #c8c8c8;
  padding-bottom: 0px;
  height: 600px;
}
#rightFrame{
  margin-left: 0px;
  margin-right: auto;
  width: 200px;
  background: #ffff66;
  padding-bottom: 0px;
  height: 600px;
}
p{
  font-size: 14px;
  margin: 0px 10px 10px 10px;
}
</style>
</head>
 
<body>
 
<div id="header">
  <div align="center"><img name="blahblah" src="blahblah.jpg" width="1024" height="85" border="0" id="blahblah" /></div>
</div>
 
<div id="leftFrame">
  <p>This is my left frame if all went well</p>
</div>
 
<div id="mainFrame">
  <p>This is my main frame</p>
</div>
 
<div id="rightFrame">
  <p>This is my right frame hopefully</p>
</div>
 
</body>

Monie · #8 Nov 12th, 2007, 00:40

Didn't have any problem when I tested your code?
Tested with FF and IE!

bjbaughcum03 · #9 Nov 12th, 2007, 01:18

Quote:

Originally Posted by monie

Didn't have any problem when I tested your code?
Tested with FF and IE!

Really?...i cant get it to quite work...it works fine in a full screen..but when u shrink the window...the columns go to dropping..

Monie · #10 Nov 12th, 2007, 01:23

when I resize my window, nothing happen!
All of your div sits at the left side of my screen.. is it what your page suppose to be..?

bjbaughcum03 · #11 Nov 12th, 2007, 01:26

no..it should be 3 columns..what i really want is the 3 columns, and no shrinking when you shrink your browser...id like to have a scroll bar instead

Monie · #12 Nov 12th, 2007, 01:30

could you post a screen shot of how your page will looks like?

bjbaughcum03 · #13 Nov 12th, 2007, 01:41

i would, but when i view on my work computer is doesnt display right..it comes up as 1 column, and 3 rows...i want it the other way...

Monie · #14 Nov 12th, 2007, 01:59

It basically your positioning problem!

I have an example of a simple CSS layout page here that you could look at it and study how I position every element. If you want, I'll post them here

Marc · #15 Nov 12th, 2007, 20:25

To stop this, usually i create a container to fit my columns in...

Code: Select all

#container {
width: (Width of all 3 columns + about 10px);
}

Hope that helps!

Monie · #16 Nov 13th, 2007, 00:51

Here is the CSS Sample Layout I promise you:

HTML: Select all

<!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=utf-8" />
<title>MonieWeb[2007] @Copyright Reserved 2007</title>
<style type="text/css">
<!--
body {
    margin: 0;
}
#container {
    width: 80%;
    margin: 0 auto;
}
#header {
    width: auto;
    height: 140px;
    background-color: #0000FF;
}
#left_container {
    float: left;
    width: 195px;
    height: 800px;
    margin: 5px 25px 5px 0;
    background-color: #00FF00;
}
#centre_container {
    margin: 5px 200px;
    width: auto;
    height: 800px; /*set this to auto if you want the height depends on the content*/
    background: red;
    }
#right_container {
    margin: 5px 0 5px 5px;
    float: right;
    width: 195px;
    height: 800px;
    background-color:#00FF00;
}
#footer {
    height: 170px;
    width: auto;
    clear: both;

    background-color: #0000FF;  
}
-->
</style>
</head>

<body>
<div id="container">
    <div id="header">My Header</div>
    <div id="left_container">This is a fixed height left container</div>
    <div id="right_container">This is a fixed height right container</div>
    <div id="centre_container">
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
    </div>        
    <div id="footer" >Footer</div>
</div>
</body>
</html>

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Framesets