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

[Viken Karaguesian]

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.

Murray, how would he recreate the tables with <div>'s? I find that
somewhat diffucult. I suppose he could left-float 3 divs of a specific
size, making a similar look to the tables cells.

How about in-line lists? You could do several <ul>'s, each with three
list items inline. that may work as well.


Viken K.

 

[Murray]

Don't do list items inline - float them left. That would be my preferred
way - it will retain the semantic sense of that bottom content if the page
is viewed in NN4x or without a stylesheet anyhow.

 

[Trevor L.]

This makes that portion of the page dependent on the visitor having js
enabled. Why not use a server-side incude?

Yes, another poster has mentioned the js dependence.

As I mentioned before I use my ISP's web service and it has no SSI. To which
you replied that I and they should join the 21st century.

Well, I agree. But while I am just pursuing a hobby, rather than creating a
commercial site, I dont want to delve into paying heaps for another web
host, certainly not until I know what I want. (Although this past year's
experience has been helpful in making me aware of what I am missing and
perhaps want.)

I have seen a few posts on this NG about low cost web hosts, but remember I
am in Australia, so prices may be different here.
Whoops, someone will answer it doesn't matter where the host physically
exists, and apart from paying - do I trust the internet for payment ? - and
getting service when I need it, I suppose it doesn't.

Neither. You don't need positioning at all for this layout.

Are you saying that using <div>'s - which I currently am trying - then I
don't specify absolute or relative at all.

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).

I don't want fixed width (although it would be interesting to see how it
works) so that leaves 3 or 4.
I think at the moment I want 3 - that was what I was aiming at.
Can you explain what the flexible width would involve (not from a coding
viewpoint, but from a presentation viewpoint)
Would it mean that a site opens at 800*600 but can be expanded to 1024*768
or more ?
Wouldn't this be the same as dragging the corners of a site set up as 3?

Thanks for the time and the comments

 

[Trevor L.]

Viken and Murray,
Thansk for the help.

I have been working on this site using the suggestions you have made.

It has now been posted again at
http://tandcl.homemail.com.au/newweb/index.html

The styles are on http://tandcl.homemail.com.au/newweb/style.css
but to save looking them up, this is what I have managed to get them down to
#wrap { /*
background-image: url('images/display/blank.gif');
background-position: 0 0;
background-repeat: repeat-y; */
border: solid black 1px;
}

#header {
background-image: url("images/display/parchmnt.gif");
height: 7.5%;
}

#left {
background-image: url("images/display/parchmnt.gif");
float: left;
width: 14%;
border: solid red 1px;
}
#left img {float: left; }

#right {
border: solid green 1px;
}

As you can see the #wrap and #right <div>'s don't need any definition - the
only styles here are borders which I will delete later.
I found the % spec for the height and width as good as px, but I can change
it back if there is a good reason to.
Possibly even 1% would do, if <div>'s expands to fit the contents.

I have 2 remaining problems
1. When I reduce the size of the window too far, the #right <div> positions
under the left.
It would be better if the table were to adjust its position so that single
lines change into multi-lines, etc, but the table stays where it is - to the
right of the left <div>.
If I removed the table structure, would this improve?
Admittedly, it would be a bit difficult to do, because the links are aranged
in columns.

2. The #left <div> does not extend to the bottom of the page, so the
parchment background cuts out too soon.
I have experimented qute a lot with this, and I can't seem to find a way
around it.
I know that specifying a background image for the wrap <div> extends this
<div> to the bottom of the page, but this background will then overwite the
entire page, not just the left column as I want. (You can see the comments
in the style above where I tried it.)

Any further help you can give is *much* appreciated.

 

[Trevor L.]

Kevin,
Thank you, I will have a good look at this.

It is great to get help from the experts in this NG.

At the moment I am following up Murray's suggestions (see separate post),
but if there is a better way, I will use it.

I dont care if there is more coding needed to set it up. After all, once it
is there, it doesn't go away, especially as I back up all my code, once on
My Webs/myweb, again on My Webs/mywebcopy and also on My
Webs/myweb/myweb.zip. (I dont always remember, but I do it often enough to
recover close enough to any lost file.)

 

[Trevor L.]

Hi Trevor,

In case you're interested, I created a "frameless frameset" for a
project I worked on recently to document our .Net assemblies.

I had a look and the home page seems very straightforward.

But there are only 2 "frames". One thing I noted was the lack of scrollbars
as the page gets smaller (by resizing, anyway)

