At the urging of Murray MVP and others who decry frames, I am trying to
create a frameless site.

Now, each page is like this, where each of these 3 are frames,
---------------------------------------
Heading (heading.html)
---------------------------------------
SideBar | Main Page
Menu | (index_main.html)
(sidebar |
..html) |
|
|
|
|
----------------------------------------

I am trying to replace this by setting up 3 <div>s on each page.
To avoid repeating my code, the heading and sidebar will be in a script
called by
<script type="text/javascript">gethead();getside();</script> at the top of
each page.
This makes for less typing for new pages.
(I tried shared borders, but got lost in trying to implement it.)

Now I need to know how to define my <div>'s
e.g.
absolute or relative
width and height in px or %

I want the layout to stay the same no matter what size the browser window,
so I think this rules out specifying px

So far I have tried this
CSS
body {
background-color: #aaddaa;/* a light greeen */
background-image: url("images/display/04-08-24-1-bird-bath.jpg");
background-repeat: repeat;
background-attachment: fixed;
font-family: verdana,arial,helvetica,sans-serif;
font-size: 81.25%;
text-align: left;
padding: 0;
margin: 0 auto;
}
table {width: 100%; }
img {border: 0; }
..border
{background: url("images/display/parchmnt.gif"); }
..border img
{float: left; }

HTML (some generated by JS)
<!-- heading <div> -->
<div style="position:absolute;width:100%;height:17%" class="border">
heading content <div>

<!-- side and main <div> -->
<div style="position:relative; top:17%; left:0; width:100%; height:100%">
main content <div>

This works fine, For example when I reduce the page size, everything stays
in the correct relative position

However, I next tried this
<!-- heading <div> -->
<div style="position:absolute;width:100%;height:17%" class="border">
heading content <div>

<!-- side <div> -->
<div style="position:relative; top:7.5%; left:0; width:15%; height:100%"
class="border">
side content <div>

<!-- main <div> -->
<div style="position:relative; top:-33%; left:15%; width:85%; height:100%">
main content <div>

This sort of works, but
# Why does the top spec have to change from 17% to 7.5% for the side <div> ?
# Why do I need a negative offset for top in the main <div> ?
# Shrinking the page moves the main <div> to the left and partly obscures
the side <div>
# The page is too long. At 1024*768, there is a lot of space under the table
in the main <div>
# The side <div> is too short. It ends before the main <div>

I hesitate to use px spec, because this won't work when the page is smaller.
So how do I
Shorten the main <div> ?
Lengthen the side <div>?
Stop the main and side <div> from overlapping at smaller screen sizes

This behaviour can be seen at
http://tandcl.homemail.com.au/newweb.index.html

I have published enough here to view the home page. Not links in the sidebar
menu will not work yet
--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au

Trevor,

Try this:

http://home.comcast.net/~vikenk/frameless.htm

View the source to see the code. It's a basic start. Redo as necessary.
Borders are for presentation only. You may or may not want them. Like I
said, this is a basic start and can have some limitations: 1. the menu
<div>'s and content <div>'s may not always be equal in height. If you have
different colored backgrounds for those two <div>s, that can be a problem.
But, there's a way around that.

Another thing you can do is go to www.alistapart.com and do a search for
"liquid layout". Then search for "faux columns" to see the workaround I
mentioned above. Good luck and happy learning. You will find it quite
liberating :>)

--
Viken K.
http://home.comcast.net/~vikenk





