T
Trevor L.
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
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