HighDots Forums  

2-col with a floating quote between them

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss 2-col with a floating quote between them in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
AT
 
Posts: n/a

Default 2-col with a floating quote between them - 08-05-2003 , 01:59 PM






I'm trying to recreate the layout of a newsletter (produced by an OTS
page-layout application) that is basically a 2-column design with a
quotation in a box that floats between the 2 columns.

You can see the basic design here:

http://www.sparrow-hawk.org/2-col.png

The closest I've come is real kludgy:

#left {
position: absolute ;
top: 50px ;
left: 10px ;
width: 300px ;
}
#right {
position: absolute ;
top: 50px ;
left: 350px ;
width: 300px ;
}
#quoteLeft {
margin-left: -70px ;
margin-right: 20px ;
margin-top: 20px ;
margin-bottom: 20px ;
width: 100px ;
float: left ;
border-top: solid 1px black ;
border-bottom: solid 1px black ;
}
#quoteRight {
margin-right: -70px ;
margin-top: 20px ;
margin-bottom: 20px ;
width: 100px ;
float: right ;
border-top: solid 1px black ;
border-bottom: solid 1px black ;
}

<div id='left'>
blah, blah, blah
<div id='quoteLeft'>isn't this cool</div>
blah, blah, blah
</div>

<div id='right'>
blah, blah, blah
<div id='quoteRight'>isn't this cool</div>
blah, blah, blah
</div>

That is, a div for each of the 2 columns of text, each of which
contains a div for the quote that is has margins set to offset it
correctly and floated left/right accordingly.

This "works" but is very fragile and can easily break with changes in
font size, etc. I'm sure there's got to be a "right" way to do this.
Can anyone help?

pvb

Reply With Quote
  #2  
Old   
AT
 
Posts: n/a

Default Re: 2-col with a floating quote between them - 08-05-2003 , 02:44 PM






paul.v.biron wrote:

Quote:
I'm trying to recreate the layout of a newsletter
(produced by an OTS page-layout application) that is
basically a 2-column design with a quotation in a box
that floats between the 2 columns.
I hope you'll find this article interesting:

http://member.newsguy.com/~jrexon/handwriting.htm

Regards,
--
Juanra || http://html.conclase.net/


Reply With Quote
  #3  
Old   
Headless
 
Posts: n/a

Default Re: 2-col with a floating quote between them - 08-07-2003 , 09:56 AM



Stephen Poley <sbpoley (AT) xs4all (DOT) nl> wrote:

Quote:
I would only recommend PDF for special
cases when you know that a lot of readers (or certain important readers)
will want to print the document.
What's wrong with printing HTML?


Headless

--
Email and usenet filter list: http://www.headless.dna.ie/usenet.htm


Reply With Quote
  #4  
Old   
Lauri Raittila
 
Posts: n/a

Default Re: 2-col with a floating quote between them - 08-07-2003 , 01:30 PM



In article <i3q4jvs8venlu9iprrmfgugb3vmmeifmrf (AT) 4ax (DOT) com>, Headless wrote:
Quote:
Stephen Poley <sbpoley (AT) xs4all (DOT) nl> wrote:

I would only recommend PDF for special
cases when you know that a lot of readers (or certain important readers)
will want to print the document.

What's wrong with printing HTML?
It takes more time to print HTML exactly as intended, on browser end.
For example I had to fight about 15 minutes to get
http://www.student.oulu.fi/~atlas/hallitus/jasenet.html
fit one A4 when printing with IE6. Have it been available as PDF, it
wouldn't have taken much time. (By default it would have printed it very
strangely, missing most of content while using lots of pages.)

Also, PDF form is good for long enaugh stuff to need index/toc. There is
no way to have page numbers in toc using HTML.

If document is just plain text, there is usually no reason to use PDF.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.



Reply With Quote
  #5  
Old   
Lauri Raittila
 
Posts: n/a

Default Re: 2-col with a floating quote between them - 08-07-2003 , 05:04 PM



In article <okc5jvgrvoqh2oja9ku12m56rqglr0bbjg (AT) 4ax (DOT) com>, Headless wrote:
Quote:
Lauri Raittila <lauri (AT) raittila (DOT) cjb.net> wrote:

What's wrong with printing HTML?

It takes more time to print HTML exactly as intended, on browser end.

You cannot control on what size of paper a user will want to print,
Of course not. But I can guess, and much better than with window size.

