Geek asks and answers

Printed Style Sheet with DIV

I have a site that I am trying to make for printing, and I am using a new print stylesheet, but I have a problem. I have a DIV for star ratings, which are just an empty DIV in the html file, but in plain CSS I have background images for real stars.

The div in the html file looks like this:

<div class="example_rating"></div>

The code in the regular stylesheet is as follows:

.example_rating {

  height:40px;

  width:200px;

  margin-left:20%;

  background: url('../stars.png') no-repeat scroll 0 0 transparent;

  }

My problem is that star ratings do not appear in printable web page format at all. I don't have a hidden DIV or anything else, but I'm not sure what I can do to make it appear in print format.

I understand that the question may be a bit vague, but I'm not sure how else to explain it. However, I can give more details if required. Thank!

+3
2

CSS , .

<img>, , .

EDIT:

- , , div ( ). :

<div class="example_rating">
  4/5 stars.
</div>

:

.example_rating {
  color:Transparent;
  /* Alternatively: text-indent: -9999px; */
  height:40px;
  width:200px;
  margin-left:20%;
  background: url('../stars.png') no-repeat scroll 0 0 transparent;
}

2:

:

.example_rating {
  background: none;
}
.example_rating:after {
  content: '4/5 stars'
}

div CSS, , !

+5

... :

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Or in the current stylesheet, place the print styles in

@media print { 
}
-1
source

More articles:


All Articles