"Trevor L." <Trevor L.@Canberra> wrote in message
news:(E-Mail Removed)...
> At the urging of Murray MVP and others who decry frames, I am trying to
> create a frameless site.
>
> Now, each page is like this, where each of these 3 are frames,
> ---------------------------------------
> Heading (heading.html)
> ---------------------------------------
> SideBar | Main Page
> Menu | (index_main.html)
> (sidebar |
> .html) |
> |
> |
> |
> |
> ----------------------------------------
>
> I am trying to replace this by setting up 3 <div>s on each page.
> To avoid repeating my code, the heading and sidebar will be in a script
> called by
> <script type="text/javascript">gethead();getside();</script> at the top of
> each page.
> This makes for less typing for new pages.
> (I tried shared borders, but got lost in trying to implement it.)
>
> Now I need to know how to define my <div>'s
> e.g.
> absolute or relative
> width and height in px or %
>
> I want the layout to stay the same no matter what size the browser window,
> so I think this rules out specifying px
>
> So far I have tried this
> CSS
> body {
> background-color: #aaddaa;/* a light greeen */
> background-image: url("images/display/04-08-24-1-bird-bath.jpg");
> background-repeat: repeat;
> background-attachment: fixed;
> font-family: verdana,arial,helvetica,sans-serif;
> font-size: 81.25%;
> text-align: left;
> padding: 0;
> margin: 0 auto;
> }
> table {width: 100%; }
> img {border: 0; }
> .border
> {background: url("images/display/parchmnt.gif"); }
> .border img
> {float: left; }
>
> HTML (some generated by JS)
> <!-- heading <div> -->
> <div style="position:absolute;width:100%;height:17%" class="border">
> heading content <div>
>
> <!-- side and main <div> -->
> <div style="position:relative; top:17%; left:0; width:100%; height:100%">
> main content <div>
>
> This works fine, For example when I reduce the page size, everything stays
> in the correct relative position
>
> However, I next tried this
> <!-- heading <div> -->
> <div style="position:absolute;width:100%;height:17%" class="border">
> heading content <div>
>
> <!-- side <div> -->
> <div style="position:relative; top:7.5%; left:0; width:15%; height:100%"
> class="border">
> side content <div>
>
> <!-- main <div> -->
> <div style="position:relative; top:-33%; left:15%; width:85%;
> height:100%">
> main content <div>
>
> This sort of works, but
> # Why does the top spec have to change from 17% to 7.5% for the side <div>
> ?
> # Why do I need a negative offset for top in the main <div> ?
> # Shrinking the page moves the main <div> to the left and partly obscures
> the side <div>
> # The page is too long. At 1024*768, there is a lot of space under the
> table in the main <div>
> # The side <div> is too short. It ends before the main <div>
>
> I hesitate to use px spec, because this won't work when the page is
> smaller.
> So how do I
> Shorten the main <div> ?
> Lengthen the side <div>?
> Stop the main and side <div> from overlapping at smaller screen sizes
>
> This behaviour can be seen at
> http://tandcl.homemail.com.au/newweb.index.html
>
> I have published enough here to view the home page. Not links in the
> sidebar menu will not work yet
> --
> Cheers,
> Trevor L.
> Website: http://tandcl.homemail.com.au
>

Trevor,

Go here www.sayatnova.com/frameless.htm

I am having trouble with my hosting, yet again.

--


Viken K.
http://home.comcast.net/~vikenk
"Trevor L." <Trevor L.@Canberra> wrote in message
news:(E-Mail Removed)...
> At the urging of Murray MVP and others who decry frames, I am trying to
> create a frameless site.
>
> Now, each page is like this, where each of these 3 are frames,
> ---------------------------------------
> Heading (heading.html)
> ---------------------------------------
> SideBar | Main Page
> Menu | (index_main.html)
> (sidebar |
> .html) |
> |
> |
> |
> |
> ----------------------------------------
>
> I am trying to replace this by setting up 3 <div>s on each page.
> To avoid repeating my code, the heading and sidebar will be in a script
> called by
> <script type="text/javascript">gethead();getside();</script> at the top of
> each page.
> This makes for less typing for new pages.
> (I tried shared borders, but got lost in trying to implement it.)
>
> Now I need to know how to define my <div>'s
> e.g.
> absolute or relative
> width and height in px or %
>
> I want the layout to stay the same no matter what size the browser window,
> so I think this rules out specifying px
>
> So far I have tried this
> CSS
> body {
> background-color: #aaddaa;/* a light greeen */
> background-image: url("images/display/04-08-24-1-bird-bath.jpg");
> background-repeat: repeat;
> background-attachment: fixed;
> font-family: verdana,arial,helvetica,sans-serif;
> font-size: 81.25%;
> text-align: left;
> padding: 0;
> margin: 0 auto;
> }
> table {width: 100%; }
> img {border: 0; }
> .border
> {background: url("images/display/parchmnt.gif"); }
> .border img
> {float: left; }
>
> HTML (some generated by JS)
> <!-- heading <div> -->
> <div style="position:absolute;width:100%;height:17%" class="border">
> heading content <div>
>
> <!-- side and main <div> -->
> <div style="position:relative; top:17%; left:0; width:100%; height:100%">
> main content <div>
>
> This works fine, For example when I reduce the page size, everything stays
> in the correct relative position
>
> However, I next tried this
> <!-- heading <div> -->
> <div style="position:absolute;width:100%;height:17%" class="border">
> heading content <div>
>
> <!-- side <div> -->
> <div style="position:relative; top:7.5%; left:0; width:15%; height:100%"
> class="border">
> side content <div>
>
> <!-- main <div> -->
> <div style="position:relative; top:-33%; left:15%; width:85%;
> height:100%">
> main content <div>
>
> This sort of works, but
> # Why does the top spec have to change from 17% to 7.5% for the side <div>
> ?
> # Why do I need a negative offset for top in the main <div> ?
> # Shrinking the page moves the main <div> to the left and partly obscures
> the side <div>
> # The page is too long. At 1024*768, there is a lot of space under the
> table in the main <div>
> # The side <div> is too short. It ends before the main <div>
>
> I hesitate to use px spec, because this won't work when the page is
> smaller.
> So how do I
> Shorten the main <div> ?
> Lengthen the side <div>?
> Stop the main and side <div> from overlapping at smaller screen sizes
>
> This behaviour can be seen at
> http://tandcl.homemail.com.au/newweb.index.html
>
> I have published enough here to view the home page. Not links in the
> sidebar menu will not work yet
> --
> Cheers,
> Trevor L.
> Website: http://tandcl.homemail.com.au
>

