LinuxQuestions.org
Download your favorite Linux distribution at LQ ISO.
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices



Reply
 
Search this Thread
Old 08-28-2014, 08:32 PM   #1
Johng
Member
 
Registered: Feb 2002
Location: NZ
Distribution: Mageia
Posts: 282

Rep: Reputation: 30
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.
 
Old 08-29-2014, 01:30 AM   #2
ondoho
Senior Member
 
Registered: Dec 2013
Distribution: arch linux / crunchbang
Posts: 1,218

Rep: Reputation: 170Reputation: 170
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.
 
Old 08-30-2014, 08:28 PM   #3
Johng
Member
 
Registered: Feb 2002
Location: NZ
Distribution: Mageia
Posts: 282

Original Poster
Rep: Reputation: 30
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.
 
Old 08-30-2014, 09:10 PM   #4
astrogeek
Senior Member
 
Registered: Oct 2008
Distribution: Slackware [64]X{.0|.1|.2|-current} ::X>=12<=14, FreeBSD_10{.0|.1}
Posts: 2,201

Rep: Reputation: 863Reputation: 863Reputation: 863Reputation: 863Reputation: 863Reputation: 863Reputation: 863
Quote:
Originally Posted by Johng View Post
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!

Last edited by astrogeek; 08-30-2014 at 09:12 PM.
 
Old 08-31-2014, 01:48 AM   #5
Johng
Member
 
Registered: Feb 2002
Location: NZ
Distribution: Mageia
Posts: 282

Original Poster
Rep: Reputation: 30
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>
 
Old 09-01-2014, 02:39 AM   #6
ondoho
Senior Member
 
Registered: Dec 2013
Distribution: arch linux / crunchbang
Posts: 1,218

Rep: Reputation: 170Reputation: 170
Quote:
Originally Posted by Johng View Post
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.
 
Old 09-01-2014, 04:52 PM   #7
dugan
Guru
 
Registered: Nov 2003
Location: Canada
Distribution: distro hopper
Posts: 5,005

Rep: Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560
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.

Last edited by dugan; 09-01-2014 at 04:55 PM.
 
Old 09-09-2014, 08:12 PM   #8
Johng
Member
 
Registered: Feb 2002
Location: NZ
Distribution: Mageia
Posts: 282

Original Poster
Rep: Reputation: 30
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

Quote:
<!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>
Quote:
/* 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;
}
 
Old 09-09-2014, 08:30 PM   #9
dugan
Guru
 
Registered: Nov 2003
Location: Canada
Distribution: distro hopper
Posts: 5,005

Rep: Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560
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.

Last edited by dugan; 09-09-2014 at 08:50 PM.
 
Old 09-10-2014, 03:37 AM   #10
peterscot423
LQ Newbie
 
Registered: Sep 2014
Location: united kingdom
Distribution: nito
Posts: 5

Rep: Reputation: 0
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.
 
Old 09-10-2014, 09:34 AM   #11
AnanthaP
Member
 
Registered: Jul 2004
Location: Chennai, India
Distribution: UBUNTU 5.10 since Jul-18,2006 on Intel 820 DC
Posts: 659

Rep: Reputation: 160Reputation: 160
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

Last edited by AnanthaP; 09-12-2014 at 07:51 AM.
 
Old 09-11-2014, 11:31 AM   #12
ondoho
Senior Member
 
Registered: Dec 2013
Distribution: arch linux / crunchbang
Posts: 1,218

Rep: Reputation: 170Reputation: 170
Quote:
Originally Posted by dugan View Post
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.

Last edited by ondoho; 09-11-2014 at 11:34 AM.
 
Old 09-11-2014, 03:47 PM   #13
dugan
Guru
 
Registered: Nov 2003
Location: Canada
Distribution: distro hopper
Posts: 5,005

Rep: Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560Reputation: 1560
Quote:
Originally Posted by ondoho View Post
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".

Code:
<!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>

Last edited by dugan; 09-11-2014 at 05:30 PM.
 
Old 09-12-2014, 03:18 PM   #14
ondoho
Senior Member
 
Registered: Dec 2013
Distribution: arch linux / crunchbang
Posts: 1,218

Rep: Reputation: 170Reputation: 170
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?
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
html : force the fonts size for whole html page? Xeratul Programming 6 11-27-2012 12:54 PM
How do I scroll one page with vim? stf92 Linux - Software 3 07-25-2012 09:23 AM
Scroll/Page up in console? UNI Ubuntu 3 12-11-2010 03:34 AM
How do I output information from a PHP page to an HTML page? SentralOrigin Programming 3 01-10-2009 02:54 AM
How to enable scroll up and down from page? Mathsniper Debian 3 07-18-2005 04:09 AM


All times are GMT -5. The time now is 05:24 PM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
identi.ca: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration