Creating a frameless site - how do I position my <div>s

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
 
V

Viken Karaguesian

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
 
B

Bob

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
| 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
|
|
 
V

Viken Karaguesian

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.

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

Bob

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
|> 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
|
|
 
B

Bob

He has been working on it!!!

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

bob
| 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
| ||> 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
||
||
|
|
 
T

Trevor L.

Viken

Some queries in-line

Viken said:
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.

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
 
T

Trevor L.

Bob said:
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)
 
T

Trevor L.

Bob said:
He has been working on it!!!

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

Yes, I left it there as a trial because when I did I found it positioned
correctly. The rest of the page doesn't which has me mystified.

Perhaps I'll hear from you or Viken or another expert tomorrow after I have
had some sleep myself - 6-7 hours away yet
 
V

Viken Karaguesian

Trevor,

It's past midnight in the Eastern USA and I'm getting ready to go to bed, so
I'll take a closer look tomorrow. But, until then:

1. You left the Frameset doctype. Put the Html Strict or Transitional in
there.

2.> P.S. I noticed that float:left in the CSS for said:
did *not* cause the images to float left. Hence the extra CSS for the img
tag

Right, the float is for the <div>, *not* for it's contents.

3. > The rest of the right said:
the wrong place.

I don't have an explanation for this. I'll look again tomorrow.

4. > I have amended your code only slightly to allow for different
dimensions of
the heading and side menu

Just keep in mind that when you do your dimensions, you must account for
margin, padding, and border width in your calculations.

5. To make the left column *appear* to be of the same height as the page,
you would make a 10px high image that's as wide as you want the div to be.
Then you apply it as a background image to the WRAPPER <div> and tile it
vertically. So, if you want the div to be 150px wide, make a 10px ( it would
normally be 1px, but use 10 to get the pattern) by 150px background image.
Then add this to the wrap <div>:

#wrap {
....all your existing code;
background-image: url('image.gif');
background-position: 0 0;
background-repeat: repeat-y; (or is it repeat-x? I can't remember now)
}
This will tile your background pattern along the left side and it will give
the appearance of an unlimited column. This is, in essence, the Faux Column
that's talked about in www.alistapart.com

I'll try and find some time to work on this tomorrow. Good night :>)
 
V

Viken Karaguesian

Perhaps I'll hear from you or Viken or another expert tomorrow after I
have had some sleep myself - 6-7 hours away yet

I'm faaaaaar from an expert. LOL

Thanks anyway :>)
 
T

Trevor L.

Viken said:
I'll try and find some time to work on this tomorrow. Good night :>)


Viken,
(For your perusal tomorrow)

Thanks for those tips and goodnight.
I appreciate your time in looking at it.

I may try the spacing trick a bit later - nearly dinner time now.

To anyone:
Another technique mentioned in Google CSS newsgroup was that one can include
code (not JS but HTML) using an <object></object >pair
The suggestion made was:
<object data="gethead.html" type="text/html">
<b>Header</b>
</object>
(<b>Header</b> is alternative text as in the alt= attribute in <img>.)

This failed - nothing happened, not even the alt.
Does anyone have any knowledge of this or how it works?
 
M

Murray

See - this is like saying that you are giving up smoking by using chewing
tobacco.

You go from frames to the most difficult CSS layout, and you do it with a
frame-based mindset. I recommend that you reconsider, and forget everything
you know about frames - even down to how they work/function. Make your new
layout simple, not complex.
 
K

Kevin Spencer

Hi Trevor,

In case you're interested, I created a "frameless frameset" for a project I
worked on recently to document our .Net assemblies. The pages look like a
2-frame frameset, with a TOC on the left, and content on the right. It is
done entirely using DHTML and divs (for the "frames"). It looks like a
frameset, and you can even resize the "frames" by dragging and dropping. You
can see it at http://www.dynamicsystems.com/weatherservices/documentation/.
The "home" page (the link I posted) is nothing special, just a set of links
to the documentation pages. The documentation pages themselves were created
from XML Code Comments that are generated by Visual Studio.Net. I created an
XSL to transform them into HTML pages.

The pages look and work identically in Internet Explorer and in FireFox.
However, I didn't have the time to make them as "valid" as possible. The
project took me about a month to complete as it was. The nice part is, I can
create documentation for any of our assemblies (as long as I've commented
them, that is) in a matter of a minute or 2, using the XSL.

There are a couple of other nice features about it. As the pages are
documentation for classes, scrolling the right pane causes each class name
to "pop out" of the page and stick to the top of the "frame" while that
class is displayed. The TOC menu has an Explorer-like look and feel to it.

I have thought about creating a more extensible version, one which would
allow one to choose any configuration of frames, but again, I just don't
have the time (or the requirement for any project) to do so right now.

AFAIK, I have never seen a "frameless frameset" before, but if anyone else
has ever run across one, I'd love to see it.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Who is Mighty Abbott?
A twin turret scalawag.
 
M

Murray

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 that portion of the page dependent on the visitor having js
enabled. Why not use a server-side incude?
Now I need to know how to define my <div>'s
e.g.
absolute or relative
width and height in px or %

Neither. You don't need positioning at all for this layout.
I want the layout to stay the same no matter what size the browser window,
so I think this rules out specifying px

Here are your choices -

1. Fixed width - left aligned.
2. Fixed width - centering.
3. Flexible width - filling page.
4. Flexible width - with minimum and maximum widths (so-called Jello Mold
layout)

which do you want?

Tell me that, and I'll gen up an example page for you (except if it's #4 -
that'll be harder).
 
V

Viken Karaguesian

3. > The rest of the right said:
in

I don't have an explanation for this. I'll look again tomorrow.

Trevor,

The reason for the large gap at the top is because you have "table {
width: 100% }" in your css. When I removed that, the gap went away. The
table was over-reaching the boundaries of its containing div, it seems.

I managed to copy your code and some other knick-knacks to my local
folder and debug a bit. Here's the result.
www.sayatnova.com/trevor/trevor.htm

I've even applied the "faux column" using the technique I described. If
you remove the red border around the left div, you'd never know the
difference.

Just one word of advice: IMHO, your page is too dependent on Javascript
for the most critical parts (the menu, for instance). If a non-JS
browser comes upon your site, it'll be unbrowsable. I'm not sure how
many pages your site has but, IMHO, it would be easier to have the code
for the menu and header in every page. Here how I do it:

I create one master copy of the page with all my code in it. I save it
as "template.htm". Whenever I need to add a page to the site, I just
open up "template.htm", add the content where I need it and then do a
"Save As..." and save it as something else. This makes it easier and
less redundant. I don't have to write or copy the code over every time.

Alternately, ou could also use a server-side include if you'd like.
But, I'd stay away from JavaScript includes for compatibility's sake
:>)

Viken K.
 
M

Murray

I agree 100% (no pun intended) with this analysis.

It's too dependent on js and on tables. After all, go for the gold.
Recreating the tables with CSS (in this case) would be pretty simple.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top