Hi Trevor,

Here is the same thing... I didn't use the wrapper...
(but I had it in the style list) Ha hahaha
http://www.xmas-i-am.com/test.html

Start with the main layout and then add in components little by little using
the CSS to position and enhance the looks as you go...

bob
"Trevor L." <Trevor L.@Canberra> wrote in message
news:(E-Mail Removed)...
| At the urging of Murray MVP and others who decry frames, I am trying to
| create a frameless site.
|
| Now, each page is like this, where each of these 3 are frames,
| ---------------------------------------
| Heading (heading.html)
| ---------------------------------------
| SideBar | Main Page
| Menu | (index_main.html)
| (sidebar |
| .html) |
| |
| |
| |
| |
| ----------------------------------------
|
| I am trying to replace this by setting up 3 <div>s on each page.
| To avoid repeating my code, the heading and sidebar will be in a script
| called by
| <script type="text/javascript">gethead();getside();</script> at the top of
| each page.
| This makes for less typing for new pages.
| (I tried shared borders, but got lost in trying to implement it.)
|
| Now I need to know how to define my <div>'s
| e.g.
| absolute or relative
| width and height in px or %
|
| I want the layout to stay the same no matter what size the browser window,
| so I think this rules out specifying px
|
| So far I have tried this
| CSS
| body {
| background-color: #aaddaa;/* a light greeen */
| background-image: url("images/display/04-08-24-1-bird-bath.jpg");
| background-repeat: repeat;
| background-attachment: fixed;
| font-family: verdana,arial,helvetica,sans-serif;
| font-size: 81.25%;
| text-align: left;
| padding: 0;
| margin: 0 auto;
| }
| table {width: 100%; }
| img {border: 0; }
| .border
| {background: url("images/display/parchmnt.gif"); }
| .border img
| {float: left; }
|
| HTML (some generated by JS)
| <!-- heading <div> -->
| <div style="position:absolute;width:100%;height:17%" class="border">
| heading content <div>
|
| <!-- side and main <div> -->
| <div style="position:relative; top:17%; left:0; width:100%; height:100%">
| main content <div>
|
| This works fine, For example when I reduce the page size, everything stays
| in the correct relative position
|
| However, I next tried this
| <!-- heading <div> -->
| <div style="position:absolute;width:100%;height:17%" class="border">
| heading content <div>
|
| <!-- side <div> -->
| <div style="position:relative; top:7.5%; left:0; width:15%; height:100%"
| class="border">
| side content <div>
|
| <!-- main <div> -->
| <div style="position:relative; top:-33%; left:15%; width:85%;
height:100%">
| main content <div>
|
| This sort of works, but
| # Why does the top spec have to change from 17% to 7.5% for the side <div>
?
| # Why do I need a negative offset for top in the main <div> ?
| # Shrinking the page moves the main <div> to the left and partly obscures
| the side <div>
| # The page is too long. At 1024*768, there is a lot of space under the
table
| in the main <div>
| # The side <div> is too short. It ends before the main <div>
|
| I hesitate to use px spec, because this won't work when the page is
smaller.
| So how do I
| Shorten the main <div> ?
| Lengthen the side <div>?
| Stop the main and side <div> from overlapping at smaller screen sizes
|
| This behaviour can be seen at
| http://tandcl.homemail.com.au/newweb.index.html
|
| I have published enough here to view the home page. Not links in the
sidebar
| menu will not work yet
| --
| Cheers,
| Trevor L.
| Website: http://tandcl.homemail.com.au
|
|

> HTML (some generated by JS)
> <!-- heading <div> -->
> <div style="position:absolute;width:100%;height:17%" class="border">
> heading content <div>
>
> <!-- side and main <div> -->
> <div style="position:relative; top:17%; left:0; width:100%; height:100%">
> main content <div>
>
> This works fine, For example when I reduce the page size, everything stays
> in the correct relative position

Right. If it's absolutely positioned it won't grow and shrink with the page.

> This behaviour can be seen at
> http://tandcl.homemail.com.au/newweb.index.html

I just get a 404 file not found when I click on this.

--
Viken K.
http://home.comcast.net/~vikenk

Hi Viken,

Just going to bed but I thought you might do better if you could see the
page....
http://tandcl.homemail.com.au/newweb/index.html

Try that and see if it works...

