Hi everyone:<br />
I have an order form with flyers and other stuff on it. Here is part of the code(flyer section)that I have and this section of my form overlaps into the next section(gift section)when I add more flyers to it. I need to increase the height of the area. How? Thanks<br />
<STYLE type=text/css><br />
BODY {<br />
MARGIN: 0px<br />
}<br />
.container_l {<br />
width: 50%<br />
}<br />
.container_r {<br />
LEFT: 50%; WIDTH: 50%; POSITION: absolute; TOP: 0px<br />
}<br />
<br />
.container {<br />
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; TEXT-ALIGN: center<br />
}<br />
.container .thumb {<br />
MARGIN: 0px 0px 10px; WIDTH: 100px; HEIGHT: 100px<br />
}<br />
.container .inputadd {<br />
MARGIN: 0px 0px 5px; WIDTH: 75px<br />
}<br />
.container .inputcust {<br />
WIDTH: 50px<br />
}<br />
.container .inputaddcust {<br />
WIDTH: 150px<br />
}<br />
.giftgroup {<br />
MARGIN: 10px<br />
}<br />
.displayarea {<br />
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 1%; PADDING-BOTTOM: 0px; MARGIN: 5px 0px; WIDTH: 98%; PADDING-TOP: 0px; POSITION: relative<br />
}<br />
</STYLE><br />
<div class="container_l"><br />
<DIV class="container"><br />
<a href=http://www.htmlforums.com/archive/index.php/"images/Large/abc1large.jpg" onclick="displayimage(this.href);return false;"><br />
<img src=http://www.htmlforums.com/archive/index.php/"images/Thumbs/abc1large.jpg" width="60" height="50" alt="Flyer 1" class="thumb"></a><BR><br />
<INPUT class=inputadd onclick="add(0,500);return false;" type=button value="Add 500"> <br />
<INPUT class=inputadd onclick="add(0,1000);return false;" type=button value="Add 1000"> <br />
<INPUT class=inputadd onclick="add(0,2500);return false;" type=button value="Add 2500"><BR><INPUT class=inputaddcust onclick="add(0,'custom');return false;" type=button value="Use Custom Value"> <br />
<INPUT class=inputcust onblur="this.value=checkval(this.value);return false;" <br />
value=2500 name=flyer0custval> </DIV><br />
<br />
<DIV class="container"><br />
<p>Front</p><a href=http://www.htmlforums.com/archive/index.php/"images/Large/nationalProgram1.jpg" onclick="displayimage(this.href);return false;"><br />
<img src=http://www.htmlforums.com/archive/index.php/"images/Thumbs/nationalProgram1.jpg" width="60" height="50" alt="Flyer 3" class="thumb"></a><br />
<p>Back</P><a href=http://www.htmlforums.com/archive/index.php/"images/Large/nationalProgram2.jpg" onclick="displayimage(this.href);return false;"><br />
<img src=http://www.htmlforums.com/archive/index.php/"images/Thumbs/nationalProgram2.jpg" width="60" height="50" alt="Flyer 3" class="thumb"></a><BR><br />
<INPUT class=inputadd onclick="add(2,500);return false;" type=button value="Add 500"> <br />
<INPUT class=inputadd onclick="add(2,1000);return false;" type=button value="Add 1000"> <br />
<INPUT class=inputadd onclick="add(2,2500);return false;" type=button value="Add 2500"><BR><INPUT class=inputaddcust onclick="add(2,'custom');return false;" type=button value="Use Custom Value"> <br />
<INPUT class=inputcust onblur="this.value=checkval(this.value);return false;" <br />
value=2500 name=flyer2custval> </DIV></DIV><!--content-->not sure I understand. you are adding what? what is the code you add?<br />
<br />
also you don't set the height so it should just add to it. maybe the gift section needs to be down from the top more.<!--content-->is this for printing or something?<!--content-->Could you guys just take a look at my script and run it? You'll see what I mean!! The flyer section is overlapping into the gift section. How can I increase the height of either section? Thanks<!--content-->the cod eyou psoted in your first post is way different than the code you just posted.<br />
<br />
you are absolutly postitioning your div tags so that means it goes over every thing else. you need to take that out and not position then like that.<br />
<br />
see ".container_r" is not even in the main div .container_l, it is sitting above it.<!--content-->I am new to this. COuld you explain more please! Thanks.<!--content-->sure thing. when you use this<br />
<br />
postition: absolute;<br />
<br />
it makes that container sit above everything else. see everything is in layers. when you use that it makes it the most top layer. what you need to do is make it relative and then add left:10% to that same one, it looks like this<br />
<br />
.container_l{width:45%;height:50%;border-bottom:0; display: inline}<br />
.container_r{width:45%;height:50%;border-bottom:0;position:relative;left:10%; display: inline }<br />
<br />
and that will work for you<!--content-->Thank you so much. It did worked!!!! I guess it will work if I want to add more flyers, Right??<!--content-->
I have an order form with flyers and other stuff on it. Here is part of the code(flyer section)that I have and this section of my form overlaps into the next section(gift section)when I add more flyers to it. I need to increase the height of the area. How? Thanks<br />
<STYLE type=text/css><br />
BODY {<br />
MARGIN: 0px<br />
}<br />
.container_l {<br />
width: 50%<br />
}<br />
.container_r {<br />
LEFT: 50%; WIDTH: 50%; POSITION: absolute; TOP: 0px<br />
}<br />
<br />
.container {<br />
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; TEXT-ALIGN: center<br />
}<br />
.container .thumb {<br />
MARGIN: 0px 0px 10px; WIDTH: 100px; HEIGHT: 100px<br />
}<br />
.container .inputadd {<br />
MARGIN: 0px 0px 5px; WIDTH: 75px<br />
}<br />
.container .inputcust {<br />
WIDTH: 50px<br />
}<br />
.container .inputaddcust {<br />
WIDTH: 150px<br />
}<br />
.giftgroup {<br />
MARGIN: 10px<br />
}<br />
.displayarea {<br />
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 1%; PADDING-BOTTOM: 0px; MARGIN: 5px 0px; WIDTH: 98%; PADDING-TOP: 0px; POSITION: relative<br />
}<br />
</STYLE><br />
<div class="container_l"><br />
<DIV class="container"><br />
<a href=http://www.htmlforums.com/archive/index.php/"images/Large/abc1large.jpg" onclick="displayimage(this.href);return false;"><br />
<img src=http://www.htmlforums.com/archive/index.php/"images/Thumbs/abc1large.jpg" width="60" height="50" alt="Flyer 1" class="thumb"></a><BR><br />
<INPUT class=inputadd onclick="add(0,500);return false;" type=button value="Add 500"> <br />
<INPUT class=inputadd onclick="add(0,1000);return false;" type=button value="Add 1000"> <br />
<INPUT class=inputadd onclick="add(0,2500);return false;" type=button value="Add 2500"><BR><INPUT class=inputaddcust onclick="add(0,'custom');return false;" type=button value="Use Custom Value"> <br />
<INPUT class=inputcust onblur="this.value=checkval(this.value);return false;" <br />
value=2500 name=flyer0custval> </DIV><br />
<br />
<DIV class="container"><br />
<p>Front</p><a href=http://www.htmlforums.com/archive/index.php/"images/Large/nationalProgram1.jpg" onclick="displayimage(this.href);return false;"><br />
<img src=http://www.htmlforums.com/archive/index.php/"images/Thumbs/nationalProgram1.jpg" width="60" height="50" alt="Flyer 3" class="thumb"></a><br />
<p>Back</P><a href=http://www.htmlforums.com/archive/index.php/"images/Large/nationalProgram2.jpg" onclick="displayimage(this.href);return false;"><br />
<img src=http://www.htmlforums.com/archive/index.php/"images/Thumbs/nationalProgram2.jpg" width="60" height="50" alt="Flyer 3" class="thumb"></a><BR><br />
<INPUT class=inputadd onclick="add(2,500);return false;" type=button value="Add 500"> <br />
<INPUT class=inputadd onclick="add(2,1000);return false;" type=button value="Add 1000"> <br />
<INPUT class=inputadd onclick="add(2,2500);return false;" type=button value="Add 2500"><BR><INPUT class=inputaddcust onclick="add(2,'custom');return false;" type=button value="Use Custom Value"> <br />
<INPUT class=inputcust onblur="this.value=checkval(this.value);return false;" <br />
value=2500 name=flyer2custval> </DIV></DIV><!--content-->not sure I understand. you are adding what? what is the code you add?<br />
<br />
also you don't set the height so it should just add to it. maybe the gift section needs to be down from the top more.<!--content-->is this for printing or something?<!--content-->Could you guys just take a look at my script and run it? You'll see what I mean!! The flyer section is overlapping into the gift section. How can I increase the height of either section? Thanks<!--content-->the cod eyou psoted in your first post is way different than the code you just posted.<br />
<br />
you are absolutly postitioning your div tags so that means it goes over every thing else. you need to take that out and not position then like that.<br />
<br />
see ".container_r" is not even in the main div .container_l, it is sitting above it.<!--content-->I am new to this. COuld you explain more please! Thanks.<!--content-->sure thing. when you use this<br />
<br />
postition: absolute;<br />
<br />
it makes that container sit above everything else. see everything is in layers. when you use that it makes it the most top layer. what you need to do is make it relative and then add left:10% to that same one, it looks like this<br />
<br />
.container_l{width:45%;height:50%;border-bottom:0; display: inline}<br />
.container_r{width:45%;height:50%;border-bottom:0;position:relative;left:10%; display: inline }<br />
<br />
and that will work for you<!--content-->Thank you so much. It did worked!!!! I guess it will work if I want to add more flyers, Right??<!--content-->