How to make the content left margin?

[fisher999]

Hi,

I tried to use the Css to control the priniting layout. But I find the content not start on left margin. What can I do? Please teach me!



Student

[jscheuer1]

Part of the problem is that you have assigned the id leftbar to more than one element. This will confuse many browsers. If you want to use style in that fashion use a class. Also, even with all id="leftbar" elements set to display:none for printing, you still have their containing tables to deal with. It would be easier to get everything over to the left if there were no tables involved. Try setting this print style for tables:

table {
position:absolute;
display:inline;
width:470px;
}

This won't fix things but, it will give you an idea of the influence that the tables are having over the presentation. If each individual table is treated slightly differently, it might work out.

Better to organize your page using divisions and centering the content by giving the container division width and a margin:0 auto;. Then to print all to the left, just set the margin:0;

[fisher999]

thanks your suggestion. But dont know how to do... because I am a beginner of Css. Can you give more detail suggestion? Thanks!!!

[jscheuer1]

Give this a shot then:

@media print {
*, body { 
background-color:#FFFFFF;
background-image:none;
color:#000000
}
img, #ad, #leftbar, span.left {
display:none;
}
#contentarea {
position:absolute;
left:0;
top:40px;
z-index:1;
}
.px5 {
position:absolute;
left:0;
top:0;
z-index:2;
}
p.bar01 {
color:#000000;
}
}

Replace your existing print styles with it.

[fisher999]

OH.... Thanks your kindly help!!!!! Its work!! Can I make the content appear on 100% width of the page. Because want to save the paper when user want to print. Also, if the content have images, how to show it on the print out? Many Thanks!!

[jscheuer1]

I played with this a bit more and came up with this version:

@media print {
*, body { 
background-color:#FFFFFF!important;
background-image:none;
color:#000000!important;
margin:0!important;
padding:0!important;
}
img, #ad, #leftbar, span.left {
display:none;
}
#contentarea {
position:absolute;
width:100%!important;width:110%;
left:0;
top:40px;
z-index:1;
}
.px5 {
position:absolute;
left:0;
top:0;
z-index:2;
}
}

Among other changes (like getting the heading text color black), the part in red makes it a bit wider in IE. Part of the problem is that all browsers have default printing margins that are beyond your control except on your own browser. IE for some reason gives a wider right margin for this page than other browsers, so to set it at 110% width would make parts of it bleed off of the page in other browsers. With the red line, it will only make it wider in IE but, this is still a bit risky. Remember, whenever you are dealing with the sizes of things, different browsers will handle things differently so, it is better to have a little bit of wasted space than content that cannot be seen because it bleeds over into invisible areas.

[fisher999]

i see, thanks your kindly advice. Yes, I use the Netscape 7.2 to test, but I find the Css not work in Nestcape. Any suggestion?? Also, if the content have images, how to show it on the print out? Many Thanks!!

[jscheuer1]

Well, a test that I setup from your demo page works here in NS 7.2. I think you have altered the test page since I did my local demo. Anyways, as you add new elements, they must be dealt with, as you see fit, in the both the print and ordinary styles.

About printing images, usually a bad idea but, if you must, remove this (red):

@media print {
*, body { 
background-color:#FFFFFF!important;
background-image:none;
color:#000000!important;
margin:0!important;
padding:0!important;
}
img, #ad, #leftbar, span.left {
display:none;
}
#contentarea {
position:absolute;
width:100%!important;width:110%;
left:0;
top:40px;
z-index:1;
}
.px5 {
position:absolute;
left:0;
top:0;
z-index:2;
}
}

[fisher999]

yes!! it is work Thanks!! I have updated the page on the site. I want to add the text it will not dispaly in screen, but it will appear when print out. I have add the id="vad" on css. But it not appear in screen, also in the print out... How to solve it? please advice. Many thanks!!

[jscheuer1]

Well, I think this is getting a little like Sisyphus rolling the rock up the hill. Each time I solve a problem, you create a new one. I am also reminded of an old adage:

Give a man a fish and he will eat for a day. Teach a man to fish and he will sit by the dock all day drinking beer.

Or something like that. Anyways, to edit and update your code so that it will present as desired on the screen as well as desired when printed, you need to know css. Css is not rocket science and comes in handy for many things. The important concept is that whatever you set for something in the regular style area can be added to and/or changed in the:

@media print {

}

area. As for what all these property/value pairs do and as to the various ways they can be assigned to an element or elements, you only need a reference. Here is a good one, there are many others:

http://www.blooberry.com/indexdot/css/

You may, depending upon how much you need to learn, also find the W3Schools CSS tutorial useful (again, there are many others):

http://www.w3schools.com/css/default.asp