html page scroll

I am trying to create a simple html web page using frames, best described as follows:

<frameset cols="*,180,860,*" border="2">
<frame src="left.html" scrolling="no" marginwidth="0" marginheight="0">
<frame src="MainMenu.html" scrolling="no" marginwidth="0" marginheight="0">

<frameset rows="120,*" border="3" >
<frame src="Title-bar.html" scrolling="no" marginwidth="0" marginheight="0" noresize="noresize">
<frame src="aboutus.html" name="MainFrame" scrolling="no" marginwidth="0" marginheight="0">
</frameset>
</frameset>

I have set all frames to be non scrolling, however I want to enable the browser to scroll the page as a whole, just like the LinuxQuestions page I'm typing in now.

i'm not saying what you're doing there is wrong, but it's a common rule these days that html layout is best left to CSS. boxmodel is the buzzword.

I was reluctant to reveal my ignorance, and anticipated my approach may be unorthordox. Thank you for you deplomacy. I am looking at tutorials on boxmodels, but achieving the structure described above using css boxes eludes me so far.

Originally Posted by Johng I am trying to create a simple html web page using frames, best described as follows: <frameset cols="*,180,860,*" border="2"> <frame src="left.html" scrolling="no" marginwidth="0" marginheight="0"> <frame src="MainMenu.html" scrolling="no" marginwidth="0" marginheight="0"> <frameset rows="120,*" border="3" > <frame src="Title-bar.html" scrolling="no" marginwidth="0" marginheight="0" noresize="noresize"> <frame src="aboutus.html" name="MainFrame" scrolling="no" marginwidth="0" marginheight="0"> </frameset> </frameset> I have set all frames to be non scrolling, however I want to enable the browser to scroll the page as a whole, just like the LinuxQuestions page I'm typing in now.

Firstly, ondoho is right, you probably don't want to use frames.

Even if you achieve the desired layout with frames, you make the website largely inaccessible to your visitors and kill your search engine ranking before it is born. The basic problem with frames is that they break the definition of the page and make the URL (Universal resource locator) no longer universal, nor useful as a locator.

So, since you must spend some time learning in any event, learn first Why Frames Suck and Why Frames Are So Evil, and search for many more explanations if these are not clear to you. Also note that frames are not supported at all by the XHTML Strict specification (requires special Frameset DTD as I recall).

But the short answer: If you want people to find and use your website - don't use frames.

Now, you can do your layout using html tables, but you are still much better off using non-table html block elements such as divs and corresponding CSS rules to get what you want.

I don't have a favorite link, but a quick search turned up this page which looks basic, complete yet easy to read.

Some suggested search terms would be "css multi-column layouts", "css tutorial", "html basics", etc.

And of course, once you have learned the basics but are still having trouble, ask here at LQ!

Thank you astrogeek for the link, very interesting. I had not found anything that usefull. Now, nothing I can find tells me how to add content to a box other than text and images. Can the box contain an html page? Using the code from the link in your reply, this does not work:

<div id="center_column">
<a href="xyz.html"></a>
</div>

Can the menu add an html page to a box? This does not work:

<ul>
<li><a href="abc.html" target="center_column">Menu 1</a></li>
</ul>

Originally Posted by Johng Can the box contain an html page?

well that would be a frame, wouldn't it?
i think i know where you stand and i myself stood quite recently at the same point.
frames seem to be a good solution for beginners - but really they're not.
better to re-think the layout from the very beginning.

