Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    "Column" aligned headings

    Hello, I am working on a simple form using HTML and CSS that uses headings as the text for different inputs as seen below.

    Code:
    <div id="inline">
       <h4 style="width:100px;">Artist:</h4>
       <input type="text" name="SongArtist" size="32">
    </div>
    <div id="inline">
       <h4 style="width:100px;">Title:</h4>
       <input type="text" name="SongTitle" size="32">
    </div>
    The "inline" divs are controlled by an external CSS file and simply make all items contained within them inline.

    I am trying to make the text inputs after the headings start at the same place by setting an absolute size (in this case 100 pixels) for each heading. However, when I test this on a browser, the headings definitely do not have the same widths.



    What am I doing wrong? Thanks in advance

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,471
    Thanks
    6
    Thanked 980 Times in 953 Posts
    Quote Originally Posted by patrickfrog View Post
    What am I doing wrong?
    1. You are using headings when you should use labels
    2. You have the same ID more than once which is forbidden
    3. Elements with a display value of “inline” can’t have a width (or rather, an assigned width is ignored).


    Solutions:
    1. Use labels for form controls:
      Code:
      <label for="inp_artist">Artist</label>
      <input id="inp_artist" type="text" name="SongArtist" size="32">
    2. Use classes instead of IDs if you want to assign the same styles to multiple elements in the same document
    3. Use CSS’s inline-block instead of inline

  • #3
    New Coder
    Join Date
    Jul 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks, obviously I was doing alot wrong. I will apply your suggestions and see if all is well.


  •  

    Tags for this Thread

    Posting Permissions

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