1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Aligning labels with inputs

Discussion in 'CSS' started by asgsoft, Sep 2, 2017.

0
  1. #1
    Hey guys,

    I am still working on this endless form and am here again with another issue. A CSS one.

    For some reason, the labels and the checkboxes are not on the same line at all!

    I've been playing around to try and figure out why as well as trying several of the solutions proposed online with no luck.

    I'd be most grateful if somebody can have a look at this and let me know where I am going wrong.

    Here is what I am working with at the moment.
    input{
     display: block;
     border: 1px solid #ccc;
     margin-bottom:18px;
}

label
{
     display: inline-block;
     margin-bottom: 0.5em;
     float: left;
     clear: left;
     padding-top: 5px;
     padding-right: 5px;
}
    Code (CSS):

                    <label for="var1">Var1 </label><input type="text" name="var1" id="var1" />
                <label for="var2">Var2 </label><input type="text" name="var2" id="var2" />               
                <label for="select1">Select Stage</label>
                    <select name="select1" id="select1">
                        <option value="0" selected="selected">Stage 0</option>
                        <option value="1">Stage 1</option>
                        <option value="2">Stage 2</option>
                        <option value="3">Stage 3</option>
                    </select>
                <label for="opt1">Check option 1: </label><input name="opt1" type="checkbox" id="opt1" />
    HTML:
    Thanks!
     
    asgsoft, Sep 2, 2017 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    It seems as you've fallen prey to a bunch of stuff without ever being taught that you start with bare-bones html and add only the bare minimum to make it display as you want. HTML will display pretty well on its own. Let it when you can.

    I changed only two things in your structure; I wrapped the label element around the input. This let me minimize the css requirements, for example the margins and losing the unnecessary floats. The labels were made block and act as a container for its form control. The other structural change was to add the fieldset element. This is a container for a group of related form controls, and lets you treat it and its contents as a unit, much as a div is a generic aggregating container. Note too the legend element which acts as a label for the form control group.

    
<!DOCTYPE HTML>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta content=
    "width=device-width, height=device-height, initial-scale=1"
  name="viewport">

  <title>
  Test document
  </title>
  
  <style type="text/css">
  /*<![CDATA[*/

  body {
   background-color: white;
   color: black;
   font: 100%/1.5 sans-serif;
   margin: 0;
   padding: 1em;
  }

  p {
   font-size: 1em;
  }

  #wrapper {
   border: 1px solid black;
   margin: 0 auto;
   width: 90%;
  }

  input {
   border: 1px solid #ccc;
  }

  label {
   display: block;
   margin-bottom: 0.5em;
   padding-top: 5px;
   padding-right: 5px;
  }

  /*]]>*/
  </style>
  </head>

  <body>
  <div id="wrapper">
  <fieldset>
   <legend>Test form</legend>
  
   <label for="var1">Var1
    <input id="var1"
      name="var1"
      type="text">
   </label>
  
   <label for="var2">Var2
    <input id="var2"
      name="var2"
      type="text"></label>

    <label for="select1">Select Stage
    <select id="select1"
      name="select1">
  <option selected="selected"
  value="0">
     Stage 0
  </option>

  <option value="1">
     Stage 1
  </option>

  <option value="2">
     Stage 2
  </option>

  <option value="3">
     Stage 3
  </option>
    </select>
    </label>

    <label for="opt1">Check option 1:
    <input id="opt1"
      name="opt1"
      type="checkbox">
    </label>
  </fieldset>
  </div>
  </body>