I have 3 "frames" and while I am getting there, I still have two problems
as listed in my post in this thread
dated 28/01/2006 5:41 PM AEDST
Starting with
"Viken and Murray,
Thansk for the help."
(sic)

The problems are
1. When I reduce the size of the window too far, the #right <div> positions
under the left.
2. The #left <div> does not extend to the bottom of the page, so the
parchment background cuts out too soon.

If you have any ideas, that would be great

 

[Murray]

don't specify absolute or relative at all.
Or don't I use <div>'s at all?

I am saying that you often don't need to use absolute or relative at all.
Look - your page *could* be as simple as this (diagrammatic
representation) -

<body>
<div>...</div>
<div>...</div>
<div>...</div>
</body>

That is, just a series of stacked divs. There would be *no* positioning
used there at all.

If you need two divs to be side-by-side, float one of them.

Can you explain what the flexible width would involve (not from a coding
viewpoint, but from a presentation viewpoint)

In the absence of any other CSS, this page is completely flexible:

<body>
<div style="text-align:center;">Now is the time for all good men to come to
the aid of their party.</div>
</body>

But - on a really wide screen, it will look goofy - a short line of text in
the middle and nothing else. So, while a nice idea, in practice it's
usually not the best approach. As long as IE doesn't support min-width and
max-width CSS (allowing you to make the page completely flexible between the
min and the max, and fixed width outside of those two), we will be stuck
here. I would normally choose #2 for my sites. And they don't have to
*look* like they are fixed width, either - see
http://www.fairfaxboulevard.com as an example.

Would it mean that a site opens at 800*600 but can be expanded to 1024*768
or more ?
Wouldn't this be the same as dragging the corners of a site set up as 3?

Yes, that's it. But of course, resolution has nothing to do with it other
than setting the maximum practical browser viewport width.

 

[Viken Karaguesian]

As long as IE doesn't support min-width and max-width CSS (allowing you to

make the page completely flexible between the min and the max, and fixed
width outside of those two), we will be stuck here.

Murray,

Getting a bit off the subject here: I often find myself frustrated that IE
does not fully support CSS2, and my designs have become cramped because of
it. I know that I can design sites that will work in Firefox, for instance,
but how many people really use Firefox? 10%? My stats for my site show that
90% of my users use IE. What good is a CSS2 design if only 10% of people see
the site as intended? So I often find myself restructuring to satisfy IE.

Do you have any idea when Microsoft is planning on releasing the next update
to IE, one that fully supports CSS2? Or can you tell me of a link within
Microsoft that I can find this stuff out?

 

[Viken Karaguesian]

Trevor,

Read my replies inline :>)

I have 2 remaining problems
1. When I reduce the size of the window too far, the #right <div>
positions under the left.
It would be better if the table were to adjust its position so that single
lines change into multi-lines, etc, but the table stays where it is - to
the right of the left <div>.
If I removed the table structure, would this improve?
Admittedly, it would be a bit difficult to do, because the links are
aranged in columns.

The problem is not necessarily with your tables, but with the content inside
the tables. The thing with fluid designs is that fixed width items can often
throw a wrench in to the design. As you see, when you have fixed width items
and the window resize comes to a point where it can't resize any more, the
div will push itsself down. You would have the same trouble if you went with
a <div> instead of a table.

Instead of removing the table, maybe you can rearrange it to have two
columns instead of three. That way you can buy yourself more room to
collapse the window.

2. The #left <div> does not extend to the bottom of the page, so the
parchment background cuts out too soon.
I have experimented qute a lot with this, and I can't seem to find a way
around it.
I know that specifying a background image for the wrap <div> extends this
<div> to the bottom of the page, but this background will then overwite
the entire page, not just the left column as I want. (You can see the
comments in the style above where I tried it.)

That is a frustration with <div>'s. They don't often stretch and fit the way
you want. Really, the only way to do it (that I know of) is to use the Faux
Column technique. I had it working on your site. Did you see the example?
www.sayatnova.com/trevor/trevor.htm

You can see that I've tiled the image down the left column, using the
wrapper div. To get it working you must 1) Set the left div to a fixed width
in px, and 2) resize your parchment image to the same width as the left div.
Save it as parchment_left or something. Use the background-repeat: repeat-y
to tile it down the left side. It worked perfectly for me.

Try again.

 

[Trevor L.]

