SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    323
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    making form horizontal

    please i am trying to make a form horizontal, so as to produce ten of that form horizantally available for the customer to use at a go if need be, please how do i do that
    HTML Code:
    <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 /ad reference</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>
    (You can update quantity in excess of 10 on the shopping list below)
    	</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>
    please this is the link am still working on it http://www.reacheasy.co.uk/youraccount.php
    Last edited by lostty84; Jul 8, 2012 at 12:11. Reason: more info

  2. #2
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    323
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    i used this mark up to make it horizontal but it was too long for the page
    HTML Code:
    <form action='youraccount.php' method='Post' class='ilistbar'> 
       <table border='1'> 
     <tr>
        <th>*SHOP NAME</th>
        <th>*PRODUCT NAME</th>
        <th> * Product id no /ad reference</th>
        <th>PRODUCT SIZE</th>
        <th>PRODUCT COLOUR</th>
        <th>PRODUCT QUANTITY</th>
         <th>* Web link</th>
        <th>PRICE</th>
        <th> Extra info</th>
        <th></th>
        </tr>
        <tr>
        <td><input type='text' name='Sname' id='Sname'/></td>
       <td> <input type='text' name='Pname' id='Pname'/></td>
       <td> <input type='text' name='Pidno' id='Pidno'/></td>
        <td><input type='text' name='Psize' id='Psize'/></td>
       <td> <input type='text' name='Pcolour' id='Pcolour'/></td>
        	<td><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></td>
    <td><input type='text' name='Weblink' id='Weblink'/></td>
    <td><input type='text' name='Price' id='Price'/></td>>
    <td><input type='text' name='comment' id='comment'/></td>
        </tr>
         </table>
        <div class='buttonarea'>
    			<p>
    			<input type='submit' name='submit' value='Add'>
    			</p>
    			</div>
    			</p>
    	</form>

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Could you maybe post a picture of how you'd like this to look? It's not very clear what you want. Where do you want the instructions to sit?

  4. #4
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    323
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    i would like it to be in this format and have about ten of boxes under each table header
    Attached Images Attached Images

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    OK, but even in your screen shot the table spills out to the right. How do you want to handle that?

  6. #6
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    323
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    http://www.reacheasy.co.uk/youraccount.php
    thinking i would remove the column order form, to give it more room, and reduce the size of the box under each table header to suitable size

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    These styles will get you started:

    Code:
    form div {
      display: inline-block; 
      width: 120px;
      vertical-align: top;
    }
    
    form div label {
      display: inline-block;
    }
    
    .action-box .listbar {
      margin: 0;;
    }
    
    .action-box .titlebar {
      width: 100%;
      padding: 12px 10px;
      margin: 0;
      float: none;
    }
    Some of those styles just override ones you already have, so it's better to alter those, such as for the h2. Remove its float directly. You also have some decisions to make about the amount of text in some divs.

  8. #8
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    323
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    hello ralph sorry for the delay in response, please the add button and quantity button is overlapping, i reduced the width to fit into one line, please any help
    Screen Shot 2012-07-11 at 20.14.13.png

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Really need a link to what you are doing or at least the full code. I don't even see what you mean in that image.

  10. #10
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    323
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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 Code:
    <?php require_once("include/session.php");?>
    <?php 
    require_once("include/dataconnect.php");?>
    <?php 
    require_once("include/functions.php");?>
    <?php 
    include("include/basicheader.php");?>
    HTML Code:
    <div class="y-acc-contain">
    <div class="page-top">
    <table width="100% class="y-acc-pagehead">
    <tbody>
    <tr>
    <td>
    <h1>
    "Your account"
    PHP Code:
    <?php echo $_SESSION['username'];?>
    HTML Code:
    </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 Code:
    <?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 ';
    }
    }
    ?>
    HTML Code:
    <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 Code:
    <?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";
      
             
    ?>
    HTML Code:
    <tr>
                    <th>Total Price</th>
                    <th>
    PHP Code:
    <?php
                    
    if( isset($_POST['Add']) ){
                     if(
    0.1*$totalPrices <= 50 )
        {
        
    $totalprice = (0.1*$totalPrices +  $totalPrices);
        }
        else
       {
        
    $totalprice 50 $totalPrices;
            }
            
                     echo 
    $totalprice; }?>
    HTML Code:
    </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 Code:
    <?php include("include/footer.php");?>
    and this is the css

    HTML Code:
    /*
    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

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    The PHP just gets in the way here. We need to see what happens after the PHP processes—that is, what happens when the page loads. that's just HTML and CSS. Could you make up a test page and post it here—with just the relevant HTML and CSS? That way, we can save it straight to a .html file and open in in the browser to see what's going on.

  12. #12
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    323
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    this is the html mark up below(a friend was able to get the width below and no more overlapping, but ow can we make the form into about 5 lines without repeating the mark up)

    HTML 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>Reacheasy - Foremost website for shopping from Uk, and globally to Nigeria</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link href="reasy.css" rel="stylesheet" type="text/css"/>  
    </head>
      <body>
    <div id="outer">
    <div id="page">
    <div id="header">
    <div id="hlogo">
    <!--<span style="float:right;"><img src="img/relogo.jpg"  class="logoImage" width="96" height="96"/></span>-->
    <span style="float:right;"><img src="img/relogo1.jpg"  class="logoImage" width="96" height="96"/></span>
    </div>
    <span style="font-size:small;text-shadow: 10px 10px 1px grey;"><h1>Reacheasy<span style="font-size:small;"><?php if(isset($_SESSION['username'])){ echo $_SESSION['username'];}?></span></h1></span>
    <!--<span style="float:left;"><img src="img/rewordlogo.jpg"/></span>-->
    <ul id="nav">
        <li class="current"><a href="index.php">Home</a></li>
         <li><a href="women.php">Women</a></li>
         <li><a href="men.php">Men</a></li>
         <li><a href="children.php">Children</a></li>
         <li><a href="homeandappliances.php">Home&amp;Appliances</a></li>
         <li><a href="visionandsound.php">Vision&amp;Sounds</a></li>
          <!--<li><a href="motoring.php">Motoring</a></li>-->
          <li><a href="homemore.php">More</a></li>
          <li><a href="contact.php">Contact us</a></li>
      </ul>
    </div> <!--end of navigation div -->
    </div>
    <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">
    <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>
         <tr>
                    <th>Total Price</th>
                    <th>
                    </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>
    <div id="footer">
     &copy; 2012 Reacheasy
    <ul id="footlink">
         <li><a href="contact.php">Contact us</a></li>
         <li><a href="termsandcondition.php">Terms&amp;Condition</a></li>
         <!--<li><a href="faq.php">Faq</a></li>-->
        </ul>
       
    </div>
    </body>
    </html>

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    OK, we also need the reasy.css code.

    Edit:

    O, right, I'll use what's posted above.

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by lostty84 View Post
    how can we make the form into about 5 lines without repeating the mark up
    Not quite sure what you mean by "into about 5 lines".

  15. #15
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    323
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    this is the css
    Code:
    /*
    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;
    }
    form div input[type="text"] { border:1px solid;padding:0 4px;width:90px; }
            form div select { width:100%; }
    
    form div label {
            display: inline-block;
            }

  16. #16
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    323
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    what i mean by five lines is that , at the moment on the form,
    the first row is the table header,
    and the second row is the input and select option part.
    so would love to have about four more rows that is like the second row
    (so that the customer can input more than a product on the page before clicking the add button)


Bookmarks

Posting Permissions

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