</html>
    Code (markup):
    gary
     
    kk5st, Sep 2, 2017 IP
  3. asgsoft

    asgsoft Well-Known Member

    Messages:
    1,737
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    160
    #3
    Thank you so much Gary for explaining that. Learned something new today, so thank you again!

    It works great too :D
     
    asgsoft, Sep 3, 2017 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    I dislike your original markup AND Gary's solution for one simple reason... how is that useful when CSS doesn't apply? Screen readers (Software that reads the page aloud), braille readers, search engines, etc, etc...

    is there some explicit reason you're pissing on semantics and usability by screwing around with display:block instead of just putting <br> in there like a good little doobie and letting the inline state of label and input do their huffing job?
     
    deathshadow, Sep 8, 2017 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    As a matter of fact, my example works just fine when css is disabled and when using a plain text browser like Lynx. A search engine will read and index without error as will screen readers and Braille displays.

    Frankly, I consider the BR element a quasi-presentation element. Following your line of thought, I'd wrap the label and input in a P element which is block by default and the proper element to use in a structural markup.

    And no need to bring on your silly grammatical argument. HTML is not a grammar markup language, it is a structural markup language and the structural definition of a paragraph should be used.

    gary
     
    kk5st, Sep 8, 2017 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    ... as a run-on sentence; which is what my braille reader does. Sadly the wrapping prevents the label from forming the association properly; which is ANOTHER reason I don't favor the wrapping approach to using label.

    It's a grammatical pause in thought or flow, without a change in topic. Hence it's NAME, break.

    "Structural definition" -- then why are paragraphs called PARAGRAPHS, headings called headings, and lists called lists?

    Though honestly we're all pretty much open to interpreting it however the hell you want. If you know professional writing (such as scientific or legal documents) you'll lean towards my mode of thought... not sure what yours is based on but it's probably something similar. The jacked up part being the whole mess that is the HTML specification does NOT clearly define any of this. (though at least HTML 5 FINALLY says what a horizontal rule is for semantically!)

    Which is why I go back to professional writing norms for why headings are levelled, paragraphs are for grammatical paragraphs of flow text, DIV are for generic sectional breaks that do not imply or change meaning -- JUST like the types of scientific, legal, and collegiate documents TBL created it to convey.

    That and it seems like a ***ton of pain on the CSS side just to avoid saying <br>. and scrapping the CSS altogether. I could only really see going to that trouble if you were trying to scale the inputs to fluid width so they ALWAYS fit the available space -- and that's where it gets a LOT more complicated.
     
    deathshadow, Sep 8, 2017 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    Because it's the name of "One of several distinct subdivisions of a text intended to separate ideas." Paragraph is the structural default, catchall name of a set aside text. More specific forms may have other names, e.g. headings, lists, etc..

    gary
     
    kk5st, Sep 8, 2017 IP
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #8
    IIRC IE used to screw up the nested structure but honored the for attribute. I am not aware of any browsers that don't function with at least one of the methods. But I'm only using browsers I like any more. :shrug:

    Which browsers/platforms do you refer to?

    All my school life, I was taught that the comma and semi-colon performed that function. Line breaks serve best as legibility enhancements. It's easier to read down a column that it is to read across a line. In my mind, that makes it a presentation element except for rare cases. If your text requires a line break, for example an address, or poetry, we have the PRE element.

    gary
     
    kk5st, Sep 8, 2017 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    "That" should be "than". Sorry.

    gary
     
    kk5st, Sep 9, 2017 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Most braille readers are fed the content flat, only block level tags or special elements like BR are honored. To that end as much as I hate it conceptually, I'd sooner see a paragraph abused for it than to not have ANY delimiters.

    Aka delimiters.

    Comma -- a pause within a sentence to delimit related thoughts.

    Semi-colon -- a delimiter between conceptual phrases, or a super-comma when comma's are needed for delimits.

    Period -- a complete stop, the end of a sentence.

    Break -- a delimit between sub-elements of a complete thought

    Rule -- a change in topic/section. Technically the vertical-break character "|" (or as *nix mouth-breathers call it a "pipe") and horizontal rule are both rules.

    Comma's and breaks have a lot in common, but a break is often best thought of as a super-super-comma. They exist for a grammatical reason. PRE does NOT convey that meaning, it just says the text is 'pre-formatted' which could effectively mean damned near anything!

    <P> implies the meaning of a paragraph, one or more sentences forming a complete thought. A label and input pair does not qualify as such. NOR is a lone image all by its lonesome or any of the other rubbish people wrap them around. If you're using it JUST as a hook for style, use DIV to say it's a generic block. If all you want is one per line, use a break so you have the semantic meaning. (remember, DIV is semantically neutral).

    Using PRE is a cheap cop-out to avoid even having semantics whatsoever, shoving nothing more than a endless non-delimited run of text at users who cannot see the pre-formatting! Remember, the pre-formatting is a VISUAL concept applying NO semantics or meanings, so using it for something like a poem is telling non-sighted users to go **** themselves.

    Which is kind of the opposite of what HTML was created for...

    If you WERE to use PRE on a poem hoping that the CRLF will convey the meaning, it won't. In that case, you'd need comma's in ADDITION to the formatting characters.... at which point just use a bloody break! Though your own page on the subject uses prose which hath comma's and semi-colons. Many do not. The way you have it written then its fine as you have the existing delimiters in addition to CRLF. Not all poems/prose works that way. See Lovecraft where his older stuff did, but closer to his death he relied not upon punctuation but whitespace.

    Again remember, all the HTML tags (other than DIV, SPAN, and A) are SUPPOSED to represent what the content they wrap WOULD BE according to grammatical and professional writing norms, NOT what they are supposed to look like. Hence structure in the abstract, not the normative. ... and why PRE really has zero damned business wrapping prose.
     
    Last edited: Sep 9, 2017
    deathshadow, Sep 9, 2017 IP
  11. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #11
    Actually no. It is a structural element in that the formatting itself has meaning. It goes back to at least html v2 as written by T. Berners-Lee and D. Connolly.

    In poetry, the shape of the text is often an integral part of the meaning or intent. Not everything is adaptable to the non-sighted.

    How do you carry forward the meaning and intent of the attached image without maintaining the structure?

    gary
     

    Attached Files:

    • test.html
      File size:
      941 bytes
      Views:
      302
    • 1.gif
      1.gif
      File size:
      11.6 KB
      Views:
      498
    kk5st, Sep 9, 2017 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #12
    In which case it's a failure on the part of the writer.

    ... and the structure of that has what to do with the meaning OTHER than making it illegible and unintelligible altogether, SIGHTED OR NO? That is to literature what Lisa getting down on her knees for Bart is to logo design. It is to document structure what the Experience Music Project, Vidara Hotel and Walkie Talkie are to architecture. Artsy fartsy bullshit not fit for man nor beast. It has all the style, prose, and creativity of smearing vaseline on the camera lens, pissing in a jar with a cross in it, and then trying to get a humanities grant for it!

    There's a reason I consider E.E. Cummings a talentless pontz who's "art" is to actual writing what the Emperor's new clothes are to fashion. Just like other scam artists of the garden variety "tortured artist" preying on the ignorance and pretentiousness of an effete "cultural elite" that climaxed with the "modern art" movement. Oh, it was a movement alright, just nobody had the common sense to flush.

    Hence why "Joe on the street" ACTUALLY thinks Picasso and Warhol were snake oil peddling cranks who couldn't paint but would never admit that was their opinion for fear of being labelled plebeians. The bystander effect in action. EVERYBODY knows it's bull, just nobody is willing to be first to come right out and admit it!

    At least Dali's freaky **** looks like it took talent.

    You know, for someone who loves art, I do have a distinct distaste for the moment things go from being by an artist (pronounced normally) to an artist (pronounced R-teast). The moment that happens it always seems to be snake oil peddling dime-store hoodoo, five and ten voodoo. At that, Cummings was most decidedly a master. The comparisons to other hucksters like Warhol are obvious.

    But as Linderman would say, "You'll dance to anything."

    "I met Andy Warhol at a really chic party!"
    Blow it out your hairdo 'cause you work at Hardy's.
    Fifty pounds of makeup on that art school skin,
    Fifty points of I.Q. located within...
     
    deathshadow, Sep 9, 2017 IP
  13. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #13
    You're kidding, right? Your opinion of the content has zero value. It's the interests of the site owners and their visitors that matter.
     
    kk5st, Sep 10, 2017 IP