The difference here is that alternative version for most used paper size
is _sometimes_ worth effort, as there is limited number of paper sizes
commonly used, and there is limitations in paper that are impossible to
overcome when printing HTML.

You can also avoid single lines on new pages, images/tables that are
broken to two pages etc that don't happen in continous media. (CSS to
control for them don't work.)

Quote:
For example I had to fight about 15 minutes to get
http://www.student.oulu.fi/~atlas/hallitus/jasenet.html
fit one A4 when printing with IE6.

Dumb idea. What if the user wants to print on A5, or A3?
As I said, I did that in _browser end_. Meaning, I was printing it. Have
it been available in PDF it would have been easy task to print it. (But I
would have needed to make it available as PDF.)

And, having alternative PDF version for printing will not prevent from
printing HTML version. Of course I would never have PDF linked to be
automatic alternative for printing, as that would confuse user,
especially if acrobat reader wouldn't be installed.

Quote:
Also, PDF form is good for long enaugh stuff to need index/toc. There is
no way to have page numbers in toc using HTML.

CSS2 spec, paged media section.
Sure you can have page numbers. But can you have the same page numbers in
toc? References to certain pages instead of links? No, you can't. That
was what I meaned. Table of contents is pretty useless if there is
neither links to sections, or page numbers. (Of course you can try force
fontsize, margins etc, but that will not work, and takes lots of time.)

Other thing is that there is no working way to print tables etc landscape
from webpage. The CSS that should do that only works in Opera 6.00 - 6.04
print _preview_ AFAIK.


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.



Reply With Quote
  #6  
Old   
Headless
 
Posts: n/a

Default Re: 2-col with a floating quote between them - 08-08-2003 , 01:49 AM



Lauri Raittila <lauri (AT) raittila (DOT) cjb.net> wrote:

Quote:
As I said, I did that in _browser end_.
Learn to write English (really), the above is gobbledygook.

Quote:
Also, PDF form is good for long enaugh stuff to need index/toc. There is
no way to have page numbers in toc using HTML.

CSS2 spec, paged media section.

Sure you can have page numbers. But can you have the same page numbers in
toc? References to certain pages instead of links? No, you can't.
Sure you can, as long as you don't' expect the page numbers to match the
number of pages, but that's pointless anyway. A TOC with references to
numbered pages works fine without that.

Quote:
That
was what I meaned. Table of contents is pretty useless if there is
neither links to sections, or page numbers. (Of course you can try force
fontsize, margins etc, but that will not work, and takes lots of time.)
Indeed, which is why your "solution" is flawed, the same problems trip
up "author intended" PDF printing.

Quote:
Other thing is that there is no working way to print tables etc landscape
from webpage.
Pages are printed in portrait or landscape mode, not individual
elements, and it's a user selectable mode, not to be touched by authors.


Headless

--
Email and usenet filter list: http://www.headless.dna.ie/usenet.htm


Reply With Quote
  #7  
Old   
Stephen Poley
 
Posts: n/a

Default Re: 2-col with a floating quote between them - 08-08-2003 , 04:03 AM



On Thu, 07 Aug 2003 15:56:43 +0100, Headless <invalid_address (AT) dna (DOT) ie>
wrote:

Quote:
Stephen Poley <sbpoley (AT) xs4all (DOT) nl> wrote:

I would only recommend PDF for special
cases when you know that a lot of readers (or certain important readers)
will want to print the document.

What's wrong with printing HTML?
Nothing wrong exactly, but there are several things that one can do in a
word-processor or DTP package that one cannot do in HTML. Page headers
and footers is an example. Control of page breaks is another (available
in CSS, but browser support poor).

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/


Reply With Quote
  #8  
Old   
Lauri Raittila
 
Posts: n/a

Default Re: 2-col with a floating quote between them - 08-20-2003 , 02:58 AM



In article <7eh6jv0sd0bi2g75op8vb5avasaj1a5j20 (AT) 4ax (DOT) com>, Headless wrote:
Quote:
Lauri Raittila <lauri (AT) raittila (DOT) cjb.net> wrote:

As I said, I did that in _browser end_.

Learn to write English (really), the above is gobbledygook.
All the time. I first said I used IE6. Then tried to make it more clear
by saying it is browser. I think you should have understood what I meant.
I meant I was trying to print document using browser. I was _user_. The
fact that I was also author of document was less relevant.