bob
"Viken Karaguesian" <vikenkNO_SPAM@NO_SPAMcomcast.net> wrote in message
news:WOWdnT1mRYuYOkTeRVn-(E-Mail Removed)...
|> HTML (some generated by JS)
| > <!-- heading <div> -->
| > <div style="position:absolute;width:100%;height:17%" class="border">
| > heading content <div>
| >
| > <!-- side and main <div> -->
| > <div style="position:relative; top:17%; left:0; width:100%;
height:100%">
| > main content <div>
| >
| > This works fine, For example when I reduce the page size, everything
stays
| > in the correct relative position
|
| Right. If it's absolutely positioned it won't grow and shrink with the
page.
|
| > This behaviour can be seen at
| > http://tandcl.homemail.com.au/newweb.index.html
|
| I just get a 404 file not found when I click on this.
|
| --
| Viken K.
| http://home.comcast.net/~vikenk
|
|

He has been working on it!!!

BTW: Trevor - Remove the text right content! Ha hahah
Looking a lot better!!! Night.........ZZzzz...

bob
"Bob" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
| Hi Viken,
|
| Just going to bed but I thought you might do better if you could see the
| page....
| http://tandcl.homemail.com.au/newweb/index.html
|
| Try that and see if it works...
|
| bob
| "Viken Karaguesian" <vikenkNO_SPAM@NO_SPAMcomcast.net> wrote in message
| news:WOWdnT1mRYuYOkTeRVn-(E-Mail Removed)...
||> HTML (some generated by JS)
|| > <!-- heading <div> -->
|| > <div style="position:absolute;width:100%;height:17%" class="border">
|| > heading content <div>
|| >
|| > <!-- side and main <div> -->
|| > <div style="position:relative; top:17%; left:0; width:100%;
| height:100%">
|| > main content <div>
|| >
|| > This works fine, For example when I reduce the page size, everything
| stays
|| > in the correct relative position
||
|| Right. If it's absolutely positioned it won't grow and shrink with the
| page.
||
|| > This behaviour can be seen at
|| > http://tandcl.homemail.com.au/newweb.index.html
||
|| I just get a 404 file not found when I click on this.
||
|| --
|| Viken K.
|| http://home.comcast.net/~vikenk
||
||
|
|

Viken

Some queries in-line

Viken Karaguesian wrote:
> Trevor, Try this: http://home.comcast.net/~vikenk/frameless.htm
>
> View the source to see the code. It's a basic start. Redo as
> necessary. Borders are for presentation only. You may or may not want
> them.

The borders show me the <div> boundaries so they are good while
experimenting

> Like I said, this is a basic start and can have some
> limitations: 1. the menu <div>'s and content <div>'s may not always
> be equal in height.

They aren't. Can this be "fixed"

> If you have different colored backgrounds for
> those two <div>s, that can be a problem. But, there's a way around
> that.

Yes, they have

I added class="border" to the top and left <div> tags
..border {background: url("images/display/parchmnt.gif"); }
..border img {float: left; }

P.S. I noticed that float:left in the CSS for <div> ids #left and #header
did *not* cause the images to float left. Hence the extra CSS for the img
tag
>
> Another thing you can do is go to www.alistapart.com and do a search
> for "liquid layout". Then search for "faux columns" to see the
> workaround I mentioned above.

I might do this if I can't get your approach to work

> Good luck and happy learning. You will
> find it quite liberating :>)

I hope so, but there are a few problems, still

I get this set up

------------------------------------
Heading
------------------------------------
Side Menu | RIGHT CONTENT
|
|
|
|
|
|
|
--------------------------------------
| rest of the "right" <div>
|
|
|
|

The rest of the right <div> is exactly as I want it *except* that it is in
the wrong place.

This part of the page is 2 tables
<table border="0">
<table border="1">
There is no strange code that I can see

I have amended your code only slightly to allow for different dimensions of
the heading and side menu
Otherwise I think it is as is

Please have a look at http://tandcl.homemail.com.au/newweb/index.html

If you can tell me what is wrong, that would be great. I would be well on my
way to getting rid of frames
--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au

Viken Karaguesian wrote:
>> This behaviour can be seen at
>> http://tandcl.homemail.com.au/newweb.index.html
> I just get a 404 file not found when I click on this.

Sorry,
Try http://tandcl.homemail.com.au/newweb/index.html
Stupid me

I am working on your suggestions - see other post
--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au

Bob wrote:
> Hi Viken,
>
> Just going to bed but I thought you might do better if you could see
> the page....
> http://tandcl.homemail.com.au/newweb/index.html
>
> Try that and see if it works...

Thanks, Bob
Stupid mistake on my part

Hmm, your bedtime- makes it USA, I guess. Only 1600 here on a very hot
Canberra day - at least the radio says it is. I haven't been out of the
air-conditioned house all day. The inside thermometer reads 25 (Celsius)

--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au