...

View Full Version : can someone help find what i am doing wrong



howardfan123
02-21-2009, 07:58 AM
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


<!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


<!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>

abduraooft
02-21-2009, 08:02 AM
Please edit your post and add
][/COLOR] tags instead of ICODE

roeyfreak10
02-21-2009, 08:20 AM
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/m184/COUTUREE_x3/goesoverborder.jpg?t=1235200806

the background goes over the border



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum