Implementing two columns via CSS?

[Rhino]

Let me begin by warning you all that I don't have sufficient background in
CSS to state my question with the correct formal terminology so I'll just
use plain English.

Basically, I want to create two columns in my web pages, one for an index
and one for everything else, and I want the pages to print correctly when
the user clicks on the Print button. (I'm not sure if it is correct to say
that I am trying to "float" a box since I'm not quite sure what that means.)

Now, the same information in more detail :-) I want my page to have an index
column occupying roughly 12 to 15% of the width of the page (screen page and
printed page) and I want that index to be on the left hand side of the page.
The index may be longer/taller than the rest of the content on the page, in
fact that will often be the case. The rest of the page will have paragraphs,
images, and the occasional list or table (or both).

At the moment, my pages look fine on the screen - at least when the browser
is using the full screen! - but when I use Print Preview (or Print) the page
splits so that the top of the page has the index on the left with the rest
of the width of the page blank, then the bottom of the page has all of the
content that isn't in the index on the right, starting an index width from
the left. Here's a link so you can see for yourself:
http://sfl.london.on.ca.

Obviously, I'm doing something wrong in either the HTML, the CSS or both.
But I'm not sure how to diagnose the problem, let alone fix it.

If anyone can offer a few conceptual points explaining the essence of the
mistake(s) I've made and can point me to a tutorial explaining the correct
way of handling this situation, I would be very grateful. Even a link to the
tutorial alone would be great, if it's the kind of tutorial or reference
that is organized so that you can look for a result you want in an index and
then go to instructions that show you how to accomplish that.

--
Rhino

[Els]

Rhino wrote:

Let me begin by warning you all that I don't have sufficient background in
CSS to state my question with the correct formal terminology so I'll just
use plain English.
That'll do ;-)
Basically, I want to create two columns in my web pages, one for an index
and one for everything else, and I want the pages to print correctly when
the user clicks on the Print button. (I'm not sure if it is correct to say
that I am trying to "float" a box since I'm not quite sure what that means.)
It's not floated. You just put it left on the page, and positioned the
content absolute, where as if you had floated the navigation, there
would be no need for the absolute positioning of the content.
Now, the same information in more detail :-) I want my page to have an index
column occupying roughly 12 to 15% of the width of the page (screen page and
printed page) and I want that index to be on the left hand side of the page.
The index may be longer/taller than the rest of the content on the page, in
fact that will often be the case. The rest of the page will have paragraphs,
images, and the occasional list or table (or both).

At the moment, my pages look fine on the screen - at least when the browser
is using the full screen! - but when I use Print Preview (or Print) the page
splits so that the top of the page has the index on the left with the rest
of the width of the page blank, then the bottom of the page has all of the
content that isn't in the index on the right, starting an index width from
the left. Here's a link so you can see for yourself:
http://sfl.london.on.ca.

You have two stylesheets, one for screen, and one for print. But in
the stylesheet for print, you didn't use all the styles needed for the
positioning. I copied your code locally, and when I replace
media="screen" with media="print", the print stylesheet "works". That
is, it shows the content to the right of the navigation. It's not
exactly readable in black on blue background, I think that for the
print stylesheet, you should make sure it's black on white only, both
for readability and for people's stock of blue ink ;-)

What I think you missed, is that the stylesheet with media="screen",
isn't used when you're printing the page. If you want it to be used,
use media="all" or leave it out altogether.

Also, after your linked stylesheets, you defined the background colour
thus:
<style type="text/css">#homepage {background: #FF9933}</style>
This is picked up for screen, but also for print.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Sherm Pendley]

"Rhino" <no***********************@nospam.com> writes:

Basically, I want to create two columns in my web pages, one for an index
and one for everything else, and I want the pages to print correctly
Els offered a good solution to fixing the problem.

But I'm wondering, since clickable links aren't clickable on paper, is
printing the navigation column correct to begin with? It serves a valuable
purpose on screen, but what purpose does it serve on paper?

Once you sort out the mechanics of using separate stylesheets for screen and
print, you might want to seriously consider using "display=none" for the
navigation div in the print stylesheet.
when the user clicks on the Print button.

But you want it to print incorrectly, or not at all, when they select "File/
Print" instead of clicking the toolbar button? What an odd requirement.

Yes - I'm joking. ;-)

sherm--

--
Cocoa programming in Perl: http://camelbones.sourceforge.net
Hire me! My resume: http://www.dot-app.org

[Rhino]

"Sherm Pendley" <sh***@dot-app.org> wrote in message
news:m2************@Sherm-Pendleys-Computer.local...

"Rhino" <no***********************@nospam.com> writes:

Basically, I want to create two columns in my web pages, one for an index
and one for everything else, and I want the pages to print correctly

Els offered a good solution to fixing the problem.

But I'm wondering, since clickable links aren't clickable on paper, is
printing the navigation column correct to begin with? It serves a valuable
purpose on screen, but what purpose does it serve on paper?

Once you sort out the mechanics of using separate stylesheets for screen
and
print, you might want to seriously consider using "display=none" for the
navigation div in the print stylesheet.

I had planned to do that :-)

In fact, I had _already_ done it but I failed to adjust the print CSS after
the changes to the HTML which I made yesterday. I've now updated the print
CSS; it's not quite right yet because I want to move the page content over
to occupy the space formerly occupied by the menu but I'll get to that soon.

Aside from that, the pages look fine in Opera and IE6 in screen mode *and*
in Print Preview. However, in Firefox, the index is not disappearing when I
use Print Preview. Any ideas why the index won't disappear?

when the user clicks on the Print button.

But you want it to print incorrectly, or not at all, when they select
"File/
Print" instead of clicking the toolbar button? What an odd requirement.

Yes - I'm joking. ;-)

Sorry for my awkward wording :-)

[Rhino]

"Els" <el*********@tiscali.nl> wrote in message
news:p4***************@locusmeus.com...

Rhino wrote:

Let me begin by warning you all that I don't have sufficient background
in
CSS to state my question with the correct formal terminology so I'll just
use plain English.
That'll do ;-)

Basically, I want to create two columns in my web pages, one for an index
and one for everything else, and I want the pages to print correctly when
the user clicks on the Print button. (I'm not sure if it is correct to
say
that I am trying to "float" a box since I'm not quite sure what that
means.)

It's not floated. You just put it left on the page, and positioned the
content absolute, where as if you had floated the navigation, there
would be no need for the absolute positioning of the content.

So, are you saying that the problem is that I didn't float when I should
have? I really don't know; I've heard that absolute positioning is Bad but I
don't know if that means it's bad in every situation or just some
situations; if it's sometimes okay, is it okay in this situation?

Now, the same information in more detail :-) I want my page to have an
index
column occupying roughly 12 to 15% of the width of the page (screen page
and
printed page) and I want that index to be on the left hand side of the
page.
The index may be longer/taller than the rest of the content on the page,
in
fact that will often be the case. The rest of the page will have
paragraphs,
images, and the occasional list or table (or both).

At the moment, my pages look fine on the screen - at least when the
browser
is using the full screen! - but when I use Print Preview (or Print) the
page
splits so that the top of the page has the index on the left with the
rest
of the width of the page blank, then the bottom of the page has all of
the
content that isn't in the index on the right, starting an index width
from
the left. Here's a link so you can see for yourself:
http://sfl.london.on.ca.

You have two stylesheets, one for screen, and one for print. But in
the stylesheet for print, you didn't use all the styles needed for the
positioning. I copied your code locally, and when I replace
media="screen" with media="print", the print stylesheet "works". That
is, it shows the content to the right of the navigation. It's not
exactly readable in black on blue background, I think that for the
print stylesheet, you should make sure it's black on white only, both
for readability and for people's stock of blue ink ;-)

As I said in my reply to Sherm Pendley, I made some changes in the screen
CSS that I forgot to echo in the print CSS; I've now corrected that
situation. It works okay now in IE6 and Opera - the menu and all
"decorative" images are suppressed - and the text is (mostly) black on
white. But the menu hasn't disappeared in Firefox, which has me
wondering....
What I think you missed, is that the stylesheet with media="screen",
isn't used when you're printing the page. If you want it to be used,
use media="all" or leave it out altogether.

Also, after your linked stylesheets, you defined the background colour
thus:
<style type="text/css">#homepage {background: #FF9933}</style>
This is picked up for screen, but also for print.

That was a technique to get the currently-selected page's link to stay
highlighted in the index as long as that page was selected. I hadn't planned
for that technique to affect the printing and, now that I've suppressed the
printing of the menu, it doesn't any more :-)

Rhino

[Els]

Rhino wrote:

"Els" <el*********@tiscali.nl> wrote in message
news:p4***************@locusmeus.com...

Rhino wrote:

Basically, I want to create two columns in my web pages, one for
an index and one for everything else, and I want the pages to
print correctly when the user clicks on the Print button. (I'm
not sure if it is correct to say that I am trying to "float" a
box since I'm not quite sure what that means.)
It's not floated. You just put it left on the page, and positioned the
content absolute, where as if you had floated the navigation, there
would be no need for the absolute positioning of the content.

So, are you saying that the problem is that I didn't float when I should
have?

No, I just explained the difference between floating and what you did.
Not saying it's bad or good or anything.
I really don't know; I've heard that absolute positioning is Bad but I
don't know if that means it's bad in every situation or just some
situations; if it's sometimes okay, is it okay in this situation?
It's bad when you don't understand why it could be bad ;-)
As I said in my reply to Sherm Pendley, I made some changes in the
screen CSS that I forgot to echo in the print CSS; I've now
corrected that situation. It works okay now in IE6 and Opera - the
menu and all "decorative" images are suppressed - and the text is
(mostly) black on white. But the menu hasn't disappeared in
Firefox, which has me wondering....

Not in my Firefox. Menu is gone in print preview.
One problem I do see though, is that in Opera, the print preview shows
black on dark blue still. It's black on white in Firefox and IE.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Beauregard T. Shagnasty]

Stuart Scharf wrote:

Attached is what I get when I go full width on my browser. The columns
overlap.

Please do *not* post binary attachments in text-only newsgroups.

Further, it would be nice if you had stated what browser and version you
are using, because I do not see what you see in my browsers.
Firefox 1.0.7, Opera 8.5, IE6, K-Meleon 0.8.2 all show the page as
expected.

--
-bts
-Warning: I brake for lawn deer

[Stuart Scharf]

Beauregard T. Shagnasty wrote:

Stuart Scharf wrote:

Attached is what I get when I go full width on my browser. The columns
overlap.

Please do *not* post binary attachments in text-only newsgroups.

Further, it would be nice if you had stated what browser and version you
are using, because I do not see what you see in my browsers.
Firefox 1.0.7, Opera 8.5, IE6, K-Meleon 0.8.2 all show the page as
expected.

Sorry, I didn't realize the "no binary attachment" restriction for this
group. (Other groups prefer that a picture is worth 1k words)

The browser is firefox 1.0.7 (on the Apple 2560 X 1600 display)

Stuart

[Barbara de Zoete]

On Mon, 21 Nov 2005 21:18:24 +0100, Stuart Scharf <no****@ll.mit.edu>
wrote:

Beauregard T. Shagnasty wrote:

Stuart Scharf wrote:

Attached is what I get when I go full width on my browser. The columns
overlap.

Please do *not* post binary attachments in text-only newsgroups.

Sorry, I didn't realize the "no binary attachment" restriction for this
group. (Other groups prefer that a picture is worth 1k words)

Which is true here also. But, not sent with the message. Upload it to your
host a a free account somewhere and post an URL to it. Everybody happy.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Beauregard T. Shagnasty]

Stuart Scharf wrote:

Beauregard T. Shagnasty wrote:

Stuart Scharf wrote:

Attached is what I get when I go full width on my browser. The
columns overlap.
Please do *not* post binary attachments in text-only newsgroups.

Further, it would be nice if you had stated what browser and version
you are using, because I do not see what you see in my browsers.
Firefox 1.0.7, Opera 8.5, IE6, K-Meleon 0.8.2 all show the page as
expected.

Sorry, I didn't realize the "no binary attachment" restriction for
this group. (Other groups prefer that a picture is worth 1k words)

Binaries should only be posted to groups with ".binaries." in their
name.
The browser is firefox 1.0.7 (on the Apple 2560 X 1600 display)

Then this must be something peculier to the Mac/Apple, or the Mac
version of Firefox. Since I don't have a Mac ...

--
-bts
-Warning: I brake for lawn deer

[Stuart Scharf]

Beauregard T. Shagnasty wrote:

Stuart Scharf wrote:

Beauregard T. Shagnasty wrote:

Stuart Scharf wrote:
Attached is what I get when I go full width on my browser. The
columns overlap.

Please do *not* post binary attachments in text-only newsgroups.

Further, it would be nice if you had stated what browser and version
you are using, because I do not see what you see in my browsers.
Firefox 1.0.7, Opera 8.5, IE6, K-Meleon 0.8.2 all show the page as
expected.

Sorry, I didn't realize the "no binary attachment" restriction for
this group. (Other groups prefer that a picture is worth 1k words)

Binaries should only be posted to groups with ".binaries." in their
name.

The browser is firefox 1.0.7 (on the Apple 2560 X 1600 display)

Then this must be something peculier to the Mac/Apple, or the Mac
version of Firefox. Since I don't have a Mac ...

No, the display is an Apple, the Computer a Dell, the OS Debian Testing,
The Firefox from the Debian distribution

Stuart