Quote:
Also, PDF form is good for long enaugh stuff to need index/toc. There is
no way to have page numbers in toc using HTML.

CSS2 spec, paged media section.

Sure you can have page numbers. But can you have the same page numbers in
toc? References to certain pages instead of links? No, you can't.

Sure you can, as long as you don't' expect the page numbers to match the
number of pages,
Exactly. What good does it be to say "See page 12 for related information
about foo" when related information is on page 10, 13 or 27 depending on
users font size, margins etc? HTML document that uses links, but those
are not available in print. (they are in some form). With HTML, best you
can do is "See section 5 for related information about foo". If your
sections are 10 page long, it is not much better than nothing.

Quote:
but that's pointless anyway. A TOC with references to
numbered pages works fine without that.
Exactly how?

Quote:
That
was what I meaned. Table of contents is pretty useless if there is
neither links to sections, or page numbers. (Of course you can try force
fontsize, margins etc, but that will not work, and takes lots of time.)

Indeed, which is why your "solution" is flawed, the same problems trip
up "author intended" PDF printing.
Exept that you *can* *force* fontsize, margins etc using PDF. That
doesn't restrict people printing HTML.

Quote:
Other thing is that there is no working way to print tables etc landscape
from webpage.

Pages are printed in portrait or landscape mode, not individual
elements, and it's a user selectable mode, not to be touched by authors.
You mean you don't mind that table will be printed so that one part of
table is on other side of paper when it is too wide to fit portait paper,
instead of it being made landscape, or whole table layout made
differently?


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.



Reply With Quote
  #9  
Old   
Lauri Raittila
 
Posts: n/a

Default Re: 2-col with a floating quote between them - 08-20-2003 , 11:15 AM



In article <nsk6kvgd398t97a0jq0jjf8vfhmn6tggjc (AT) 4ax (DOT) com>, Headless wrote:
Quote:
Lauri Raittila wrote:
HTML document that uses links, but those
are not available in print. (they are in some form). With HTML, best you
can do is "See section 5 for related information about foo". If your
sections are 10 page long, it is not much better than nothing.

I disagree, it's a much better approach than using page numbers. Refer
to sections and list those in a header and/or footer on every page. This
method is also common in classic printed media because it fits the way
users use multi page documents.
And if there is no suitable numbered subsubsubheadings to refer? If
target is something like <dfn id="HTML"><strong>HTML</strong> is computer
code used for www-pages.</dfn>

Quote:
If I'm referred to section 6.3.4 in a TOC then I look at the total
number of sections, if for example it's 12 then I jump directly to a
page roughly halfway in the stack and look at the section numbering on
that page, I don't start at page 1 and then count pages 1, 2, 3, 4, 5
etc.
Sure. Again, when sections are multipage, it will become impossible.
Think about indexes.

Quote:
Indeed, which is why your "solution" is flawed, the same problems trip
up "author intended" PDF printing.

Exept that you *can* *force* fontsize, margins etc using PDF.

Can you force paper size or printing resolution using PDF?
I don't know, but that doesn't matter. AFAIK I can pretty much force how
much text/images fits one page. And it is user choise to print
smaller/bigger pages, he can see what size they are.

Quote:
Other thing is that there is no working way to print tables etc landscape
from webpage.

Pages are printed in portrait or landscape mode, not individual
elements, and it's a user selectable mode, not to be touched by authors.
Can user select that he wants to print tables too wide to fit portait
paper on landcape paper? He could print all tables landscape if CSS for
it would be suppoerted, but it isn't.

Quote:
You mean you don't mind that table will be printed so that one part of
table is on other side of paper when it is too wide to fit portait paper,
instead of it being made landscape, or whole table layout made
differently?

User problem, not an author problem.
User problem is author problem. Otherwise every author could produce
their own XML/SGML/MagicMarkup and say user should have suitable tool to
read it. Too bad if there isn't any.

Quote:
If you suspect that some users
won't be able to print your data in portrait mode then you could include
a suggestion to print in landscape mode.
Like this:
"Some of the tables in this HTML document may not fit on portrait paper.
You can print all the pages landscape, but then [text is hard to read |
you luse 40% paper for margins]."

Better:
"Tables and other things on this HTML document may print strangely. We
recommend printing _PDF version_ of this document" (PDF version being
link to PDF version)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.



Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.