Viken,
A little late here in Aus but a few quick comments

Trevor,

The problem is not necessarily with your tables, but with the content
inside the tables. The thing with fluid designs is that fixed width
items can often throw a wrench in to the design. As you see, when you
have fixed width items and the window resize comes to a point where
it can't resize any more, the div will push itsself down. You would
have the same trouble if you went with a <div> instead of a table.

I can't see many fixed width items, apart from images

Instead of removing the table, maybe you can rearrange it to have two
columns instead of three. That way you can buy yourself more room to
collapse the window.

Thanks. I will look at this idea.

BTW, it takes a fairly small screen before the <div> jumps. I haven't
measured it, but by just dragging the corners, it has to get quite small -

That is a frustration with <div>'s. They don't often stretch and fit
the way you want. Really, the only way to do it (that I know of) is
to use the Faux Column technique. I had it working on your site. Did
you see the example? www.sayatnova.com/trevor/trevor.htm

I did look at this page. I don't understand the "Faux Column" technique
(except its literal meaning )

You can see that I've tiled the image down the left column, using the
wrapper div. To get it working you must 1) Set the left div to a
fixed width in px, and 2) resize your parchment image to the same
width as the left div. Save it as parchment_left or something. Use
the background-repeat: repeat-y to tile it down the left side. It
worked perfectly for me.

I thought I tried this - although I haven't created an image of the same
width.

Try again.

Yes, I will.

I wonder:
If I set the image to a set size - say 140 px - to cover the left <div> of
140 px, what will happen when I reduce the window size?
Will the image stay at 140 even though the column width reduces or will they
both reduce together ?
Oh well, I will check your reference again, and then try it myself and see.

Perhaps I do understand the "Faux Column" technique a little.
The false column is the image inside a larger <div>. True?

 

[Viken Karaguesian]

I can't see many fixed width items, apart from images

Those are the fixed with items. They prevent the table from collapsing
further, especially when you have images in all three colums.

I thought I tried this - although I haven't created an image of the same
width.

That's the key. Set your left DIV to a fixed px width, then make the
image-to-be-tiled the same width.

Perhaps I do understand the "Faux Column" technique a little.
The false column is the image inside a larger <div>. True?

That's right. Read this for more:
http://www.alistapart.com/articles/fauxcolumns/

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

Viken,
A little late here in Aus but a few quick comments





Thanks. I will look at this idea.

BTW, it takes a fairly small screen before the <div> jumps. I haven't
measured it, but by just dragging the corners, it has to get quite small -


I did look at this page. I don't understand the "Faux Column" technique
(except its literal meaning )



Yes, I will.

I wonder:
If I set the image to a set size - say 140 px - to cover the left <div> of
140 px, what will happen when I reduce the window size?
Will the image stay at 140 even though the column width reduces or will
they both reduce together ?
Oh well, I will check your reference again, and then try it myself and
see.

 

[Trevor L.]

Murray,
A quick reply.

I am saying that you often don't need to use absolute or relative at
all. Look - your page *could* be as simple as this (diagrammatic
representation) -

<body>
<div>...</div>
<div>...</div>
<div>...</div>
</body>

That is, just a series of stacked divs. There would be *no*
positioning used there at all.

If you need two divs to be side-by-side, float one of them.

Good. Understood.

But, it's not even necessary to use <div> tags in some cases. The
simpler the better.

Even better.

In the absence of any other CSS, this page is completely flexible:

<body>
<div style="text-align:center;">Now is the time for all good men to
come to the aid of their party.</div>
</body>

But - on a really wide screen, it will look goofy - a short line of
text in the middle and nothing else. So, while a nice idea, in
practice it's usually not the best approach. As long as IE doesn't
support min-width and max-width CSS (allowing you to make the page
completely flexible between the min and the max, and fixed width
outside of those two), we will be stuck here. I would normally
choose #2 for my sites. And they don't have to *look* like they are
fixed width, either - see http://www.fairfaxboulevard.com as an
example.

So, with option2, a fixed width 800px will actually fill a 1024 screen ?
Or do you mean something else by "don't look fixed"

I'll check the page above to see if I can clarify that in my mind.

Yes, that's it. But of course, resolution has nothing to do with it
other than setting the maximum practical browser viewport width.

I thought so.

So isn't option 3 what I want?
Or does 2 do the same?
I guess it depends on the answer to:
"So a fixed width 800px will actually fill a 1024 screen ?"

