this is the link to the original page, (thats the vertical form ,which i am trying to make horizontal , so as to allow my customers to be able to fill out about 5-10 products, before adding, rather than adding 1 products at a time)
this is the mark up i am working on now on my local system to get it to be horizontal
<?php require_once("include/session.php");?>
<?php require_once("include/dataconnect.php");?>
<?php require_once("include/functions.php");?>
<?php include("include/basicheader.php");?>
<div class="y-acc-contain">
<div class="page-top">
<table width="100% class="y-acc-pagehead">
<tbody>
<tr>
<td>
<h1>
"Your account"
<?php echo $_SESSION['username'];?>
</h1>
</td>
</tr>
</tbody>
</table>
</div>
<div class="column-holder">
<div class="primary">
<div class="action-box rounded">
<div class="titlebar">
<h2>Order Form</h2>
</div>
<div class="listbar">
<?php
if( isset($_POST['submit']) ){
$submit = $_POST['submit'];
//form data
$Sname = mysql_real_escape_string(htmlentities(strip_tags($_POST['Sname'])));
$Pname = mysql_real_escape_string(htmlentities(strip_tags($_POST['Pname'])));
$Pidno = mysql_real_escape_string(htmlentities(strip_tags($_POST['Pidno'])));
$Psize = mysql_real_escape_string(htmlentities(strip_tags($_POST['Psize'])));
$Pcolour = mysql_real_escape_string(htmlentities(strip_tags($_POST['Pcolour'])));
$Pquantity = $_POST['Pquantity'];
$Weblink = mysql_real_escape_string(htmlentities(strip_tags($_POST['Weblink'])));
$Price = mysql_real_escape_string(htmlentities(strip_tags($_POST['Price'])));
$comment = mysql_real_escape_string(htmlentities(strip_tags($_POST['comment'])));
$date = date("Y-m-d");
//echo " ('','$Sname','$Pname','$Pidno','$Psize','$Pcolour','$Pquantity','$Weblink','$Price','$Uname')";
if('POST' === $_SERVER['REQUEST_METHOD'])
{
if ($Sname&&$Pname&&$Pidno&&$Weblink&&$Price)
{
if (is_numeric($Price))
{
$repeatheck = mysql_query("SELECT * FROM repplac WHERE Uname = '{$_SESSION['username']}' AND Pidno ='$Pidno' AND Sname='$Sname' AND Pname='$Pname'");
$count = mysql_num_rows($repeatheck);
if($count!=0)
{
die ('PRODUCT ALREADY IN BASKET YOU CAN INCREASE OR DECREASE QUANTITY, <a href="youraccount.php">CLICK TO GO BACK TO YOUR LIST</a>');
}
else
//echo'$Price';
$tprice = $Price * $Pquantity;
//echo"$tprice";
$queryreg = mysql_query("
INSERT INTO repplac VALUES ('','$Sname','$Pname','$Pidno','$Psize','$Pcolour','$Pquantity','$Weblink','$Price','$comment','$tprice','$date','{$_SESSION['username']}','')
")or die(mysql_error());
}
else
echo 'price field requires numbers';
}
else
echo 'please fill in all required * fields ';
}
}
?>
<form action='youraccount.php' method='Post' class='ilistbar'>
<!--<div>
<label for='shoppinglist' class='fixedwidth'></label>
<textarea type='text' name='shoppinglist' id='username' cols='100' rows='15'></textarea>
</div> -->
<div>
<label for='Sname' class='fixedwidth'> * Shop name</label>
<input type='text' name='Sname' id='Sname'/>
</div>
<div>
<label for='Pname' class='fixedwidth'> * Product name</label>
<input type='text' name='Pname' id='Pname'/>
</div>
<div>
<label for='Pidno' class='fixedwidth'> * Product id no</label>
<input type='text' name='Pidno' id='Pidno'/>
(This should be unique for each product)
</div>
<div>
<label for='Psize' class='fixedwidth'>Product size</label>
<input type='text' name='Psize' id='Psize'/>
</div>
<div>
<label for='Pcolour' class='fixedwidth'>Product colour</label>
<input type='text' name='Pcolour' id='Pcolour'/>
</div>
<div>
<label for='Pquantity' class='fixedwidth'>Product quantity</label>
<select name="Pquantity" id="Pquantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div>
<label for='Weblink' class='fixedwidth'> * Web link</label>
<input type='text' name='Weblink' id='Weblink'/>
</div>
<div>
<label for='Price' class='fixedwidth'> * Price GBP</label>
<input type='text' name='Price' id='Price'/>
Please valid format is (.) for decimal
</div>
<div>
<label for='comment' class='fixedwidth'> Extra info</label>
<input type='text' name='comment' id='comment'/>
Please give different colours , sizes of the same products,discount codes, and other information that you would like us to use
</div>
<div>
<div class='buttonarea'>
<p>
<input type='submit' name='submit' value='Add'>
</p>
</div>
</p>
</form>
</div>
</div>
</div>
<div class="primary">
<div class="action-box rounded">
<div class="titlebar">
<h2>Shopping List</h2>
<!--<a href='totalprice.php'>Update</a>-->
</div>
<div class="listbar">
<form action='orderpplac.php' method='Post' class='shlistbar'>
<table border='1'>
<tr>
<th>SHOP NAME</th>
<th>PRODUCT NAME</th>
<th>PRODUCT SIZE</th>
<th>PRODUCT COLOUR</th>
<th>PRODUCT QUANTITY</th>
<th>PRICE</th>
<th>TOTAL</th>
<th></th>
</tr>
<?php
// Get DB results and loop, outputting table rows with counter
$pplresult = mysql_query("SELECT * FROM repplac WHERE Uname = '{$_SESSION['username']}'") or die(mysql_error());
for ($i = 0; $row = mysql_fetch_assoc($pplresult); $i++) {
echo "
<tr>
<td>".htmlspecialchars($row['Sname'])."</td>
<td>".htmlspecialchars($row['Pname'])."</td>
<td>".htmlspecialchars($row['Psize'])."</td>
<td>".htmlspecialchars($row['Pcolour'])."</td>
<td>
<input type='text' name='item[$i][Pquantity]' id='Pquantity' value='".htmlspecialchars($row['Pquantity'])."' />
<input type='hidden' name='item[$i][Pidno]' id='Pidno' value='".htmlspecialchars($row['Pidno'])."' />
</td>
<td>
<input type='text' name='item[$i][Price]' id='Pquantity' value='".htmlspecialchars($row['Price'])."' readonly>
</td>
<td>".htmlspecialchars($row['Tprice'])."</td>
<td><a href='deleteproduct.php?del=".htmlspecialchars($row['Pidno'])."'>delete</a></td>
</tr>";
}
$pplresult = mysql_query("SELECT * FROM repplac WHERE Uname = '{$_SESSION['username']}'") or die(mysql_error());
while ($row = mysql_fetch_assoc($pplresult))
//echo $row['Pquantity'] * $row['Price'];
{
$totalPrices += $row['Tprice'];
}
//echo "$totalprice";
// echo "$totalprice";
?>
<tr>
<th>Total Price</th>
<th>
<?php
if( isset($_POST['Add']) ){
if(0.1*$totalPrices <= 50 )
{
$totalprice = (0.1*$totalPrices + $totalPrices);
}
else
{
$totalprice = 50 + $totalPrices;
}
echo $totalprice; }?>
</th>
</tr>
<!--Close table and form-->
</table>
<input type='submit' name='submit1' value='UPDATE' />
<input type='submit' name='submit2' value='SUBMIT' />
</form>
<P>The Total price includes the procurement charge exclusive of transportation cost
</div>
</div>
</div>
<div class="primary">
<div class="action-box rounded">
<div class="titlebar">
<h2> payment </h2>
</div>
<div class="listbar">
<p>
You can make your payments into any of the banks below:</br>
<b>HSBC Bank</b> </br>
<i>Acc name</i>: <b>Reacheasy</b></br>
<i>Acc no </i> : <b>81601776</b> </br>
<i>SORT CODE</i>: <b>40-37-08</b></br>
<i>IBAN</i>: <b>GB92MIDL40370881601776</b></br>
</p>
<table class="payments">
<tr>
<th>Bank</th>
<th>Old Account Number</th>
<th>NUBAN Number</th>
<th>Currency</th>
</tr>
<tr>
<td>Guarantee trust bank</td>
<td>259/222755/1/1/0</td>
<td>0114824809</td>
<td>NGN</td>
</tr>
<tr>
<td>Guarantee trust bank</td>
<td>259/222755/2/1/0</td>
<td>0114824854</td>
<td>USD</td>
</tr>
<tr>
<td>Guarantee trust bank</td>
<td>259/222755/3/1/0</td>
<td>0114824878</td>
<td>GBP</td>
</tr>
<tr>
<td>Guarantee trust bank</td>
<td>259/222755/46/1/0</td>
<td>0114824919</td>
<td>EUR</td>
</tr>
</table>
</div>
</div>
</div
</div>
</div>
</div>
<?php include("include/footer.php");?>
and this is the css
/*
CSS for Reacheasy site
*/
body,html {
margin: 0;
}
#page {
width: 1060px;
margin: 0 auto;
position: relative
/* is the same as:
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
*/
}
/* sticky footer */
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
#outer:after {
clear:both;
display:block;
height:1%;
content:" ";
}
/* ...#003399; #383838;*/
/*
CSS for Reacheasy site
*/
html, body {
height:100%;
margin:0;
padding:0;
border:none;
background:#cccccc;
/*background:#003399;
*/
}
#outer {
width:1060px;
margin:auto;
min-height:100%;
margin-top:-52px;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
background: white url(backgrounds/nav-bg.jpg) repeat-y left top
}
* html #outer {
height:100%
}
h1,h3{
/*font-size: xx-large;
/*
text-shadow: 10px 10px 1px grey;
*/
color: #000;
padding: 2em 0 .2em .4em;
margin: 0;
/*
background: url(img/tree.jpg) repeat-y right;
*/
}
#adban {
underline:none;
background:url(img/tabs.gif);
}
ul#nav {
height: 2em;
list-style: none;
margin: 0 0 0 5px;
padding: .2em 0;
background:url(img/tabs.gif);
}
ul#nav li {
/*
background: #48f url(img/tabs.gif);
*/
display : block;
background-color : #666666;
float: left;
margin: 0 1px 0 0;
padding-left: 10px;
border-right: 1px solid #A1A1A1;
}
ul#nav a {
background: url(img/tabs.gif) 100% 0;
color: white;
display: block;
float: left;
height: 2em;
line-height: 2em;
padding-right: 10px;
text-decoration: none;
}
ul#nav li.current {
background-color:#666666 ;
background-position: 0 -60px;
}
ul#nav li.current a {
background-position: 100% -60px;
color: #fff;
font-weight: bold;
}
#navigation {
width: 180px;
float:left;
}
/*ul#navigationlb {
width: 180px;
float:left;
}
*/
fieldset,
legend {
border:0 margin:0; padding:0; line-height:1.42em; color: grey;
}
form.rl legend{
font-weight:bold;
font-size: small;
color: grey;
margin : 0px 20px 0px 0px ;
}
form.rl label.fixedwidth{
display:block;
width: 130px;
}
form.rl label {
font-weight:bold;
font-size: small;
}
form.rl .buttonarea input{
colour: white;
font-weight; bold;
padding: 5px;
border: 1px solid white;
}
form.rl fieldset{
border:2px solid grey;
padding:10px;
width: 150px;
}
ul#navigationlb {
margin : 0;
padding : 0;
list-style-type : none;
}
ul#navigationlb li {
/* margin-bottom : 5px ; */
margin : 0px 0px 5px 5px ;
}
ul#navigationlb a {
display : block;
width : 150px;
height : auto;
background-color : #666666;
padding : 5px 5px 3px;
/* text-align : right; */
text-decoration : none;
color : white;
cursor : pointer; /* (Needed for Opera due to selected styling) */
}
ul#navigationlb a:hover, ul#navmenu a:focus, ul#navmenu a:active,
ul#navigationlb a.selected, ul#navmenu a.selected:hover, ul#navmenu a.selected:focus, ul#navmenu a.selected:active {
background-color : #386088;
color : #fff;
}
ul#navigationlb a.selected {
text-align : left;
cursor : default; /* (To make it no appear to be a link) */
}
ul#navigationlb a:hover, ul#navmenu a:focus, ul#navmenu a:active {
background-color : #333;
color : #fff;
}
ul#advert{
list-style: none;
margin : 30px 0px 5px 5px ;
}
ul#advert li {
/* margin-bottom : 5px ; */
margin : 0px 0px 10px 0px ;
}
#bodycontent {
float:right;
width:880px;
background:black;
font : 80% 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
}
form.shlistbar{
padding:0;
margin: 0px 5px;
}
form.ilistbar label{
font-weight:bold;
font-size: small;
}
form.ilistbar label.fixedwidth{
display:block;
width: 240px;
}
form.slistbar{
padding:0;
margin:0;
margin-top:-15px;
line-height:150%;
}
form.slistbar label {
font-weight:bold;
font-size: small;
}
form.slistbar label.fixedwidth{
display:block;
width: 240px;
}
form.slistbar .buttonarea input{
colour: white;
font-weight; bold;
padding: 5px;
border: 1px solid white;
}
form.slistbar fieldset{
border:2px solid navy;
padding:10px;
width: 150px;
margin-top:30px;
}
form.slistbar legend{
font-weight:bold;
font-size: small;
width: 150px;
color: navy;
}
#header {
width:100%;
border-top:52px solid #fff;
border-bottom:1px solid #A1A1A1;
}
#footer {
width:1060px;
clear:both;
height:50px;
border-top:1px solid white;
background-color:#fff;
border-bottom:1px solid #000;
color: #000000;
text-align:center;
margin:0 auto;
}
ul#footlink {
padding: 0px;
margin: 0px;
list-style-type: none;
float: left;
width: 100%;
color: #fff;
}
ul#footlink li {
display: inline;
text-align:center;
/*
color:#99CCFF;
*/
}
ul#footlink a{
color:gray;
}
#bannercontainer{
width: 800px;
padding: 0;
margin-left: auto;
margin-right: auto;
background: #eee;
border: 1px solid #000;
}
/* #bannercontainer a{
display: block;
width: 800px;
height: 300px;
padding: 0;
background:#eee url(img/pr.jpg) 0 0 no-repeat;
}
#bannercontainer a:link,#bannercontainer a:visited{
background:#eee url(img/pr.jpg) 0 0 no-repeat;
}
#bannercontainer a:hover{
background:#eee url(img/hp.jpg) 150px 0 no-repeat;
}
*/
/*
#banner-ids{
display: block;
width: 800px;
padding: 0;
background: #eee;
border: 1px solid #000;
}
*/
.banner-id{
border: medium none;
display:block;
float: left;
padding: 0 70px 5px 0;
}
#promo-banners{
width:860px;
}
.promo-banner{
border: medium none;
display:block;
float: left;
padding: 0 19px 5px 0;
width: 230px;
color:#ffcc00;
}
.promo-banner a{
color:gold;
}
.promo-seo{
color:white;
display:block;
float:left;
font:12px arial;
height:75px;
margin-bottom:5px;
padding:7px 5px 0;
text-align:left!important;
width:218px;
}
.promo-seo-link{
color:#ffcc33;
text-decoration:none;
}
.promo-seo-link:visited{
color:#ffcc33;
}
.promo-seo a{
color:gold;
}
#y-acc-contain .column-holder{
position: relative;
min-width:895px;
}
.rounded{
border:1px solid green;
border-radius:6px;
-moz-border-radius:6px;
}
.primary .action-box{
margin: 0 0 10px 0;
position: relative;
min-width: 668px;
min-height: 200px;
}
#y-acc-contain{
margin: 0 0 30px 0;
padding:0 4px;
positon:relative;
display:block;
}
#y-acc-contain .page-top{
margin: 15px 0 0 3px;
}
table{
display:block;
border-collapse:separate;
border-spacing:2px;
border-color:gray;
}
tbody{
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
/*#y-acc-contain .primary{
margin: 0 227px 0 0;
padding: 0;
display: block;
position: relative;
}*/
/*#y-acc-contain .primary{
width: 200px;
padding:12px 10px;
margin:0;
float:left;
}*/
.action-box .listbar {
padding: 12px 0 12px 10px;
margin: 0 0 0 220px;
border-left: 1px solid black;
min-height: 200px;
margin: 0;
}
.action-box .titlebar {
width: 100%;
padding: 12px 10px;
margin: 0;
float: none;
}
/* Scroller Box */
#scroller_container {
position: relative;
width: 300px;
height: 60px;
overflow: hidden;
}
#scroller {
white-space: nowrap;
line-height: 60px;
font-size: 60px;
}
#scroller p {
padding: 0;
}
/* Scoller Box */
table.payments{
border-collapse: collapse;
border: 1px solid black;
}
table.payments th{
border: 1px solid black;
text-align: left;
background: red;
color:white;
padding:0.2em;
}
table.payments td
{
border: 1px solid black;
padding: 0.2em;
}
form div {
display: inline-block;
width: 100px;
vertical-align: top;
}
form div label {
display: inline-block;
}
thank you
