Ooh. Check this out:
W3C Paged Media
I don't understand it, but it seems totally relevant...
Subscribe to HRA Now!
Are you a Google Analytics enthusiast?
Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE!
www.CustomReportSharing.com
From the folks who brought you High Rankings!
More SEO Content
International SEM | Social Media | Search Friendly Design | SEO | Paid Search / PPC | Seminars | Forum Threads | Q&A | Copywriting | Keyword Research | Web Analytics / Conversions | Blogging | Dynamic Sites | Linking | SEO Services | Site Architecture | Search Engine Spam | Wrap-ups | Business Issues | HRA Questions | Online Courses
Sponsored Content
Printable Html Project
Started by
dragonlady7
, Sep 16 2003 09:12 AM
26 replies to this topic
#16
dragonlady7
-
- Active Members
-
- 618 posts
HR 6
- Location:Buffalo, NY
Posted 17 September 2003 - 02:01 PM
#17
dragonlady7
-
- Active Members
-
- 618 posts
HR 6
- Location:Buffalo, NY
Posted 18 September 2003 - 02:39 PM
Conclusion: It's not.
the @page thing does nothing, so I've deleted it from my code.
I've found out a lot more about this. It does print using the same display and printer drivers as Internet Explorer, so whatever works for IE works for this program.
I'm using CSS positioning and it's ALMOST working, but then it's totally not. See, here's what I'm doing:
There are three elements: Header, content, and footer.
I've positioned the header ABSOLUTELY from the top of the PAGE, and the footer absolutely from the bottom. I'm currently trying to position the content RELATIVELY from the BOTTOM of the HEADER.
Can this be done? The only examples I've found of relative positioning were very poorly explained and didn't specify if it was absolutely necessary to position relative to the top of the previous element.
My attempts have yielded no results but I don't know if that's because it's not working, or because it's positioning itself relative to the TOP of the header; both look the same.
If it can only be positioned relative to the top of the header then it's pretty bloody useless and I might as well just position it absolutely, individually in every page (since they all have headers with varying numbers of words in them that are therefore varied sizes).
A second issue, and this one is WEIRD:
The text on the page is 102% (I'm estimating) of the width of the window. No matter the size of the window.
I've sized the divs to be 100% width. I tried then sizing them down to be 90%, to no avail-- it still drops about one letter off the right side of the page.
Why on earth would that be? There is no conceivable reason for that. I simply don't understand, and can't imagine where to begin to fix that.
Please, please, please, does anyone have ANY idea what could possibly be causing that?
the @page thing does nothing, so I've deleted it from my code.
I've found out a lot more about this. It does print using the same display and printer drivers as Internet Explorer, so whatever works for IE works for this program.
I'm using CSS positioning and it's ALMOST working, but then it's totally not. See, here's what I'm doing:
There are three elements: Header, content, and footer.
I've positioned the header ABSOLUTELY from the top of the PAGE, and the footer absolutely from the bottom. I'm currently trying to position the content RELATIVELY from the BOTTOM of the HEADER.
Can this be done? The only examples I've found of relative positioning were very poorly explained and didn't specify if it was absolutely necessary to position relative to the top of the previous element.
My attempts have yielded no results but I don't know if that's because it's not working, or because it's positioning itself relative to the TOP of the header; both look the same.
If it can only be positioned relative to the top of the header then it's pretty bloody useless and I might as well just position it absolutely, individually in every page (since they all have headers with varying numbers of words in them that are therefore varied sizes).
A second issue, and this one is WEIRD:
The text on the page is 102% (I'm estimating) of the width of the window. No matter the size of the window.
I've sized the divs to be 100% width. I tried then sizing them down to be 90%, to no avail-- it still drops about one letter off the right side of the page.
Why on earth would that be? There is no conceivable reason for that. I simply don't understand, and can't imagine where to begin to fix that.
Please, please, please, does anyone have ANY idea what could possibly be causing that?
#18
qwerty
-
- Moderator
-
- 8,287 posts
HR 10
- Location:Somerville, MA
Posted 18 September 2003 - 03:06 PM
I'm terrible at this, but I think I may have found something of use... are you using a "container element"?
Have a look at http://www.stopdesig...3/absolute.html, and look for the text that starts
Have a look at http://www.stopdesig...3/absolute.html, and look for the text that starts
For stopdesign.com, (at the time of this writing) I use absolute positioning for the right column (#subcol). When I designed the templates, I wanted the right column to appear immediately below the header (#header) with no overlap and no gaps between each block.
#19
dragonlady7
-
- Active Members
-
- 618 posts
HR 6
- Location:Buffalo, NY
Posted 18 September 2003 - 04:03 PM
That could be quite helpful. I've also just gotten access to the program for the first time. Hmm...
Well, I'm going home now, and working on SOMETHING ELSE, so I'll resume this tomorrow!! Thanks!
Well, I'm going home now, and working on SOMETHING ELSE, so I'll resume this tomorrow!! Thanks!
#20
Randy
-
- Moderator
-
- 17,540 posts
Convert Me!
Posted 18 September 2003 - 04:57 PM
The thing to remember about CSS and relevancy positioning is that the layer you're positioning gains it's positioning relevance from whatever appears directly before it in your code. This can get quite confusing if you start mixing and matching Absolutely positioned layers and Relevant layers.
Also remember that the pixel value you use in positioning relates only to the top-left corner of the container element you're working with.
For HTML as regards browsers, the following is a very basic example of how you can do it.
That should start your header at the very top-left of the page. The content layer will appear directly below your header with 50 pixels of space between them, and move with the height of the header. And the footer is absolutely positioned to be along the left edge and have its top-left corner begin 800 pixels down from the top. You could make this footer relevant to the content layer too if you wanted to.
The thing to be careful about is that the possible combined height of the three layers does not exceed the total you're allowing for a printed page. You'll have to be a little bit careful of that one since some of the content is going to be dynamically generated.
If you need a more detailed example give a shout. There is a way to do what you want to do with HTML/CSS. I'm not sure I understand the depth of the requirement enough at this point to offer up the exact code you need.
Hope That Helps.
(Edited to correct typo's grrrrrr...)
Randy
ps If you're looking for a good general reference site for CSS here's the one I always use when I forget something: http://www.htmlhelp.com/reference/css/
Also remember that the pixel value you use in positioning relates only to the top-left corner of the container element you're working with.
For HTML as regards browsers, the following is a very basic example of how you can do it.
<html>
<head>
<title>Your Title</title>
<style type="text/css">
<!--
.header { position: absolute; top: 0px; left: 0px; }
.content { position: relative; top: 50px; left: 0px; }
.footer { position: absolute; top: 800px; left: 0px; }
-->
</style>
</head>
<body>
<div class="header">
<p>This is the header.
<p>This is the header.
<p>This is the header.
<p>This is the header.
<div class="content">
<p>This is content.
<p>This is content.
<p>This is content.
<p>This is content.
<p>This is content.
<p>This is content.
<p>This is content.
</div>
</div>
<div class="footer">
This is the footer.
</div>
</body>
</html>That should start your header at the very top-left of the page. The content layer will appear directly below your header with 50 pixels of space between them, and move with the height of the header. And the footer is absolutely positioned to be along the left edge and have its top-left corner begin 800 pixels down from the top. You could make this footer relevant to the content layer too if you wanted to.
The thing to be careful about is that the possible combined height of the three layers does not exceed the total you're allowing for a printed page. You'll have to be a little bit careful of that one since some of the content is going to be dynamically generated.
If you need a more detailed example give a shout. There is a way to do what you want to do with HTML/CSS. I'm not sure I understand the depth of the requirement enough at this point to offer up the exact code you need.
Hope That Helps.
(Edited to correct typo's grrrrrr...)
Randy
ps If you're looking for a good general reference site for CSS here's the one I always use when I forget something: http://www.htmlhelp.com/reference/css/
Edited by Randy, 19 September 2003 - 09:32 PM.
#21
Randy
-
- Moderator
-
- 17,540 posts
Convert Me!
Posted 18 September 2003 - 05:06 PM
The text on the page is 102% (I'm estimating) of the width of the window. No matter the size of the window.
I've sized the divs to be 100% width. I tried then sizing them down to be 90%, to no avail-- it still drops about one letter off the right side of the page.
Most likely it's because of a typo in the code somewhere. Everytime I get something like that I start looking for missing semi-colons and/or missing quotation marks. You definitely have something confusing the browser. I'd have to see the code to take a stab at that one.
Personally, I don't try to set the width or height of a DIV layer via CSS because not all browsers support those attributes. But then again I develop for the Web and this application won't be something people are calling up in their browser.
Randy
#22
dragonlady7
-
- Active Members
-
- 618 posts
HR 6
- Location:Buffalo, NY
Posted 19 September 2003 - 02:45 PM
I had it explained to me this way:
Absolute-positioned items are "removed from the normal flow" of the document. They are absolutely positioned and so neither affect, nor are affected by, the positioning of other objects.
So if a div is positioned absolutely at 0,0 and another div is positioned relatively at 0,0, they will overlap because the relative div is positioned relative to the other items in the normal flow of the document. The absolutely-positioned div is NOT in the normal flow.
So that's what my problem was, trying to use that method.
The method I've settled on for now is this:
Set positions of all items with MARGINS, except for the footer, which I will position absolutely 750 pixels from the TOP of the document. Why? Well, if the document window is resized vertically, the footer will not climb up into the middle of the content. I cannot control effects of horizontal resizing, yet, so I'm going to continue to look into that.
But the end result?
The first two divs are positioned perfectly. .5 inch margin from the right and left, and a fixed number of pixels I haven't decided on yet from the top. That's fine. Then they're another fixed number of pixels from each other, and that works.
The footer always prints at the bottom of the page. I also set it to have a margin equal to the others, and that worked. So, it does what it's supposed to, provided that the body content isn't too long.
Of all the forms I have (9), the one I'm experimenting on has the longest copy and is therefore the most difficult. I've stepped the font size down slightly and in printing, there is no overlap problem. However, it will (i've just found) be displayed in the window of the program, and there is an overlap problem there. I do not know how to resolve that. The boss told me not to worry about it but I'd really rather this didn't look awful on the screen...
I've tried setting the width of the content div to be constant to prevent browser resizing, but I haven't been able to find a good width. When I do, that will probably work-- if their window is too small, it scrolls off to the right. Sure, it doesn't look great, but the window is supposed to be a kind of print preview, and people are used to dealing with side-scrolling in a preview. They know what the forms say anyway. I'd rather it scrolled than overlapped, because they'll think there's something wrong with it if it overlaps.
Absolute-positioned items are "removed from the normal flow" of the document. They are absolutely positioned and so neither affect, nor are affected by, the positioning of other objects.
So if a div is positioned absolutely at 0,0 and another div is positioned relatively at 0,0, they will overlap because the relative div is positioned relative to the other items in the normal flow of the document. The absolutely-positioned div is NOT in the normal flow.
So that's what my problem was, trying to use that method.
The method I've settled on for now is this:
Set positions of all items with MARGINS, except for the footer, which I will position absolutely 750 pixels from the TOP of the document. Why? Well, if the document window is resized vertically, the footer will not climb up into the middle of the content. I cannot control effects of horizontal resizing, yet, so I'm going to continue to look into that.
But the end result?
The first two divs are positioned perfectly. .5 inch margin from the right and left, and a fixed number of pixels I haven't decided on yet from the top. That's fine. Then they're another fixed number of pixels from each other, and that works.
The footer always prints at the bottom of the page. I also set it to have a margin equal to the others, and that worked. So, it does what it's supposed to, provided that the body content isn't too long.
Of all the forms I have (9), the one I'm experimenting on has the longest copy and is therefore the most difficult. I've stepped the font size down slightly and in printing, there is no overlap problem. However, it will (i've just found) be displayed in the window of the program, and there is an overlap problem there. I do not know how to resolve that. The boss told me not to worry about it but I'd really rather this didn't look awful on the screen...
I've tried setting the width of the content div to be constant to prevent browser resizing, but I haven't been able to find a good width. When I do, that will probably work-- if their window is too small, it scrolls off to the right. Sure, it doesn't look great, but the window is supposed to be a kind of print preview, and people are used to dealing with side-scrolling in a preview. They know what the forms say anyway. I'd rather it scrolled than overlapped, because they'll think there's something wrong with it if it overlaps.
#23
qwerty
-
- Moderator
-
- 8,287 posts
HR 10
- Location:Somerville, MA
Posted 19 September 2003 - 03:00 PM
Is it important for the information in the footer to be visible when they open it in the window, or just when it's printed? If it's the latter, I'm thinking you could do something like this (if you want to further complicate things):
Source: http://www.intranetj.../msg/25924.html
In IE5 and other css2 browsers, you can use the media attribute in a stylesheet.
Here we define 3 styles:
hiddenStuff : always hidden;
hiddenPrint : hidden from the printer;
hiddenScreen : hidden from the screen;
<style>
.hiddenStuff,
.hiddenScreen { position: relative;
visibility: hidden;
display: none }
.hiddenPrint { visibility: visible;
display: inline }
/* You can't bundle these into one @ because IE4 goes mental */
@media print {
.hiddenScreen { page-break-before: always;
position: relative;
visibility: visible;
display: inline }
}
@media print {
.hiddenPrint { position: relative;
visibility: hidden;
display: none }
}
</style>
Now all you have to do is divide your page up into spans:
<span class="hiddenPrint"> Won't Print </span>
<span class="hiddenScreen"> Won't display but will print </span>
<span class="hiddenStuff"> Appears nowhere </span>
Note that this won't work properly in IE4 (or Netscape).
Source: http://www.intranetj.../msg/25924.html
#24
dragonlady7
-
- Active Members
-
- 618 posts
HR 6
- Location:Buffalo, NY
Posted 19 September 2003 - 03:31 PM
That's a brilliant idea, Qwerty.
Especially because positioning the table relative to the top of the form isn't working. It's just not responding to changes-- I think the program is just printing it as though it were relatively positioned just below the others. There are problems with this program's printing module-- I can tell by my own tests that it is _not_ the same as IE's, and so it's not quite properly supporting my positioning.
So, I'm going to have to position it relative to the bottom of the page. Which means it's going to look like hell in a browser.
The boss happened by and I asked if it would be OK to simply hide the table. I think that'd be fine.
My only problem is I don't understand @ rules. I've tried them here and there and they seem to just not work. So I don't really know what to do there...
But I will try to make the table invisible somehow, definitely. Your example is probably the right way to do it.
Thanks a bunch! You've been a real trouper at this thread for someone who claims not to know CSS. A testament to the power of the Internet for helping you find information quickly... Not a strength of mine, I'm afraid-- I'm not very good at solving problems by identifying smaller problems to solve. I need to discuss it with other people to help me break it down. I'll never be a solitary genius, I guess. :/ Oh well. Didn't want to be one anyway...
Especially because positioning the table relative to the top of the form isn't working. It's just not responding to changes-- I think the program is just printing it as though it were relatively positioned just below the others. There are problems with this program's printing module-- I can tell by my own tests that it is _not_ the same as IE's, and so it's not quite properly supporting my positioning.
So, I'm going to have to position it relative to the bottom of the page. Which means it's going to look like hell in a browser.
The boss happened by and I asked if it would be OK to simply hide the table. I think that'd be fine.
My only problem is I don't understand @ rules. I've tried them here and there and they seem to just not work. So I don't really know what to do there...
But I will try to make the table invisible somehow, definitely. Your example is probably the right way to do it.
Thanks a bunch! You've been a real trouper at this thread for someone who claims not to know CSS. A testament to the power of the Internet for helping you find information quickly... Not a strength of mine, I'm afraid-- I'm not very good at solving problems by identifying smaller problems to solve. I need to discuss it with other people to help me break it down. I'll never be a solitary genius, I guess. :/ Oh well. Didn't want to be one anyway...
#25
Randy
-
- Moderator
-
- 17,540 posts
Convert Me!
Posted 19 September 2003 - 09:27 PM
I had it explained to me this way:
Absolute-positioned items are "removed from the normal flow" of the document. They are absolutely positioned and so neither affect, nor are affected by, the positioning of other objects.
So if a div is positioned absolutely at 0,0 and another div is positioned relatively at 0,0, they will overlap because the relative div is positioned relative to the other items in the normal flow of the document. The absolutely-positioned div is NOT in the normal flow.
So that's what my problem was, trying to use that method.
That's close, but not quite how the good folks over at W3C would put it. Of course it would have helped a good deal if I hadn't had a couple of minor typo's which had a major effect in the previous code. I just corrected that.
In essence, if you want to position a block element relative to another absolutely positioned block element, you need to use nested DIV's. Or in English, a DIV inside of a DIV. Close your absolutely positioned DIV after your relative positioning is complete.
The at-rules ( @ ) give you a way to control how your document is presented via different devices (screen, printer, etc). Honestly, I've not fooled with that one much other than changing and entire page's font style and size. So I tend to do that on a whole page level, not by individual element. Qwerty's method should work for that though from what little I know of it. I guess a lot depends upon whether the program you're putting it in is fully CSS compliant or not.
Randy
#26
dragonlady7
-
- Active Members
-
- 618 posts
HR 6
- Location:Buffalo, NY
Posted 22 September 2003 - 07:46 AM
>whether the program you're putting it in is fully CSS compliant or not.
We'll find out, won't we!
We'll find out, won't we!
#27
dragonlady7
-
- Active Members
-
- 618 posts
HR 6
- Location:Buffalo, NY
Posted 22 September 2003 - 11:49 AM
Well, it looks like the program *is* compliant.
I'm going to use qwerty's suggestion, and use different visibilities.
There will be two copies of the footer. One will be positioned relative to the content, and will flow wherever it looks best on the screen. That one will be hidden at printing, and instead the absolutely-positioned footer will print, where it looks best on the paper.
How silly is that??
But, it works, so there we have it. A solution.
I'm going to use qwerty's suggestion, and use different visibilities.
There will be two copies of the footer. One will be positioned relative to the content, and will flow wherever it looks best on the screen. That one will be hidden at printing, and instead the absolutely-positioned footer will print, where it looks best on the paper.
How silly is that??
But, it works, so there we have it. A solution.
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users
