SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Just some simple HTML problem :]

    PS: I'm newbie hence the system has restricted a href tags, please make do with <LINK code></LINK code>

    Code:
    <form>
    	<table>
    	<tr>
    		<td>
    		
    Image Link:
    <input type="text" value="" />
    <input type="button" value="Paste" /><input type="button" value="Clean" />
    
    		</td>
    		<td>
    
    Image File:
    <input type="file" />
    
    		</td>
    		<td>
    
    More: <LINK code>Image Link</LINK code> | <LINK code>Image File</LINK code> (Click either to ask for more boxes..)
    
    		</td>
    	</tr>
    	
    	</table>
    	</form>
    What happens would be the form gets into a horizontal line rather than what i was seeking, a vertical form like that in text below:

    Image Link: [input box] Paste/Clean
    Image File : [input box] Submit..
    More: Image Link | Image File (Click either to ask for more boxes..)

    And you would be able to see how the ":" before the input boxes are aligned. I wanted them, "input boxes" to align vertically the same and the ":" colons after the image"link/file" texts to align themselves too. But i could not achieve that with the code above, so does anyone has a viable and standard code for this?

    Regards,
    Gabey.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gabey, would you happen to have a live example that I could look at by any chance? I know you won't be able to post a live link, but if you leave off the http:// and www. I'll still be able to take a look at it.

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gabey View Post
    What happens would be the form gets into a horizontal line rather than what i was seeking, a vertical form like that in text below:
    You're using a table (although this isn't tabular information) with a single row and three cells. That means the form will be displayed in three horizontal cells.

    If you want a columnar alignment, do it like this,

    Code HTML4Strict:
    <form action="...">
      <table>
        <tr>
          <td>Image Link:</td>
          <td>
            <input type="text" value="" />
            <input type="button" value="Paste" /><input type="button" value="Clean" />
          </td>
        </tr>
        <tr>
          <td>Image File:</td>
          <td><input type="file" /></td>
        </tr>
        <tr>
          <td>More:</td>
          <td><LINK code>Image Link</LINK code> | <LINK code>Image File</LINK code> (Click either to ask for more boxes..)</td>
        </tr>
      </table>
    </form>

    Of course, you really shouldn't use a table for this. Use CSS instead.
    And you should mark up your labels with <label> etc.

    But I realise that's not what you're asking about.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, got it fixed with AutisticCuckoo's code. Once again, thanks to Dan Schulz and AutisticCuckoo for the quick replies. However, i would wonder if anyone would be able to explain what went wrong with my code and how did AutisticCuckoo's code work?

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You had everything contained within one table row. Tommy's code uses three rows.

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A table consists of one or more rows. A row consists of one or more cells. Cells in a row are always laid out horizontally. Rows are always laid out vertically.

    Thus, if you put everything in one row it will appear side-by-side.
    If you put things in separate rows they will appear in a vertical column.
    If you put things in separate rows and separate cells you'll get a grid-like result.
    Birnam wood is come to Dunsinane


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
  •