|
|||||||
New to SitePoint Forums? Register here for free!
|
![]() |
|
|
Thread Tools | Display Modes |
|
|
|
|
#1 |
|
SitePoint Member
Join Date: Oct 2006
Posts: 3
|
Hi, I'm stumped. I'm new to css but have the site point books, so I read.... I have a javascript that writes a new document to a new screen by filling out a form. I want to use @page and designate an absolute text/content area. I also want them to be able to have a background choice or none if they desire. The body background won't do because when attempting to print it tiles and stretches the text to page. My margins for the text area need to be left=90px, top=90px, right=90px and bottom=100px.
I'll explain in short what I am trying to accomplish. (I create personalized letters; birthday, santa etc.) I'm attempting to make them printable by my members and not by me. the page is located; http://www.personalizedletter.com/Le...printtest.html the letter text on the form is a very long test to check for unwanted overlap and tiling. Can someone please help direct me to the right answer for my problem? Thankyou Below is the page code:<HTML> <TITLE></TITLE> <HEAD> <script language="JavaScript" type="text/javascript"> <!-- function createit(form) { lrgewin = window.open("about:blank","","height=684,width=540,scrollbars=yes,toolbar=yes, resizable=no,menubar=yes") doc = lrgewin.document; doc.open('text/html'); doc.write("<html><head><title>Christmas Letter Test<\/title><\/head>"); doc.write("<body background='frostsanta8x10.jpg' marginwidth=0 marginheight=0 topmargin=0 leftmargin=0 font face='Lucida Sans, Arial, Veranda, Impact' text='3e66ae'>"); doc.write("<h3 align='center'></h3>"); doc.write("<br><br><br><br><br>"); doc.write("<blockquote><blockquote>"); doc.write("It was lunch time at the North Pole."); doc.write("Moe and Joe Jingle, two elves from the Nintendo division, slipped outside the toy factory and quietly"); doc.write(" raced behind the reindeer barn.<br>\n<br>\n You got it? Joe asked. Moe pulled out a sheaf of papers and"); doc.write(" smiled slyly. Yep, he said. Got it. They huddled together as Moe unfolded the papers.<br>\n<br>\n So"); doc.write(" who are we reading about today? Joe asked anxiously, trying to peer over Moe's shoulder. Santa had never"); doc.write(" installed satellite TV at the North Pole, which meant entertainment was mainly limited to watching"); doc.write(" reindeer games and playing hockey. Joe and Moe were tired of both. So the two had hacked into Santa's"); doc.write(" recently computerized Naughty and Nice list to read about the lives of the faraway people who"); doc.write(" awaited the red-suited gentleman's visit every year.<br>\n<br>\n Let's see. Today we've got some"); doc.write(" folks from <!---->" + form.hometown_0.value + ", Moe said.<br>\n<br>\n Wow! They've got <!---->" + form.noun_1.value + " there! Joe said. Joe's"); doc.write(" dream was to live in <!---->" + form.hometown_2.value + ". I bet this one's gonna be good. <br>\n<br>\nMoe's eyes skimmed the paper. Sorry."); doc.write(" Don't think so. Doesn\'t look too exciting.\"<br>\n<br>\nJoe's face fell. Well, might as well"); doc.write(" read it anyway. We don't have anything better to do. He leaned against the reindeer barn and"); doc.write(" stuck his tongue out to catch the snowflakes that had started falling.<br>\n<br>\n Let's see,"); doc.write(" Moe said. <!---->" + form.Family_members_3.value + " are their names. Sounds like they lead a pretty normal life."); doc.write(" <!---->" + form.Child_4.value + " has a few marks in the Naughty column, but still got an overall Nice rating. <br>\n<br>\n Darn. Nice people are always "); doc.write(" so boring, Joe said. He had moved away from the building and was now leaning this way and that"); doc.write(" with his tongue out as he maneuvered to catch the falling snow.<br>\n<br>\n Well, it's not all bad."); doc.write(" Says here that they <!---->" + form.events__5.value + ". <br>\n<br>\n Hey, that's interesting. What else? <br>\n<br>\nMoe's eyes continued down"); doc.write(" the page. They also <!----> " + form.events__6.value + " . <br>\n<br>\n What?!? Joe yelled, forgetting all about catching snow on his tongue."); doc.write(" I\'ve always wanted to do that! <br>\n<br>\n Calm down, calm down, Moe said, motioning with his"); doc.write(" hand. <br>\n<br>\nJoe went back to his snowflake catching. I guess these people aren't as boring as"); doc.write(" I feared. He leaned his head way back to catch a snowflake and his green elf hat fall into the snow with"); doc.write(" a soft jingle from the bell on top. What else? <br>\n<br>\n <!----> " + form.events__7.value + " .\"<br>\n<br>\nJoe took a break"); doc.write(" from trying to catch snowflakes and looked at his watch. Hey, we better get something to eat before we"); doc.write(" get back to the toy factory. Anything else before we grab some grub? <br>\n<br>\nMoe skimmed the list."); doc.write(" Well, it also says <!----> " + form.events__8.value + " . <br>\n<br>\nJoe swiped at one more snowflake with his tongue. Think you can get another file"); doc.write(" tomorrow? <br>\n<br>\n Sure. No problem. Santa will never know. He and Joe turned and headed off to"); doc.write(" the cafeteria to get lunch. <br>\n<br>\nThey never even saw the man in the red suit who was quietly"); doc.write(" adding names to his Naughty list.<br>\n<br>\n"); doc.write("</blockquote></blockquote>"); doc.write("\n<\/body>\n<\/html>"); doc.close(); } //--> </script> <!-- #EndEditable --> </HEAD> <BODY> <!-- #BeginEditable "mainbody" --> <table border="1" width="100%" bordercolorlight="#FFFFFF" cellpadding="5" bordercolordark="#FFFFFF" id="table3"> <tr> <td rowspan="2" style="font-family: Arial, Helvetica, sans-serif"> <p align="center"> <font color="#FF0000"> <b> <span lang="en-us"><font size="3">Instant Christmas Story Generator</font><br> Elves at the North Pole<br> </span></b></font></p> <p align="left"> <body> To create your instant Christmas letter<font size="2"><span lang="en-us">, simply fill in the boxes below and then click the Create button. You will then be able to copy and print the story on your own letterhead. For best results, you can put more than one sentence in each box. See the sample below for ideas. </span> </font> </BODY></p> <hr> <p align="center"> <font color="#FF0000"> <b> <span lang="en-us"><br> Elves at the North Pole</span></b></font></p> <form name="xmasstory"> <font face="Verdana, Arial, sans-serif">It was lunch time at the North Pole. Moe and Joe Jingle, two elves from the Nintendo division, slipped outside the toy factory and quietly raced behind the reindeer barn.<br><br> You got it? Joe asked. Moe pulled out a sheaf of papers and smiled slyly. Yep, he said. Got it. They huddled together as Moe unfolded the papers.<br><br> So who are we reading about today? Joe asked anxiously, trying to peer over Moe's shoulder. Santa had never installed satellite TV at the North Pole, which meant entertainment was mainly limited to watching reindeer games and playing hockey. Joe and Moe were tired of both. So the two had hacked into Santa's recently computerized Naughty and Nice list to read about the lives of the faraway people who awaited the red-suited gentleman's visit every year.<br><br> Let's see. Today we've got some folks from <input type="text" name="hometown_0">, Moe said.<br><br> Wow! They've got <input type="text" name="noun_1"> there! Joe said. Joe's dream was to live in <input type="text" name="hometown_2">. I bet this one's gonna be good. <br><br>Moe's eyes skimmed the paper. Sorry. Don't think so. Doesn't look too exciting."<br> </font><p>Joe's face fell. Well, might as well read it anyway. We don't have anything better to do. He leaned against the reindeer barn and stuck his tongue out to catch the snowflakes that had started falling.<br> <br> Let's see, Moe said. <font face="Verdana, Arial, sans-serif"><input type="text" name="Family_members_3"></font> are their names. Sounds like they lead a pretty normal life. <font face="Verdana, Arial, sans-serif"> <input type="text" name="Child_4"></font> has a few marks in the Naughty column, but still got an overall Nice rating. <br> <br> Darn. Nice people are always so boring, Joe said. He had moved away from the building and was now leaning this way and that with his tongue out as he maneuvered to catch the falling snow.<br> <br> Well, it's not all bad. Says here that they <font face="Verdana, Arial, sans-serif"> <input type="text" name="events__5"></font>. <br> <br> Hey, that's interesting. What else? <br> </p> <p>Moe's eyes continued down the page. They also <font face="Verdana, Arial, sans-serif"> <input type="text" name="events__6"></font>. <br> <br> What?!? Joe yelled, forgetting all about catching snow on his tongue. I've always wanted to do that! <br> <br> Calm down, calm down, Moe said, motioning with his hand. <br> <br>Joe went back to his snowflake catching. I guess these people aren't as boring as I feared. He leaned his head way back to catch a snowflake and his green elf hat fall into the snow with a soft jingle from the bell on top. What else? <br> <br> <font face="Verdana, Arial, sans-serif"><input type="text" name="events__7"></font>."<br> <br> Joe took a break from trying to catch snowflakes and looked at his watch. Hey, we better get something to eat before we get back to the toy factory. Anything else before we grab some grub? <br> <br>Moe skimmed the list. Well, it also says <font face="Verdana, Arial, sans-serif"> <input type="text" name="events__8"></font>. <br> <br>Joe swiped at one more snowflake with his tongue. Think you can get another file tomorrow? <br> <br> Sure. No problem. Santa will never know. He and Joe turned and headed off to the cafeteria to get lunch. <br> </p> <p>They never even saw the man in the red suit who was quietly adding names to his Naughty list.<br> </p> <p><br> <font face="Verdana, Arial, sans-serif"> <input type="reset" value="Clear"></font> <font face="Verdana, Arial, sans-serif"> <input type="button" onclick="createit(document.xmasstory)" value="Create"></font> </p> </form></p> </BODY> </HTML> |
|
|
|
|
|
#2 |
|
Non-Member
![]() ![]() ![]() ![]() ![]() Join Date: Jul 2006
Location: Dublin, NH
Posts: 901
|
ok, well first off your title should be INSIDE the <head></head> not outside it... you are opening the body tag TWICE, you are using a table for no reason I can actually fathom, and you are in DESPARATE need of using CSS.
Hang on, touch-up in progress. |
|
|
|
|
|
#3 |
|
SitePoint Member
Join Date: Oct 2006
Posts: 3
|
Thank you! Yes, I just caught the head and title after I posted, but you are right.... desperately need css for this situation. I know what I needed could be done, that css would probably be the answer, but I just am too inexperieced in css. Thank you, waiting patiently....
![]() |
|
|
|
|
|
#4 |
|
Non-Member
![]() ![]() ![]() ![]() ![]() Join Date: Jul 2006
Location: Dublin, NH
Posts: 901
|
You were also opening a table without CLOSING a table... and you really need to 'ease up' on the use of the FONT tag. (which in this day and age there's very few good reasons to use)
Here's how I'd do it CSS-wise, reduced your markup to something a bit more... consistant, and I 'tweaked up' the javascript a notch as well. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Instant Christmas Story Generator</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript"><!--
function createit(form) {
new_window=window.open("about:blank","","height=684,width=540,scrollbars=yes,toolbar=yes,resizable=no,menubar=yes")
new_window.document.open('text/html');
new_window.document.write(
"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd\">\n"+
"<html xmlns=\"http://www.w3.org/1999/xhtml\">\n"+
"<head>\n"+
"<title>Christmas Letter Part 2</title>\n"+
"<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />\n"+
"<style type=\"text/css\">\n"+
" * {\n"+
" margin:0px;\n"+
" padding:0px;\n"+
" }\n"+
" body {\n"+
" background:url(frostsanta8x10.jpg) top left no-repeat;\n"+
" font-family:Verdana, Arial, sans-serif;\n"+
" color:#3E66AE;\n"+
" margin:12px;\n"+
" padding:8px;\n"+
" }\n"+
" h3 {\n"+
" font-size:1em;\n"+
" line-height:1.2em;\n"+
" margin-bottom:5em;\n"+
" text-align:center;\n"+
" }\n"+
" #header {\n"+
" }\n"+
" p {\n"+
" margin-bottom:1em;\n"+
" }\n"+
"</style>\n"+
"</head></body>\n"+
" <h3>Part 2</h3>\n"+
" <blockquote>\n"+
" <p>\n"+
" It was lunch time at the North Pole. Moe and Joe Jingle, two elves from the Nintendo division, slipped outside the toy factory and quietly raced behind the reindeer barn.\n"+
" </p><p>\n"+
" You got it? Joe asked. Moe pulled out a sheaf of papers and smiled slyly. Yep, he said. Got it. They huddled together as Moe unfolded the papers.\n"+
" </p><p>\n"+
" So who are we reading about today? Joe asked anxiously, trying to peer over Moe’s shoulder. Santa had never installed satellite TV at the North Pole, which meant entertainment was mainly limited to watching reindeer games and playing hockey. Joe and Moe were tired of both. So the two had hacked into Santa’s recently computerized Naughty and Nice list to read about the lives of the faraway people who awaited the red-suited gentleman’s visit every year.\n"+
" </p><p> \n"+
" Let’s see. Today we’ve got some folks from "+form.hometown_0.value+", Moe said.\n"+
" </p><p>\n"+
" Wow! They’ve got "+form.noun_1.value+" there! Joe said. Joe’s dream was to live in "+form.hometown_2.value+". I bet this one’s gonna be good.\n"+
" </p><p>\n"+
" Moe’s eyes skimmed the paper. \"Sorry. Don’t think so. Doesn’t look too exciting.\"\n"+
" </p><p>\n"+
" Joe’s face fell. Well, might as well read it anyway. We ’ have anything better to do. He leaned against the reindeer barn and stuck his tongue out to catch the snowflakes that had started falling.\n"+
" </p><p>\n"+
" Let’s see,\n"+
" Moe said. "+form.Family_members_3.value+" are their names. Sounds like they lead a pretty normal life. "+form.Child_4.value+" has a few marks in the Naughty column, but still got an overall Nice rating.\n"+
" </p><p>\n"+
" Darn. Nice people are always so boring, Joe said. He had moved away from the building and was now leaning this way and that with his tongue out as he maneuvered to catch the falling snow.\n"+
" </p><p>\n"+
" Well, it’s not all bad. Says here that they "+form.events__5.value+".\n"+
" </p><p>\n"+
" Hey, that’s interesting. What else?\n"+
" </p><p>\n"+
" Moe’s eyes continued down the page. They also "+form.events__6.value+".\n"+
" </p><p>\n"+
" What?!? Joe yelled, forgetting all about catching snow on his tongue. I’ve always wanted to do that!\n"+
" </p><p>\n"+
" Calm down, calm down, Moe said, motioning with his\n"+
" hand.\n"+
" </p><p>\n"+
" Joe went back to his snowflake catching. I guess these people aren’t as boring as I feared. He leaned his head way back to catch a snowflake and his green elf hat fall into the snow with a soft jingle from the bell on top. What else?\n"+
" </p><p>\n"+
" "+form.events__7.value+".\n"+
" </p><p>\n"+
" Joe took a break from trying to catch snowflakes and looked at his watch. Hey, we better get something to eat before we get back to the toy factory. Anything else before we grab some grub?\n"+
" </p><p>\n"+
" Moe skimmed the list.\n"+
" Well, it also says "+form.events__8.value+".\n"+
" </p><p>\n"+
" Joe swiped at one more snowflake with his tongue. Think you can get another file tomorrow?\n"+
" </p><p>\n"+
" Sure. No problem. Santa will never know. He and Joe turned and headed off to the cafeteria to get lunch.\n"+
" </p><p>\n"+
" They never even saw the man in the red suit who was quietly adding names to his Naughty list. \n"+
" </p>\n"+
" </blockquote>\n"+
"</body></html>"
);
new_window.document.close();
}
//--></script>
<style type="text/css">
body {
margin:12px;
padding:8px;
color:#000;
border:2px solid #CCC;
font-family:Verdana, Arial, sans-serif;
}
h1 {
font-size:1.2em;
line-height:1.2em;
text-align:center;
color:#F00;
}
h2 {
font-size:1em;
line-height:1.2em;
font-weight:bold;
text-align:center;
color:#F00;
}
p {
margin-bottom:1em;
}
#header {
border-bottom:2px solid #CCC;
margin-bottom:1em;
}
#header p {
font-size:0.8em;
line-height:1.2em;
}
#header h2 {
margin-bottom:5em;
}
#header strong {
font-weight:normal;
font-size:1.2em;
}
#content h2 {
margin-bottom:1em;
}
</style>
</head><body>
<div id="header">
<h1>Instant Christmas Story Generator</h1>
<h2>Elves at the North Pole</h2>
<p>
<strong>To create your instant Christmas letter</strong>,
simply fill in the boxes below and then click the Create button. You will then be able to copy and print the story on your own letterhead. For best results, you can put more than one sentence in each box. See the sample below for ideas.
</p>
</div>
<div id="content">
<h2>Elves at the North Pole</h2>
<form id="xmasstory" action="">
<p>
It was lunch time at the North Pole. Moe and Joe Jingle, two elves from the Nintendo division, slipped outside the toy factory and quietly raced behind the reindeer barn.
</p><p>
You got it? Joe asked. Moe pulled out a sheaf of papers and smiled slyly. Yep, he said. Got it. They huddled together as Moe unfolded the papers.
</p><p>
So who are we reading about today? Joe asked anxiously, trying to peer over Moe's shoulder. Santa had never installed satellite TV at the North Pole, which meant entertainment was mainly limited to watching reindeer games and playing hockey. Joe and Moe were tired of both. So the two had hacked into Santa's recently computerized Naughty and Nice list to read about the lives of the faraway people who awaited the red-suited gentleman's visit every year.
</p><p>
Let’s see. Today we’ got some folks from <input type="text" name="hometown_0" />, Moe said.
</p><p>
Wow! They've got <input type="text" name="noun_1" /> there! Joe said. Joe's dream was to live in <input type="text" name="hometown_2" />. I bet this one’s gonna be good.
</p><p>
Moe's eyes skimmed the paper. Sorry. don’t think so. Doesn't look too exciting.‘
</p><p>
Joe's face fell. Well, might as well read it anyway. We don’t have anything better to do. He leaned against the reindeer barn and stuck his tongue out to catch the snowflakes that had started falling.
</p><p>
Let’s see, Moe said. <input type="text" name="Family_members_3" /> are their names. Sounds like they lead a pretty normal life. <input type="text" name="Child_4" /> has a few marks in the Naughty column, but still got an overall Nice rating.
</p><p>
Darn. Nice people are always so boring, Joe said. He had moved away from the building and was now leaning this way and that with his tongue out as he maneuvered to catch the falling snow.
</p><p>
Well, it's not all bad. Says here that they <input type="text" name="events__5" />.
</p><p>
Hey, that's interesting. What else?
</p><p>
Moe's eyes continued down the page. They also <input type="text" name="events__6" />.
</p><p>
What?!? Joe yelled, forgetting all about catching snow on his tongue. I've always wanted to do that!
</p><p>
Calm down, calm down, Moe said, motioning with his hand.
</p><p>
Joe went back to his snowflake catching. I guess these people aren't as boring as I feared. He leaned his head way back to catch a snowflake and his green elf hat fall into the snow with a soft jingle from the bell on top. What else?
</p><p>
<input type="text" name="events__7" />.
</p><p>
Joe took a break from trying to catch snowflakes and looked at his watch. Hey, we better get something to eat before we get back to the toy factory. Anything else before we grab some grub?
</p><p>
Moe skimmed the list. Well, it also says <input type="text" name="events__8" />.
</p><p>
Joe swiped at one more snowflake with his tongue. Think you can get another file tomorrow?
</p><p>
Sure. No problem. Santa will never know. He and Joe turned and headed off to the cafeteria to get lunch.
</p><p>
They never even saw the man in the red suit who was quietly adding names to his Naughty list.
</p>
<p>
<input type="reset" value="Clear" />
<input type="button" onclick="createit(getElementById('xmasstory')); return false;" value="Create" />
</p>
</form>
</div>
</body></html>
|
|
|
|
|
|
#5 |
|
SitePoint Member
Join Date: Oct 2006
Posts: 3
|
Thank you sooo much
No, I'm not familiar at all with xhtml. The script was a "borrowed" script that was the closest thing that I could find for what I needed and hoped to get it to do just a little bit more than it originally did. The table and font codes and most of the other tags were already there with exception of the background image. I did find a few java syntax errors in the beginning that I repaired. The letter in the script is from the original owner. I will be using much shorter letters and very many of them. I'm affraid that this may end up being a little more difficult than what I hoped and I'm low on time....tis the season already. I had hoped for a php templated style situation because I have so many letters but couldn't find anything remotely close to what I needed nor could I get anyone to answer any work ads I will need to adjust the margins for the text in the letters so they don't overlap the background image and also just discovered a new problem. When attempting to print the page the background shrinks to about 1/2 it's original size. I do appreciate any additional thoughts you may have on this subject and thank you for your time and all that you have done for me. |
|
|
|
![]() |
| Bookmarks |
«
Previous Thread
|
Next Thread
»
| Thread Tools | |
| Display Modes | |
|
|
|
All times are GMT -7. The time now is 17:21.



Below is the page code:




Hybrid Mode
