인쇄 스타일 시트 관련 문제

Question

먼저, HTML과 CSS에 대한 지식이 매우 제한적이라는 것을 인정합니다. 나는 처음부터 웹 사이트를 만들 수 있었다는 것에 놀랐다.

내 SEO에서 일하면서 내 웹 사이트의 프린터 친숙 버전이 필요하다는 것을 알게되었습니다. 나는 인쇄하고 싶지 않은 요소 (그림, facebook/pinterest/블로그 버튼 등)를 숨길 수 있었지만 두 가지를 통과 할 수 없었다.

1. 로고/헤더가 인쇄 가능한 시트보다 훨씬 작습니다.

2. 내 탐색 (사이드 바)이 차지하고있는 왼쪽의 공간을 제거 할 수 없습니다. 분명히 숨기는 것만으로는 충분하지 않습니까?

내 웹 사이트 www.minnesotamarryingman.com하고 당신이 그것을 인쇄 할 경우, 당신은보다 큰 필요-될 헤더와 큰 왼쪽 편에 열을 볼 수 있습니다. 여기

이

#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} 

누군가가 나를보고 도와 주실 래요 ... 내 print.css를 위해 무엇을 어디 잘못된거야?

Answer 1

Chrome과 Safari의 MacBook Pro에서 실제로보기 흉하게 보였으므로 왼쪽의 Navbar 문제를 파악한 것 같습니다. 로고를 더 작게 만들려면 로고 이미지에 ID 태그를 포함시킨 다음 헤더의 새로운 높이와 너비를 설정하는 대신 print.css에 설정해야합니다. 또한 크기 단위를 말하는 것이 중요합니다. 아래 그림과 같이 숫자 뒤에 'px'를 사용하십시오!

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

그리고 당신의 인쇄 CSS의 : 파일에서

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