Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    67
    Thanks
    18
    Thanked 0 Times in 0 Posts

    can someone help find what i am doing wrong

    Here is the goal
    a form that copys the contents of text boxes into two post card sized forms on the other ide of the page, that print out with a dotted line around each card almost like invitations.
    I have the form and everything is ok with that it's the cards that i am having trouble with.
    1 cant get the dotted line to go around each card it seems to go around the
    whole thing.
    2 the print button seems to be going into the dotted lines want it to line up on the bottom. below the cards
    3 the print fuction i want it to print out on a 8.5 x 11 sheet of paper (just the two cards w/ dotted line and cut along these lines text.
    i included the code for the cards and followed it up with the code for the form that gets the text input to, thinking that it may help find my issue and if anyone has anyother good ideas onn how to do this.i have been researching this for about a month now and tried some many things i cinfused myself

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body {
    	background-color: #FFFFFF;
    	border-color: #000000;
    	border-left-style: dashed;
    	border-bottom-style: dashed;
    	border-right-style: dashed;
    	border-top-style: dashed;
    	border-top-color: #000000;
    	border-right-color: #000000;
    	border-left-color: #000000;
    	border-bottom-color: #000000;
    	outline-style: dashed;
    	outline-color: #000000;
    	border-bottom-width: medium;
    	border-left-width: medium;
    	border-right-width: medium;
    	border-top-width: medium;
    	width: 6in;
    	marker-offset: auto;
    	max-height: 4in;
    	max-width: 6in;
    	height: auto;
    	border-collapse: separate;
    	bottom: inherit;
    }
    #Layer1 {
    	position:absolute;
    	width:205px;
    	height:45px;
    	z-index:3;
    	left: 347px;
    	top: 695px;
    }
    .date {
    	font-family:"MS Reference Sans Serif#000000";
    	color: #33FF33
    	background: #33FF00;
    	border-style: none;
    	background-color: #FFFFFF;
    	border-bottom-style: none;
    	font-size: 12pt;
    }
    #allyscandle {	position:absolute;
    	width:128px;
    	height:123px;
    	z-index:4;
    	left: 393px;
    	top: 574px;
    	visibility: visible;
    }
    #candlelogo {
    	position:absolute;
    	width:127px;
    	height:124px;
    	z-index:2;
    	top: 36px;
    	left: 399px;
    	visibility: visible;
    	border-bottom-style: none;
    	border-left-style: none;
    }
    .style4 {
    	font: italic bolder 24pt "Script MT Bold";
    	color: #0033FF;
    	font-size: 28pt;
    	width: 211px;
    	height: auto;
    	position: absolute;
    	left: 363px;
    	top: 180px;
    	z-index: 4;
    	visibility: visible;
    	overflow: visible;
    }
    .style8 {font: italic bolder 24pt "Script MT Bold"; color: #0033FF; font-size: 18pt; }
    #Layer2 {
    	position:absolute;
    	width:200px;
    	height:115px;
    	z-index:3;
    	left: 531px;
    	top: 747px;
    }
    .style11 {
    	font-size: 24px;
    	font-family: "MS Reference Sans Serif";
    }
    -->
    </style></head>
    
    
    <body><form action="" method="get" name="card2" id="card2">
    <div class="BODY" id="INVITECARD1" >
      <p><img src="../My Documents/Unnamed Site 5/Picture1.gif" alt="allycandlelogo" width="300" height="209" /></p>
      <p>
        <img src="../My Documents/Unnamed Site 5/Picture2.gif" id="candlelogo" alt="candle logo" width="125" height="125" /></p>
      <span class="style4" id="youinvited">Your Invited</span>
    <p align="left"><span class="style19">&nbsp;&nbsp;&nbsp; </span><span class="style8">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Date:</span>
     <span>
     <input name="dayofweek" type="text" class="date" id="copy2_masterdayofweek" size="12" maxlength="12" readonly="readonly" /></span>
      <input name="date" type="text" class="date" id="copy2_masterdate" size="18" maxlength="18" readonly="readonly"/>
    </p>
    <p><span class="style19">&nbsp;&nbsp;&nbsp;</span><span class="style8">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Time:</span>
      <input name="starttime" type="text" class="date" id="copy2_masterstarttime" size="6" maxlength="6" readonly="readonly"/>
      <input name="ampm1" type="text" class="date" size="2" maxlength="2" readonly="readonly" id="copy2_masterampm1"/>
    &nbsp;<span class="style8">To</span>&nbsp;
    <input name="endtime" type="text" class="date"  id="copy2_masterendtime" size="6" maxlength="6"/>
    <input name="ampm2" type="text" class="date" id="copy2_masterampm2" size="2" maxlength="2"/>
    </p>
    <p><span class="style8">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Where:</span>
      <input name="address" type="text" class="date" id="copy2_masteraddress" size="30" maxlength="30"/>
    </p>
    <p>&nbsp;
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
     &nbsp;    &nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     <input name="city" type="text" class="date" id="copy2_mastercity" size="18" maxlength="18"/>
      <input name="state" type="text" class="date" id="copy2_masterstate" size="4" maxlength="4"/>
      <input name="zipcode" type="text" class="date" id="copy2_masterzipcode" size="7" maxlength="8"/></p>
    <p>&nbsp;</p>
    </div></form>
    
    
    <center><p><span class="style11">--CUT ALONG DOTTED LINE--</span></p></center>
    
    
    <div class="BODY" id="INVITECARD2">
      <p><img src="../My Documents/Unnamed Site 5/Picture1.gif" alt="allycandlelogo" width="300" height="209" align="top" /><img src="../My Documents/Unnamed Site 5/Picture2.gif" alt="candle logo" name="allyscandle" width="125" height="125" id="allyscandle" /></p>
      <span class="style4" id="Layer1" name="yourinvited2">Your Invited</span></p>
    <p align="left"><span class="style19">&nbsp;&nbsp;&nbsp; </span><span class="style8">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Date:</span>
     <span>
     <input name="dayofweek" type="text" class="date" id="copy_masterdayofweek" size="12" maxlength="12" readonly="readonly" /></span>
      <input name="date" type="text" class="date" id="copy_masterdate" size="18" maxlength="18" readonly="readonly"/>
    </p>
    <p><span class="style19">&nbsp;&nbsp;&nbsp;</span><span class="style8">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Time:</span>
      <input name="starttime" type="text" class="date" id="copy_masterstarttime" size="6" maxlength="6" readonly="readonly"/>
      <input name="ampm1" type="text" class="date" size="2" maxlength="2" readonly="readonly" id="copy_masterampm1"/>
    &nbsp;<span class="style8">To</span>&nbsp;
    <input name="endtime" type="text" class="date"  id="copy_masterendtime" size="6" maxlength="6" readonly="readonly"/>
    <input name="ampm2" type="text" class="date" id="copy_masterampm2" size="2" maxlength="2" readonly="readonly"/>
    </p>
    <p><span class="style8">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Where:</span>
      <input name="address" type="text" class="date" id="copy_masteraddress" size="30" maxlength="30" readonly="readonly"/>
    </p>
    <p>&nbsp;
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
     &nbsp;    &nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    <input name="city" type="text" class="date" id="copy_mastercity" size="18" maxlength="18" readonly="readonly"/>
    <input name="state" type="text" class="date" id="copy_masterstate" size="4" maxlength="4" readonly="readonly"/>
    <input name="zipcode" type="text" class="date" id="copy_masterzipcode" size="7" maxlength="8" readonly="readonly"/>
    </p>
    <p>&nbsp;</p>
    </div></body>
    
    <body><div><center>
      <input name="PRINT" type="button" value="PRINT" />
    </center></div></body></form>
    input form
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>SAVETHATDATECARDSYOURINVTED</title>
    <script language="JavaScript" type="text/javascript">
    function copyValue(el) {
      document.getElementById('copy_' + el.id).innerHTML = el.value;
      document.getElementById('copy2_' + el.id).innerHTML = el.value;
      }
    </script>
    
    <style type="text/css">
    .date {
    	font-family:"MS Reference Sans Serif";
    font color; black	
    color: #33FF33
    	background: #33FF00;
    	border-style: none;
    	background-color: #FFFFFF;
    	border-bottom-style: none;
    	font-size: 12pt;
    }
    #allyscandle {	position:absolute;
    	width:301px;
    	height:210px;
    	z-index:4;
    	left: 0px;
    	top: 661px;
    	visibility: visible;
    }
    #candlelogo {	position:absolute;
    	width:127px;
    	height:124px;
    	z-index:2;
    	top: 686px;
    	left: 353px;
    	visibility: visible;
    }
    #yourinvited {	position:absolute;
    	width:213px;
    	height:50px;
    	z-index:3;
    	left: 308px;
    	top: 807px;
    	visibility: visible;
    }
    .style6 {font: italic bolder 24pt "Script MT Bold"; color: #0033FF; font-size: 24pt; }
    .style8 {font: italic bolder 24pt "Script MT Bold"; color: #0033FF; font-size: 18pt; }
    .masterlabels {font: bold 12pt "Comic Sans MS";}
    .masterlabels6 {font: italic bold 12pt "Comic Sans MS";color: #0000CC;text-decoration: underline;}
    .style19 {font-size: 18pt}
    .style23 {font-size: 18pt;font-family: "Script MT Bold";color: #0033FF;}
    .style12 {font: 22pt "Script MT Bold"; color: #0033FF; font-weight: bold; font-size: 24pt; }
    .style4 {
    	font: italic bolder 24pt "Script MT Bold";
    	color: #0033FF;
    	font-size: 28pt;
    	width: auto;
    	height: auto;
    	position: absolute;
    	left: 414px;
    	top: 141px;
    	z-index: 3;
    	visibility: visible;
    }
    
    #Layer1 {
    	position:absolute;
    	width:200px;
    	height:115px;
    	z-index:5;
    }
    -->
    </style>
    </head>
    <body>
    <form>  <p class="masterlabels6">CHOOSE TYPE OF CARD </p>
     
      <table width="200">
        <tr>
          <td><label>
    	   <input type="radio" name="invited" value="Your Invited" id="invited" onclick="getinfo();">
    	  <span class="masterlabels">YOUR INVITED        </span></label></td>
        </tr>
        <tr>
          <td><label>
            <input type="radio" name="invited" value="Join Us" id="invited" onclick="getinfo();" >
            <span class="masterlabels">JOIN US </span></label></td>
        </tr>
    </table>
      <p class="masterlabels6">DATE OF EVENT </p>
      <p>
        <input name="masterdate" type="text" id="masterdate" size="30" onchange="copyValue(this);" />
      </p>
      <p class="masterlabels6">DAY OF EVENT </p>
      <p><select name="masterdayofweek" id="masterdayofweek" onchange="copyValue(this);">
          <option value="" selected="selected">Choose Day</option>
           <option value="  Sunday  ">Sunday</option>
           <option value="  Monday  ">Monday</option>
           <option value="  Tuesday  ">Tuesday</option>
           <option value="  Wednesday  ">Wednesday</option>
           <option value="  Thursday  ">Thursday</option>
           <option value="  Friday  ">Friday</option>
           <option value="  Saturday  ">Saturday</option>
        </select>
      </p>
    <p class="masterlabels6">TIME OF EVENT </p>
      <p><span class="masterlabels">FROM</span>
        <input name="masterstarttime" type="text" id="masterstarttime" onchange="copyValue(this);" size="4" />
        <select name="ampm1" id="ampm1" onchange="copyValue(this);">
          <option value=" AM " selected="selected">AM</option>
          <option value=" PM ">PM</option>
        </select>
        <span class="masterlabels">TO </span> 
        <input name="masterendtime" type="text" id="masterendtime"  onchange="copyValue(this);" size="4"/>
        <select name="ampm2" id="ampm2" onchange="copyValue(this);">
          <option value=" AM " selected="selected">AM</option>
          <option value=" PM ">PM</option>
        </select>
    </p><p></p>
    <span class="masterlabels6">LOCATION OF EVENT</span>
    <p><span class="masterlabels">WHERE</span>
       &nbsp; 
       <input name="masteraddress" type="text" size="30" id="masteraddress" onchange="copyValue(this);"/>
    </p>
      <p><span class="masterlabels">CITY</span>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; 
        <input type="text" name="mastercity" id="mastercity" onchange="copyValue(this);"/>
      </p>
      <p><span class="masterlabels">STATE</span> 
        &nbsp; 
        <input name="masterstate" type="text" id="masterstate" size="4"  onchange="copyValue(this);"/>     
       &nbsp; <span class="masterlabels">ZIP CODE </span> 
        <input name="masterzipcode" type="text" id="masterzipcode" size="7"  onchange="copyValue(this);"/>
      </p></form>
    Last edited by howardfan123; 02-21-2009 at 04:48 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Please edit your post and add [CODE][/CODE] tags instead of ICODE
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    howardfan123 (02-21-2009)

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    59
    Thanks
    2
    Thanked 1 Time in 1 Post
    i have one more question when i add padding

    #maincontent {
    padding: 10px;
    width: 1000px;
    background:url(../images/bg.jpg)repeat;
    overflow:auto;
    }


    <div id="maincontent">
    main content asdjhasdjaskdkjasdhasdashdkjasdhajkffgsdjfsd
    dksjfhdskjf
    dsf
    </div>

    this happens http://i104.photobucket.com/albums/m...g?t=1235200806

    the background goes over the border


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •