通过CSS实现两列？ [英] Implementing two columns via CSS?

问题描述

让我首先警告大家我没有足够的背景

CSS用正确的正式术语陈述我的问题所以我只会

使用普通英语。


基本上，我想在我的网页中创建两列，一个用于索引

，另一个用于其他所有列，以及当用户点击打印按钮时，我希望页面正确打印。 （我不确定说'

是否正确我试图浮动一个盒子，因为我不太确定这是什么意思。）


现在，更详细的相同信息:-)我希望我的页面有一个索引

列占据页面宽度的大约12到15％（屏幕页面）并且

打印页面）我希望该索引位于页面的左侧。

索引可能比其他内容更长/更高页面，在

这个事实中经常会出现这种情况。页面的其余部分将有段落，

图像，以及偶尔的列表或表格（或两者）。


目前，我的页面看起来很好在屏幕上 - 至少当浏览器

使用全屏时！ - 但是当我使用打印预览（或打印）时，页面

拆分，以便页面顶部的索引位于左侧，其余为

的宽度页面空白，然后页面底部的所有

内容都不在右边的索引中，从左边开始索引宽度

左边。这是一个链接，您可以自己查看：
http：// sfl。 london.on.ca 。


显然，我在HTML，CSS或两者中做错了。

但是我不确定如何诊断问题，更不用说修复它了。


如果有人能提供一些概念点来解释

的本质错误我已经制作并可以指导我一个教程解释正确处理这种情况的方法，我将非常感激。即使是单独链接到

教程也会很棒，如果它是那种教程或参考

的组织，那么你可以找到你的结果想要一个索引和

然后去指示你如何实现这个目标。


-

犀牛

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

推荐答案

Rhino写道：

Rhino wrote:

让我先警告你，我没有足够的背景在CSS中用正确的正式术语陈述我的问题所以我只会使用简单的英语。


那样做;-)

基本上，我想在我的网页上创建两列，一个用于索引
和一个用于其他一切，我想在用户点击打印按钮时正确打印页面。 （我不确定说我试图漂浮一个盒子是否正确，因为我不太确定这意味着什么。）


它没有漂浮。你只需将它留在页面上，并将

内容定位为绝对值，就好像你已经漂浮了导航一样，那里没有b / b
的绝对定位内容。

现在，相同的信息更详细:-)我希望我的页面有一个索引
列占据页面宽度的大约12到15％（屏幕页面）并打印页面）我希望该索引位于页面的左侧。
索引可能比页面上其他内容更长/更高，
事实往往是这样的。页面的其余部分将包含段落，
图像，以及偶尔的列表或表格（或两者）。

目前，我的页面在屏幕上看起来很好 - 至少在浏览器
正在使用全屏！ - 但是当我使用打印预览（或打印）页面分割时，页面顶部的索引位于左侧，其余页面宽度为空白，则底部为该页面包含右侧索引中的所有内容，从左侧开始索引宽度。这是一个链接，您可以自己查看：
http：// sfl。 london.on.ca 。

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.

你有两个样式表，一个用于屏幕，一个用于打印。但是在

打印样式表中，你并没有使用

定位所需的所有样式。我在本地复制你的代码，当我更换

media =" screen"使用media =print，打印样式表工作。那个

是，它显示了导航右侧的内容。这不是

蓝色背景上的黑色完全可读，我认为对于

打印样式表，你应该确保它只是白色的黑色，

的可读性和人们的蓝墨水量;-)


我认为你错过了，是带有media =&的样式表;屏幕，

在您打印页面时不会被使用。如果你想使用它，

使用media =" all"或者完全不管它。


此外，在您链接的样式表之后，您定义了背景颜色

因此：

< style type =" text / css"> #homepage {background：＃FF9933}< / style>

这个用于屏幕，也用于打印。


-

Els http://locusmeus.com/

Sonhos vem。 Sonhos v？£。 O resto ?? crisfeito。

- Renato Russo -

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 -

" Rhino" <无******** @ nospam.com>写道：

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

基本上，我想在我的网页中创建两列，一个用于索引
，另一个用于其他所有列，我希望页面正确打印


Els为解决问题提供了一个很好的解决方案。


但我很想知道，因为可点击的链接无法在纸上点击，

打印导航栏是否正确？它在屏幕上提供了一个有价值的

目的，但它在纸上的用途是什么？


一旦你理清了使用单独的样式表进行屏幕和

打印，您可能需要认真考虑使用display = none;打印样式表中的

导航div。
当用户点击打印按钮时
。

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.

但是当你选择文件/

打印时，你希望它打印不正确，或者根本不打印。而不是单击工具栏按钮？多么奇怪的要求。


是的 - 我在开玩笑。 ;-)


sherm--


-

Perl中的Cocoa编程： http://camelbones.sourceforge.net

雇用我！我的简历： http://www.dot-app.org

" Sherm Pendley" < SH *** @ dot-app.org>在消息中写道

news：m2 ************ @ Sherm-Pendleys-Computer.local ...

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

" Rhino" <无******** @ nospam.com>写道：

"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为解决这个问题提供了一个很好的解决方案。

但我想知道，因为可点击的链接无法在纸上点击，所以
打印导航栏正确开始？它在屏幕上提供了一个有价值的用途，但它在纸上的用途是什么？

一旦你理清了使用单独的样式表用于屏幕的机制
和
打印，您可能要认真考虑使用display = none;打印样式表中的
导航div。

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.

我原本计划这样做:-)


其实我是_already_已经_already_完成了但是我没有调整打印CSS

我昨天对HTML做出的更改。我现在更新了打印

CSS;它还不是很正确，因为我想将页面内容移到

以占据菜单以前占用的空间，但我很快就会到达。


除此之外，在屏幕模式下，Opera和IE6中的页面看起来很好*和打印预览中的*

。但是，在Firefox中，当我使用打印预览时，索引并没有消失。当用户点击打印按钮时，有什么想法为什么索引不会消失？

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?

。

但是当你选择
文件/
打印时，你希望它打印不正确，或者根本不打印。而不是单击工具栏按钮？多么奇怪的要求。

是的 - 我在开玩笑。 ; - ）

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

这篇关于通过CSS实现两列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！