Yes, I have read the resolution discussion. and I think I understand what is
being said

Perhaps I need to reread my questions and your answers more thoroughly.
Tomorrow !!

 

[Murray]

I guess it depends on the answer to:

"So a fixed width 800px will actually fill a 1024 screen ?"

A fixed width of 800px will be 800px wide in any width viewport. On
viewports wider than 800px, it will begin to center, but it will still only
be 800px wide. That width is fixed.

 

[Trevor L.]

Viken and Murray.
I have been spending all day on my newweb folder

I have taken on board all of your comments, although I still have some more
research to do on some references you gave me.

Would you be so kind as to look at the results on
http://tandcl.homemail.com.au/newweb/index.hmtl

These are the pages
index.html
calls:
sitemap.html
siteinfo.html
about.html
album.html
calls
gallc1.html
gallc2.html
gallt1.html
gallt2.html
gallt3.html
gallery.html
slideshow.html

Not used:
template.html

The style sheets are
http://tandcl.homemail.com.au/newweb/style.css
and
http://tandcl.homemail.com.au/newweb/print.css
(although some styles are not used)

The js is on
http://tandcl.homemail.com.au/newweb/scripts/
about.js
album.js
external.js
popupcalendar.js (a script copied from a websource)
slidelist.js
slideshow.js

I had a problem with text in the "right" <div> that positioned below the
level of the "left" <div>.
It positioned to the far left, i.e. on the "wrap" <div> left boundary.
So I had to make the "left" <div> and the faux column the same height, which
means a bit of scrolling.

Interestingly, this doesn't occur within a <table>. But as soon as I close
the table, any further text left positions.

 

[Kevin Spencer]

Hi Trevor,

I had a look and the home page seems very straightforward.

Perhaps I forgot to mention that the home page is *not* the frameless
frameset. I just threw a simple HTML document together to link to the
documentation pages, which are all frameless framesets. For example:

http://www.dynamicsystems.com/weatherservices/documentation/DsiGlobal.Imaging.htm

But there are only 2 "frames". One thing I noted was the lack of
scrollbars as the page gets smaller (by resizing, anyway)

This sounds like you were looking at one of the frameless frameset pages,
but your remark about "lack of scrolling" is odd. Both "frames" will scroll
both horizontally and vertically if the content is larger than the div
containing it, by resizing, or for any other reason. As I mentioned, both I
and a colleague at work extensively tested this in both IE and FireFox.

Let me know if there are any other questions. I realize that this particular
solution is not exactly the 3-frame scenario you described, but it is an
example of how one can use CSS, JavaScript, and HTML to emulate the behavior
and look of a frameset. If you, for example, look at the above page in
FireFox, and turn off CSS, you will see that it is a single HTML document.

There are 2 outer divs which form the outside "frame," with 3 divs inside
them. The TOC div is the first. The "Sizer bar" is the second div, and the
Content is the third div. With CSS turned off, the TOC appears at the top,
with the sizer bar below that, and the Content div below that. I used a
combination of CSS styles, including the "float" style, to get them to sit
next to each other, and JavaScript to handle the dynamic resizing when the
page is resized, or when the sizer bar is dragged left or right.

In order to make the links behave like a frameset, I use a JavaScript
function on the click event of the link. It "hijacks" the link event, and
scrolls the Content div to the location of the target, using the various
properties and styles of the elements in the page to do the measuring. It
also maintains the scrolled position of the div when the frame sizes are
changed by resizing or dragging the sizer bar. This is largely due to the
slight differences in the IE and Mozilla object models, which behave
differently when a hyperlink to a target frame is clicked. It also maintains
the URL of the page despite links to the Content frame, just as a frameset
would behave.

Also because of the peculiarities of each browser DOM, it uses a fairly
sophisticated mechanism to do the calculations. But the JavaScript and CSS
are all there for anyone to study. I *would* have protected the HTML and
JavaScript code, but... ;-)

In any case, as I mentioned, it is not intended as a solution to your
problem, but as an illustration of how such a framesless frameset can be
made, theoretically with any number of frames. But as I also mentioned, it
took me about a month to write it, and re-designing it to support multiple
configurations of frames would be extremely fun, but consume much more time
than I have available, probably another month or so.

AFAIK, this is the only "frameless frameset" on the WWW. At any rate, I have
never been able to find one, so I rolled my own.

--
HTH,

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

 

[Viken Karaguesian]

