SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with this html code and design

    Guys help me to improve this website code and design as well for a website.

    I am not that good a html and xhtml and i want to know what's more functional in terms of building websites..

    i want the code to look more like in the picture sample I have give you below plus your outputs guys give some ideas on how this design could be more appealing and look more standard and unique as well, " pretty"


    sample:



    http://img31.imageshack.us/img31/886...agedesign1.gif


    Code:

    HTML Code:
       <table width="100&#37;"  border="0" cellspacing="0" cellpadding="0" class="reviewdetails"><td colspan="3" class="reviewdetails"><table><td height="133" rowspan="4" colspan="2"><table width="470" height="29"><td width="281" height="23">Suggestions, Rating and Review:</td>
    <td width="177" style="font-size:12px;">Nike air Jordan</td>
    </table></td><td height="3"></td><tr><td height="3"></td></tr>
    <tr><td width="165" height="15" style="padding-left:6px;">Rating:</td>
    <td style="padding-left:6px; position:relative; top:23px;" colspan="4">
    -----   </td>
    </tr>
    <tr><td height="21" style="padding-left:6px;">Price:</td>
    <td style="padding-left:2px;" colspan="4">$70.90</td>
    </tr><td width="227" height="21" colspan="1"> </td>
    <td colspan="4"><tr><td  style="border:2px solid;" colspan="2">Healthy suggestions</td>
    <td colspan="4" style="border:2px solid;"><table width="64%"><td width="5%"  style="padding-left:6px;">Rate:</td>
    <td width="40%"  style="font-size:12px;"> Nike air Jordan</td></table></td>
    </tr>
        <td height="48" rowspan="2">&nbsp;</td> <td height="48" rowspan="2">&nbsp;</td><td height="23">&nbsp;</td><td height="23">&nbsp;</td><td height="23">&nbsp;</td>
        <tr><td width="165">&nbsp;</td>
      <td width="144">&nbsp;</td>
      <td width="44">&nbsp;</td>
        </tr>
       
        
    <tr>
      <td rowspan="4">Description of Comfort level:</td><td width="241" colspan="1" rowspan="4">
        <form id="form1" name="form1" method="post" action="">
        <textarea name="strength level" id="strength level" cols="25" rows="5"></textarea>
        </form>
        </td>
      <td width="165" height="66">Rate:</td>
      <td width="144">-------</td>
      <td width="44">&nbsp;</td>
    </tr>
    
      <td height="49" colspan="3" style="border:2px solid ;">Seasoning Suggestions:</td><tr><td width="165" height="26">&nbsp;</td>
      <td width="144">&nbsp;</td>
      </tr>
      <tr>
        <td width="165" height="50">Describre your like about the shoe:</td><td rowspan="2"><form id="form3" name="form3" method="post" action="">
          <label for="taste averal"></label>
          <textarea name="taste averal" id="taste averal" cols="20" rows="5"></textarea>
        </form>
        </td><td>&nbsp;</td></tr>
    <tr><td height="21" rowspan="2">Description of energy level:</td>
    <td rowspan="2">  <form id="form2" name="form2" method="post" action="">
        <textarea name="energy level" id="energy level" cols="25" rows="5"></textarea>
        </form> </td><td rowspan="1">&nbsp;</td><td height="45">&nbsp;</td>
    <td width="68" height="45">
    </tr>
    <tr>
      <td>Shoes Resistance:</td>
      <td rowspan="2"><form id="form4" name="form4" method="post" action="">
        <label for="level of satl"></label>
        <textarea name="level of satl" id="level of satl" cols="20"  rows="5"></textarea>
      </form>   </td>
        <tr><td width="227">&nbsp;</td>
      <td width="241">&nbsp;</td>
      <td width="165">&nbsp;</td>
        </tr><td colspan="6">&nbsp;</td>
          <tr>
      <td width="227" height="45">How does it make you feel:</td>
      <td width="241"><table><td width="97"><form id="form5" name="form5" method="post" action="">
        <input name="textfield" type="text" id="textfield" size="10" />
      </form>  </td>
      <td width="91"><form id="form6" name="form6" method="post" action="">
        <label for="time"></label>
        <input name="time" type="text" id="time" size="12"  />
      </form>  </td></table></td>
      <td width="165">Do you regret buying the shoes:</td>
      <td width="144"><form id="form9" name="form9" method="post" action="">
        <label for="Vinager level"></label>
        <input type="text" name="Vinager level" id="Vinager level" />
      </form>
      </td>
      <td width="44">&nbsp;</td>
        </tr>
           <tr><td width="227">&nbsp;</td>
      <td width="241">&nbsp;</td>
      <td width="165">&nbsp;</td>
      <td width="144">&nbsp;</td>
        </tr>
           <tr>
             <td width="227">What's the purpose you use it for:</td>
      <td width="241"><form id="form7" name="form7" method="post" action="">
        <label for="time"></label>
        <input name="time" type="text" id="time" size="12"  />
      </form></td>
      <td width="165">Describe shoes materials:</td>
      <td width="144"><form id="form11" name="form11" method="post" action="">
        <label for="appearance"></label>
        <input type="text" name="appearance" id="appearance" />
      </form>
      </td>
        </tr>
           <tr><td width="227">&nbsp;</td>
      <td width="241">&nbsp;</td>
      <td width="165">&nbsp;</td>
      <td width="144">&nbsp;</td>
        </tr>
        <td width="227" height="81">How long have you used:</td>
      <td width="241"><table><td width="97"><form id="form8" name="form8" method="post" action="">
        <input name="textfield" type="text" id="textfield" size="10" />
      </form>  </td>
      <td width="91"><form id="form10" name="form10" method="post" action="">
        <label for="time"></label>
        <input name="time" type="text" id="time" size="12"  />
      </form>  </td></table></td>
      <td width="165">Appearance:</td>
      <td width="144"><textarea name="seasoning level" cols="20" rows="4"></textarea></td>
      <td width="44">&nbsp;</td>
        </tr>
           <tr><td width="227">&nbsp;</td>
      <td width="241">&nbsp;</td>
      <td width="165">&nbsp;</td>
      <td width="144">&nbsp;</td>
        </tr>
        <tr><td width="227">&nbsp;</td>
      <td width="241">&nbsp;</td>
      <td width="165">Critic Shape and Form:</td>
      <td width="144"><form id="form12" name="form12" method="post" action="">
        <label for="flavor"></label>
        <textarea name="flavor" id="flavor" cols="20" rows="5"></textarea>
      </form>
      </td>
        </tr>
        <tr><td width="227" style="border:2px solid ;">Cons and Pros Reviews:</td>
      <td width="241">&nbsp;</td>
      <td width="165">&nbsp;</td>
      <td width="144">&nbsp;</td>
        </tr>
        <td colspan="4">&nbsp;</td>
        <tr>
          </tr>
        <td height="35" colspan="4">&nbsp;</td>
        <tr>
          <td height="171"><table width="228" height="61"><td width="161" height="21" >&nbsp;</td>
          <td width="32">Pros:</td>
          <td width="19">&nbsp;</td>
          <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
          <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
          <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
          <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
          <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
          </table></td>
          <td colspan="3"><textarea name="Pros" cols="65" rows="7"></textarea></td></tr>
          <tr>
          
          <td><table width="228" height="61"><td width="161" height="21" >&nbsp;</td>
          <td width="32">Cons:</td>
          <td width="19">&nbsp;</td>
          <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
          <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
          <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
          <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
          <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
          </table></td>
          <td colspan="3"><textarea name="Cons" cols="65" rows="7"></textarea></td></tr>
        
    </table>
    Thank you guys

  2. #2
    SitePoint Evangelist stonedeft's Avatar
    Join Date
    Aug 2009
    Posts
    586
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wouldn't it be more elegant if you do it in css box model rather than tables?
    Don't Panic

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    I have give you below plus your outputs guys give some ideas on how this design could be more appealing and look more standard and unique as well, " pretty"
    If you want a review of the elements the you should post in the review forum.

    Please keep your comments in this forum to code problems and bugs that you need solved.

    As mentioned above CSS would be a better approach than tables. If you must use tables then at least remove the inline styling to an external stylesheet and remove all the deprecated attributes and apply the styles via css instead.

    You seem to have the page roughly in the order that you want so you may get better results if you ask a specific question about an element or positioning problem that is troubling you.

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Manchester, UK
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup, CSS it to website heaven.

  5. #5
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,048
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Rather then sticking everything in a table you should evaluate each piece of information and choose elements that reflect collective and individual purpose. That will result in more readable, maintainable, changeable and flexible result compared to what you have now. What you have right now is just a unreadable disaster that I would highly recommend reevaluated on the after-mentioned basis.

  6. #6
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,048
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    For example, what does a description of comfort level or energy produced have to do with healthy suggestions? Is this filler or the actual heading for that information?

    How does it make you feel - 2 hrs?

    Do you regret buying this shoe - wouldn't it be more appropriate to use a checkbox?

    Seems as if this suffers from lack of focus. What is the focus of this page in plain English?

    I know this has nothing to with code, but part of choosing the most semantic elements is deciding the purpose of each. Without knowing the purpose and how everything relates or doesn't relate its going to be difficult to mark-up up the page effectively. So even though your not adding graphics, etc there still is a level of design that needs to occur to organize the information appropriately before the you ever actually begin writing the mark-up.

  7. #7
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stonedeft View Post
    wouldn't it be more elegant if you do it in css box model rather than tables?

    I am using the css model table but sometimes I have used the inline styling since it is faster to that way. But eventually I know that the css box model will be more effectively. Right now I just want the layout and the functionality of the page done. But I do really aim for the highest and optimum level of organization and functionality.

    When you say CSS would be a better approach than tables you refers to the styling or using the another tags beside tables?

    i don't understand that part!

    Thank you oddz I have tried to build the page text content with as much information as to provide new users coming to the page with valuable ideas and reviews from other users experiences so they know exactly what they are buying. Now as you say the text content is not coherence and maybe lacking of a lot of semantic and sense. Well That's why I am here I have thought about the text content a lot and it has been a little be difficult to come up with readable and understandable text content ends for everybody. might need some help on that.

    I might be looking some text content that has sense and might be readable and understood. I know some text content might have to be eliminated since they might not have any purpose.

    the relation of healthy suggestion and comfort level and energy produced might not have sense, I have related since some shoes might hurt your muscles because they are tight or because of it's shape of the shoes, and that might causes some minor injuries and discomfort related to the health of your muscles the energy procuded come from the lightness of the shoes if is to heavy then it might not give you enough speed etc. I might be mistaken in trying to relate this terms to each other but I will appriciate your help in deciding what to eliminate, improve or leave in the actual layout...

    Thank you

    I will work in the code and use the css style model

  8. #8
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,048
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Comfort level makes much more sense. Healthy suggestions sound like something for food.

  9. #9
    SitePoint Evangelist stonedeft's Avatar
    Join Date
    Aug 2009
    Posts
    586
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by co.ador View Post

    When you say CSS would be a better approach than tables you refers to the styling or using the another tags beside tables?

    i don't understand that part!
    I was suggesting you eliminate all table tags completely and layout out the page with css, separating style elements along the way. Coding is much cleaner and easier that way.

    This thread is quite confusing first you asked for a better code and website design :

    Quote Originally Posted by co.ador View Post
    Guys help me to improve this website code and design as well for a website.
    And now you're asking for Text content:

    Quote Originally Posted by co.ador View Post
    I might be looking some text content that has sense and might be readable and understood. I know some text content might have to be eliminated since they might not have any purpose.
    Are you talking about improving the backend development, OR improving front end development for user experience?
    Don't Panic

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi, as already mentioned above we have a review section of the forum where you can review design elements, the whole website or the website content reviewed and you must post in that forum for any of the above.

    Please keep your questions in this forum to the other issues such as coding bugs or how to layout the design differently using CSS rather than tables or other coding issues.


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
  •