(i ended up using some php, it's not that hard)

but, it is possible to embed content in many ways.

you can always look at w3schools.com, and their html and css tutorials and tag references.

This CSS guide should help:

http://adamschwartz.co/magic-of-css/

Or do what all the cool people are doing, and start with a CSS framework such as the Twitter Bootstrap:

http://getbootstrap.com/

Your attempt to separate the page into separate HTML documents should be done server-side. PHP would work fine, and it's a very lightweight solution if that's all you want to do server-side. You just use the PHP include keyword to assemble your HTML fragments.

Well I have studied various HTML/CSS tutorials, and created a format without frames, but I have arrived at a road block. May be I'm on the wrong track again (and this might not be the right place to post, but I feel it's easier to follow my thread without need for elaboration.

I have a title bar along the top, a menu column on the left, with a main window under the title and right of the menu. How do I tell the menu to change the display in the main window, using separate html files? In other words how to specify the main window as the target. Below are my html and css files

<!DOCTYPE html> <html> <head> <title>Northern-Test-10</title> <link rel="STYLESHEET" type="text/css" href="StyleSheet-10N.css"> </head> <body> <div id="wrap"> <div class="wrapper"> <div id="sidebar"> <img style="width: 130px; height: 130px;" src="badge.png"> <br><br> <h3>Menu</h3> <p> <div id="menubar"> <nav> <ul> <li><a href="AboutUs.html" target="main">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </nav> </div> </div> <div id="top"> <h1>Welcome to My Homepage</h1> <p>Experimental web pages</p> </div> <div id="main"> <!-- Insert Main Page here --> <p><br> <h2>Main Page</h2> <br><br><br> <!-- End of Main Page here--> </div> </div></div> </body> </html>

/* Stylesheet 1: */ #wrap { width: 1000px; margin: 0 auto; } body { font: 100% Lucida Sans; margin: 0px; line-height: 28px; } .wrapper { position: relative; } #badge{ width: 130px; height: 130px; } #top, #sidebar, .menuitem { border-radius: 0px; margin: 0px; } #top { background-color: #006633; color: #ffffff; padding: 40px; padding-left: 40px; margin-left: 162px; width: 758px; } #main { width: 760px; height: 1110px; font-size: 14px; line-height: 18px; padding: 10px 40px 0px 38px; margin: 0px 60px 0px 160px; text-align: justify; border-style: solid; border-color: #000000 #000000 #000000 #ffffff; border-width: 1px; } #sidebar { background-color: #e8e8e8; color: #000000; padding: 10px; width: 140px; height: 1100px; bottom: 0; top: 0; left: 0; position: absolute; border-style: solid; border-color: #e8e8e8 #000000 #e8e8e8 #000000; border-width: 1px; font-size: 14px; } #top h1, #top p, #menulist { margin: 0; padding: 0; } .menuitem { background-color: #e8e8e8, /* #f1f1f1; */ border: 1px solid #d4d4d4; list-style-type: none; padding: 2px; cursor: pointer; } .menuitem:hover { background-color: #ffffff; } a { color: #000000; text-decoration: underline; }

Without server-side coding? You link to another HTML file where everything is the same except for the contents of the "main window."

Two people have advised you to look into server-side scripting as a way to break your HTML files up. Start taking that advice.

I have the experience of the Html and CSS tutorials. I think that the link of the Html file is same except the content of the main window is changed.

The first frameset has 2 columns with * for dimension. It also has only 3 columns. (

If you remove the first * in <frameset cols="*,180,860,*" border="2"> you are likely to get everything in 1 page and solve the problem while waiting to see how to implement it through CSS.

OK

Originally Posted by dugan Without server-side coding? You link to another HTML file where everything is the same except for the contents of the "main window."

this is exactly what i was talking about.
i guess everybody thinks: i don't want to rewrite the menubar into every page. let's use frames instead...
but:
- seperate html files with the same menu over and over again are actually pretty fast to load.
- if you have good css, the menu is just a list with links - no biggie.
- include the menu into your page with server-side coding (e.g. php) or javascript (look at w3schools.com/website) or...

about your CSS: use id's sparingly, use classes instead.
and one last time: boxmodel ftw!
'nuff said. the net is full of helpful tutorials.

Originally Posted by ondoho include the menu into your page with server-side coding (e.g. php) or javascript (look at w3schools.com/website) or...

If you're using Javascript then you don't use it to load the menu (unless you're Google and you're loading the menu from a different physical location as a speed optimization). You use it to load the contents of "main".

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hijax Demo</title>
    </head>
    <body>
        <h1>Hijax Demo</h1>

        <ul>
            <li><a href="fragment1.txt">Content 1</a></li>
            <li><a href="fragment2.txt">Content 2</a></li>
        </ul>
        <div id="main"></div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
            $(function () {
                $("ul").click(function (e) {
                    var href = $(e.target).attr("href")
                    $("#main").load(href);
                    e.preventDefault();
                });
            });
        </script>
    </body>
</html>

i didn't look at op's code deeply, but it is possible to make a simple javascript navigation menu, see here:
http://www.w3schools.com/website/web_spa_navigation.asp
(that way one would have to write the nav menu only once)

i don't understand why google should come into it?