Forum Moderators: not2easy
The site is for a newspaper site and they insist on an extremly large header for the site, which will be printed. The header just overwhelms the page. IMO.
I have designed several headers that are smaller, what I would like to do is present this to them with the ability to print the page with the larger header and have the smaller header for the web portion of the site.
Any help would be greatly appreciated, and thanks in advance!
4~css!
Print style sheet one header, Web style sheet another header. Two different headers.
So in the normal css I would put the normal header, then in the print style sheet the normal would be display none, and then put the larger header?
See, the person wants this giant header, I suppose it is the printed newspaper heading, on the site. Problem is it takes up about 1/4 or so of the page. Making it seem as though the site is saying look at my name and not my content.
I thought if they could see that they could have this one way for print and another for web viewing I could get them to change their minds in regards to the giant header they want. :(
for the most part, browser don't print images. So, image replacement in your print stylesheet won't work. You'll have your header graphic in the website - but there's no real way to replace the graphic in the stylesheet, because browsers don't print images.
You can replace it with styled text, but that means you'd have to have the text in the original webite coding, as well (instead of a graphic).
If someone would like to negate me on this, I'd love to hear how to do image replacement for header graphics for print stylesheets, becuase I've been completely unsuccessful in all my endeavors to accomplish the same thing - and all the info I've ever found is "you can't print graphics from a website using a browser."
And the tutorial showed how the print preview etc.. will print the image. You just need to make sure that you don't have your image in percentages. Not that I would put an image in a percentage anyhow. I would use pixels.
If you do a print style sheet and somehow you replace the original header with the one they want to print, it will work.
Take WebmasterWorld for example, look at print preview from your browser, the webmaster world logo would print.
Put both images on the page
On the Print Styleheet - display:none the web page "portion" image.
On the web portion stylesheet, display:none the large print image.
Appreciate your time!
Then in the screen stylesheet, hide the image but place a background image in the DIV that contains the image (and apply height and width to the DIV so it does not collapse on itself).
Then in the print stylesheet, you don't hide the image and don't apply a background image.
Works great on the site I applied this to.
we are trying to convince owner to go with the print style sheet so that we can get the smaller header onto the web instead of one that is almost one quater of the page.
And since the customer is always right, we need to try to swing his/her vote to a different method where they still get what they want, and the web version looks more appealing.
So, there would be some additional editing involved in the print stylesheet.
Hope this makes sense?
The HTML would look like this:
<DIV id="header">
<img src="path-to-image/printheader.gif" width=800 height=300>
</DIV>
In the screen stylesheet:
#header {
background:url(path-to-image/webheader.gif) no-repeat;
width:300px;
height:100px;
}
#header img {
display:none;
}
Nothing is required at all in the print stylesheet - the larger image will print by default. This assumes you are using two individual stylesheets, as I did when I set this up for my site.
I was reading something else today, which sounds a bit more complicated from westciv. It talks about using @page?
Isn't the print style sheet better to use and less complicated?
At least to me it seems as though it is.
What font would you recomend for the print styles? And the size? Would 10 or 12pt be better?
It talks about using @page?
Isn't the print style sheet better to use and less complicated?
What font would you recomend for the print styles? And the size? Would 10 or 12pt be better?
>>Actually it will, I came across a tutorial that explains how to do this.<<
Could you share? 'cause I've been looking for this for quite a while, and have yet to find it! If you can't post a link, at least tell me the google search term to start with so it pops up on the first page when I search! :)
Sometime today I'll get that information to you in a sticky.
4~css
I finally got the print style last night and it worked really really good. The photo printed etc..
Some work was involved as the page was source ordered as well, but I managed to get everything to work out.
In addition to the normal pages they had requested an article type page as well. I had sent them a couple of them, one of which was the same layout as the rest of the site. With the print style sheet, it will work out great. So the whole site should work with the one normal style and the one print style.
heh, so excited that it worked out for me that I had to let you all know, and to thank you all for your help!
