打印样式表有问题

Question

首先，我承认我对HTML和CSS的了解非常有限。我很惊讶我能够创建一个网站。

在我的SEO工作中，我意识到我需要一个打印机友好版本的网站。我已经能够隐藏我不想要打印的元素（图片，facebook / pinterest /博客按钮等），但我无法通过两件事。

1. 我希望我的徽标/标题在可打印的纸张上小得多。

2. 我无法摆脱导航（侧边栏）占据的左侧空间。显然仅仅隐藏它是不够的？

我的网站是www.minnesotamarryingman.com，如果你打印出来，你可以看到比需要更大的标题和大的左侧列。

这是我的print.css ...

#header {width:128; height:29;}

#body {margin:0; padding:0; float: none; line-height: 1.4em; word-spacing:1px; letter-spacing:0.2px; font: 16px Arial, Helvetica,"Lucida Grande", serif; color: #000;}

div#sidebar{display: none}

div#pinterest{display: none}

div#pinterest1{display: none}

div#facebook{display: none}

div#blog{display: none}

div#picture1{display: none}

div#picture2{display: none}

div#list{display: none}

有人可以帮我看看我哪里出错吗？

Answer 1

在Chrome和Safari上我的MacBook Pro上看起来相当不错，所以我猜你在左边找出了Navbar问题。为了使徽标更小，我只需在徽标图像中包含一个id标记，然后在print.css中设置它，而不是仅为标题设置新的高度和宽度。另外，重要的是要说明单位的大小，所以在数字后面使用'px'，如下所示！

在您的档案中：

<img src="....." id="logo">

在你的print-css中：

#logo { width:128px; height:29px; }