We have an HTML page which displays a bunch of pretty bars using divs and repeating backgrounds. We are in the process of making a report out of this that can be printed nicely, but this may take some time because we don't have a reporting framework in place. As an interm solution we'd like to make the HTML version printable. The background of the divs are the only problem, and they don't print because of the default setting (which can't be enabled because the workstations are locked down).
I have found a work around for printing background images, but this doesn't work when the background needs to be repeated.
Are there any other work arounds which might be able to help? I have also been trying to insert an image inside the dive and stretch it, but this is throwing off all the other relative positions and is proving to be very difficult to fix. I am still looking into this however.
I have used this ActiveX Component in situations where controlling the printer output was absolutely neccessary (think printing stickers etc).
The function you'd want is : printBackground
However this doesn't come with their free license but perhaps the cost of that license outweigh the other work arounds implementation time.
Drawback: IE only.
If you can educate your users, there is an option in the print dialog box of IE and Firefox that is labeled something like 'Include Background Images' or 'Print Background Images'
This will include repeating background images.
I couldn't load the link, and I may not be understanding the problem correctly, but...
This is more of a work-around than a solution, but would you be able to make a single image that just appears to be repeated? Or at least, is repeated (for variable browser and screen sizes), but is large enough to be 'proper' for printing (which is a much more standard size)?
The easiest way I can think of achieving this is to have different stylesheet for printing that uses standardised images that fit the containers printed on paper.
The display stylesheet would continue to use the repeated images which wouldn't hinder performance as the full images loaded in the print stylesheet would only be loaded when the page is sent to the printer.
...at least, that's what the HTML spec says should happen. Whether this is actually the case, I can't be 100% sure.
Related
I am trying to use the built in inspector tool in Google Chrome to manipulate the site http://www.di.se (as it probably has one of the most # layouts I have ever seen on a popular website) with around 300 000 visitors daily.
It seems to be mainly built with three HTML frame tags with the names: historyFrame, headerFrame and contentFrame. I can remove the headerFrame that covers a huge part of the view. However, I don't know how to change the contentFrame size so that it will cover the entire screen.
I have tried to add a CSS height property but it does not seem to change anything. If this is solvable I would be very thankful and so would 300000 other users :) Thanks!
The frameset, which is the parent of the frame you removed, specifies the heights for each of the frames, currently rows="0,210,*". So if you remove the header frame, the content frame becomes the second frame and gets a height of 210. By changing this attribute to 0,* the problem should be fixed.
However I'm not able to modify this property in Chrome's toolkit. Maybe this is a limitation of the developer tools of Chrome. After all, frames are old (removed even from HTML5), so maybe they didn't pay much attention to supporting it.
Note though that the top frame contains the advertising that probably pays for the site. If you got this working and all 300.000 users would use your solution, then the site would probably seize to exist, and you got 300.000 unhappy users. So think twice before you do this.
You can do it by:
First deleting the first Frame(header)
and modify this:
from:
rows=".260,*"
To:
rows="1,*"
So you have only the frame you want, no useless data and the frame you want take 100% of the screen.
So when i'll try to print out my document it will start colliding and does not show it the same as it shows in browser. Is there a workaround which wouldn't involve changing any of my css schema just for in case of printing?
As seen from image (i don't have enough rep to post it as image) there is a lot of room in the top and in the sides. I don't understand why is that like this, although i turned margins in the settings to 0 when choosing printing options.
In browser the rows are bigger and no collision.
I don't know if code is needed at this point but could also provide if needed.
It is possible to use media queries just for printing
#media print{
//You can do anything you want here and it will only affect the printed pages.
// Just use normal CSS.
//You can even put the unit cm to a good use here.
}
I'm trying to create a gallery for a mobile site where I have different stylesheets for different sized devices. Within these stylesheets I have several classes which simply set a background url property to each image I want in the gallery.
Only one of these will be displayed at a time. And I will be cycling through the classes using Javascript to display them in a slideshow type presentation.
I am wondering is this method more bandwidth efficient than having all the images as individual img tags within the DOM? By setting these url properties do they get downloaded to the user's browser when they first load the site or are they only downloaded when the class gets set on a div in the DOM?
Simply I am trying to avoid having to download all the different images to the user's device at once. If you know any alternate methods which are better for this sort of thing I am also interested.
You are right, When you set the image backround, the image will only be downloaded if it is used, By this I mean, used as a style on some dom element.
Alternatively, you could 'change' the background-image css property using javascript. This way, you don't even have the image url in your CSS.
If bandwidth is your biggest concern, I would urge you to have a look at the inspector in webkit browsers like Chrome or safari, or with firebug on Firefox to see the 'network' tab, there you have a clear overview of what is loaded, how ( what order ) and how to optimize things. You can also make some stupid mistakes clear like downloading multiple times the same library from different locations and so.
If you just declare the class in css it shouldn't download anything before it is set. however it is a round question and the answer could take a lot of different shapes.
So I would say that yes it is a good way to do it, and it should be more bandwidth efficient (if you don't know that all the images will be loaded eventually anyhow, since you will typically have asynchronous image-loading either way it shouldn't matter much. I guess that if you only load one image initially the other images (i.e. the mentioned img tags) will not interfere making the load a bit more smooth?).
I find it to be a cleaner solution at least if you aren't sure which images will be viewed (which is likely to believe) to use your css-approach. also it's easier to maintain and provide a better design.
That you will be using javascript indicate that you are also doing the client side. And that give you control to choose what to do which is great :)
One alternative could be to have a local cache of the images as well, but that really depends on the problem at hand, if you will have different images and no real possibility to know in advance which images you will need (and perhaps not even how many of them?) then I think that the cleanest way is the way you purpose.
i.e. set up (or dynamically create) css-classes for images and handle all the logic in javascript.
When designing my homepage, I feel like the common knowledge is that it is bad to just have one big picture in the center that gives all of the content. The "right" way to do it would be to chop up the large layed out image into several small backgrounds and make the text use standard html with css background images for layout.
Is the only reason one big image is bad SEO reasons?
A search engine can't make sense of it.
A blind or otherwise visually-impaired person can't make sense of it.
Someone blocking images because he's on a mobile phone with expensive internet can't make sense of it.
There are a few reasons :-)
Also important:
Changes are not easily made to whole, pre-composited images, unless you still have access to the original layered variants. And hopefully they contain text as well, not just pixel data. (Mentioned by others before already. Credits go to pierre and Kendrick)
If you're using background images don't forget to set a text and background color too. Otherwise people not seeing any images might have a hard time deciphering your text (black on black isn't nice to read :-))
You can still use one large image as background. How the text is layed out above that is another matter entirely. In fact, chopping up the image and piecing the pieces together is painful using CSS too. In my experience it's best and easiest to leave background images unchopped and instead composite the rest of the layout above them, using other images or backgrounds if needed. This gives you a little more flexibility when changing a layout again, too.
SEO is one. Handicapped accessibility is another big one -- a screen reader can't read text within an image, typically. Page load time is another one; a user with a slow connection won't see anything useful while the image loads. Lastly, many browsers will use multiple connections to request resources such as images, so they can be loaded simultaneously. If there's just one image, only one connection can be used.
Updating will be tedious; you can also no longer rely on many benefits of CSS.
It's also bad for accessibility (screen readers, text-resizing, different monitor sizes)
It also removes your ability to easily edit text content.
I certainly wouldn't do it if you're looking for a web-developer job, but if you really don't care about the above, you won't be the first person to do it...
I see no reason at all in using imagea to represent something what can easily be achieved with HTML and CSS.
You're putting up a web site to enable communication between you and your visitors. Images and Flash prevent that.
Generally, you design a site with HTML/CSS and text. Only when you wish to add some design that cannot be expressed with standard means, then you use images. But have your site degrade gracefully for those who cannot or does not wish to see images. Let images be an addition, like an advanced version, in no case a replacement for text.
Is it good to use bullet image inplace of browser default bullets for UL to get cross browser result?
Unless it's a very stylized/graphics heavy site, I'd say no. Users don't expect your webpage to have any particular look/feel...but they do expect it to be familiar and intuitive. If you have a completely different theme and a completely custom look, then yes, go for it. If you don't...let the user see what they're used to seeing.
Example: Checkboxes look different on different browsers, but 99% of the time, the same to the user that's always using that browser on their computer. Now using images/javascript to change what those checkboxes look like is slightly jarring, because they're suddenly unfamiliar.
If you're totally immersed in a different environment anyway (example: lots of graphics, black background, etc) then make your styles on anything fit that...for the standard-ish looking webpage that's very light on styles, I'd let the browser defaults prevail.
Well, if you are using list-style-image:url(), then you pretty much enter a world of pain, since different browsers will position the image differently. If, however, you're using background images + padding, then you can indeed get consistent cross-browser results at almost no cost.