Trevor,

It's looking good! I see you're getting the hang of it.

I had a problem with text in the "right" <div> that positioned below the
level of the "left" <div>.
It positioned to the far left, i.e. on the "wrap" <div> left boundary.
So I had to make the "left" <div> and the faux column the same height,
which means a bit of scrolling.

I'm not exactly sure what you mean by this. You had text in a <p> tag and
you ended up with that text below the left <div>? So you had that huge gap
at the top like you did before?

The text is positioning left probably because you have the right <div>
unstyled and its inheriting its properties from its container <div>. If you
want the text to look a certain way, you should style the right <div> using
the text-align command and probably add padding to the left side if you
don't want the text to go too far left.

 

[Murray]

Of course, this sophisticated method goes out the window if js is turned
off.

I would only use something like this as an academic exercise.

 

[Trevor L.]

Trevor,

It's looking good! I see you're getting the hang of it.


I'm not exactly sure what you mean by this. You had text in a <p> tag
and you ended up with that text below the left <div>? So you had that
huge gap at the top like you did before?

I had text *not* in a encompassing table but in a series of separate
tables. When the start position of one of these tables fell below the bottom
of the left <div>, it justified to the left of the screen, i.e. to the left
of the "wrap" <div>.
i.e.
Left Div | Table 1
| .....
| end Table 1
---------------------- Table 2
...........
end Table2
Table 3
.......
end Table 3

BTW, it wasn't my code (program generated) so criticise the number of tables
if you like. For my own code, I probably wouldn't put in so many tables.
In fact, I must set myself a task to reduce the number of tables I use
throughout. As Murray and others (yourself included ?) say, one can
position text quite easily without relying on tables.

The text is positioning left probably because you have the right <div>
unstyled and its inheriting its properties from its container <div>.
If you want the text to look a certain way, you should style the
right <div> using the text-align command and probably add padding to
the left side if you don't want the text to go too far left.

Yes, it was unstyled. I have tried both text-align= and align= elsewhere in
the code. I may try one or other of these in the "right" div.

However, I solved my immediate problem by placing all the code (including
tables) inside another table
i.e. at the top of the page I put
<table><tr><td>
and at the bottom
</td></tr></table>

I also tried what I wrote above, I made the "left" <div> and the faux
column the same height.

Either one of these caused the text in the "right" <div> to left align with
the right boundary of the "left" <div>, but for different reasons.
So I can use either or both

Thanks for all the suggestions along the way. I think I am nearly there.

 

[Trevor L.]

Kevin,
Thanks for the very informative reply

I will peruse it and the site some more, and see what knowledge I can gain.
I'll see if I can explain about the scrolling later.

It is great to have more info. than perhaps I need. It gives me options on
the way to go.

I note Murray's comment about relying on js. I am still in two minds on this
myself.
But I will have a good look at what you have done first.

 

[Viken Karaguesian]

Hi Trevor,

Is this link the most current version of your test site?
http://tandcl.homemail.com.au/newweb/index.html

I had text *not* in a encompassing table but in a series of separate
tables. When the start position of one of these tables fell below the
bottom of the left <div>, it justified to the left of the screen, i.e. to
the left of the "wrap" <div>.
i.e.
Left Div | Table 1
| .....
| end Table 1
---------------------- Table 2
...........
end Table2
Table 3
......
end Table 3

OK...The easy answer would be that the left div is shorter than the right
div and once any content clears the bottom of the div, they just left
justify. BUT....The right div and left div are separate and not nested
within eachother. It's almost like there's a stray tag screwing up the
design. If the table was somehow in the wrap div and not the right div that
would happen, but if the table is in the right div, that shouldn't happen.

BTW, it wasn't my code (program generated) so criticise the number of
tables if you like.

Naw.....I'm not going to critisize that :>) I''m not an anti-table and
anti-frames zealot. Sure, frames aren't the the best method and over-use of
tables is a common problem, but I don't slam people. Tables have their
place. I think that the main reason people have been critical of tables is
that they have been abused and mis-used. Tables were originally meant to
display tabular data, but people started using them as a layout tool and
abused their functionality. That sent the HTML purists into a major fuss.

Spend some time lurking at the newsgroup
"comp.infosystems.www.authoring.html" - that's where you'll find all the
anti-frames and anti-table zealots. :>)

Like I said before, it's looking good. Once you get the hang of it, it'll
come as second nature to you. Have fun! :>)