Проблема с таблицей стилей печати

Question

Прежде всего, я признаю, что мои знания HTML и CSS очень ограничены. Я удивлен, что смог создать сайт в первую очередь.

Работая над своим SEO, я понял, что мне нужна версия моего сайта для печати. Мне удалось скрыть элементы, которые я не хочу печатать (картинки, кнопки facebook/pinterest/blog и т. Д.), Но я не могу пропустить две вещи.

1. Я хочу, чтобы мой логотип / заголовок был намного меньше на листе для печати.

2. Я не могу избавиться от места на левой стороне, которое занимает моя навигация (боковая панель). Видимо не достаточно просто это скрыть?

Мой веб-сайт www.minnesotamaryingman.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

На самом деле он выглядит довольно прилично на моем MacBook Pro в Chrome и в Safari, так что я предполагаю, что вы выяснили проблему с Navbar слева. Чтобы сделать логотип меньше, я бы просто включил тег id в изображение логотипа, а затем установил его в файле print.css вместо того, чтобы просто установить новую высоту и ширину для заголовка. Кроме того, важно указать единицы измерения в размере, поэтому используйте "px" после числа, как показано ниже!

В вашем файле:

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

И в вашем print-css:

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