Solved

Field Alignment in PHP

Posted on 2014-11-20
6
114 Views
Last Modified: 2014-11-27
I have a code using <li> and <ul> for alignment. However, the displayed field can't be aligned properly, Any idea ?
Screen.png
page-furniture-index.inc.txt
0
Comment
Question by:AXISHK
6 Comments
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 150 total points
ID: 40456644
First before you try to fix that, include a proper DOCTYPE just before '<html>'.  DOCTYPEs are the rules that the browser tries to apply to the page formatting.  The HTML5 DOCTYPE is the most current one.  Note that the DOCTYPEs are actual rules that the browser tries to follow and you need to follow them too to make your page display correctly.  Without a DOCTYPE like you have it now, each browser will display the page differently.  http://www.w3.org/QA/2002/04/valid-dtd-list.html

HTML5 DOCTYPE: <!DOCTYPE HTML>
0
 

Author Comment

by:AXISHK
ID: 40456651
Sorry, I attached a wrong source, should be this one...
page-furniture-products.inc.txt
0
 
LVL 11

Assisted Solution

by:Radek Baranowski
Radek Baranowski earned 150 total points
ID: 40456804
there are no ul/il tags in the second code
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 109

Accepted Solution

by:
Ray Paseur earned 200 total points
ID: 40457122
HTML formatting is not controlled by PHP; it's controlled by CSS.  Here are some links to help you get started.

http://www.w3.org/Style/CSS/learning.en.html (a collection)
http://www.codecademy.com/en/tracks/web (I have not used the CSS track, but the JavaScript track was excellent)
http://www.w3schools.com/css/ (appears to be fairly complete)

HTH, ~Ray
0
 
LVL 34

Expert Comment

by:Slick812
ID: 40458257
greetings  AXISHK, , I looked over your code in the file -
        page-furniture-products.inc.txt
there you use a HTML <table> to place ROWS of PRODUCTS, You ask -
       "However, the displayed field can't be aligned properly, Any idea ? "

Your <table> does align the columns as the CSS and HTML tells it to. You may need to try and learn about the positioning behavior of HTML <table> in it's <td> elements, so you can change the positions as you need to.
Before anything, you absolutely MUST NOT EVER HAVE anything between the <table> sections like -
   <tr> <td>
except spaces, tabs and line breaks. . . You can NOT place a <form> tag as you do with -
     echo "<form action='$_SERVER[PHP_SELF]' method='POST'>\n"
between the   </tr> and the next table <tr>, if you mix a <form> and a <table> together, as you do in this,  you need to have the <form> OUTSIDE of the <table> as the <table> container maybe like -

       echo "<form action='$_SERVER[PHP_SELF]' method='POST'>\n";
       echo "<input type='hidden' name='n_end' value='$n_end'>\n";
       echo "<input type='hidden' name='interest' value='$_POST[interest]'>";
// now place table inside of form
       echo "<table style='width: 100%'>\n";

In a <table>, any and all other HTML elements, need to be INSIDE of the beginning and end tags for <th> </th> or <td> </td>.

Your CSS uses inches as in -
       <body style='margin: .2in .2in 0'>
this is inconsistant for a screen display, and the browser can NOT interpret correctly that as inches. For screen use px or em.

Your bad alignment in the <table> is due to the default usual alignment for tables and your other text-align setting in the <td>

You might try to take out all <td> and <th> text-align css, and have your table be set as centered with -
      echo "<table style='width: 100%; text-align:center;'>\n";
ans see how that looks to you for alignment. If you still want the "Product Number" to be right aligned , then you can add the <td style='text-align: right;'> to the "Product Number" again.

Also you have two submit form buttons with a single same name, this is incorrect, all form inputs and buttons (submit) MUST have a different Unique name, not used as name anywhere else in that form.

ask questions if you need more info.
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 40458637
Also you have two submit form buttons with a single same name, this is incorrect, all form inputs and buttons (submit) MUST have a different Unique name, not used as name anywhere else in that form.
This is factually inaccurate.  It's perfectly fine to have multiple input controls of the same name.  Otherwise how could radio buttons work?  Default values can be given in hidden fields and these can be overridden by client inputs.  You can have two submit controls of the same name and different values in order to signal different actions in the action= script, something like this:

<input type="submit" name="x" value="Update" />
<input type="submit" name="x" value="Delete" />

Open in new window


Accurate information about how HTML forms work is available from the W3C.
http://www.w3.org/TR/html401/interact/forms.html
0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question