SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Divs and CSS

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Divs and CSS

    This should be really simple but I for whatever reason I can't figure it out. All I want to do is space out my text boxes just a little bit.

    HTML part
    Code:
    <div id="Norm" class="input" style="padding:10px;">
    			First Name:
    			<input name="fname" type="text" id="fname" /><br>
    			Last Name:
    			<input name="lname" type="text" id="lname" />
    		</div>
    CSS part
    Code:
    .input{ padding-bottom:20px; }

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    You need to use margin instead. You may have to float them, inline-block them, or block them for the margin to take. I don't remember.

  3. #3
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just tried all of your suggestions and nothing changed. Any other ideas?

    .input {
    float:left;
    margin:20px;
    display:inline; (also tried block)
    }

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    input not .input

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You have added those styles to the .input class, you need to, however, apply it to your actual inputs which do not have the .input class. So, either make it .input input or add the class to the input elements rather than to the div.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Both of your suggestions worked, thank you.

  7. #7
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,026
    Mentioned
    64 Post(s)
    Tagged
    0 Thread(s)
    Few things.
    First, inline CSS is evil. Don't use it without good reason. Good reason is very, very rare - and this isn't one of them. In your code here the 'padding-bottom' call in your css gets pre-empted by the inline style. If you hadn't had the inline style there you would have noticed the padding changing on the div as you adjusted it and that in turn would have made the lack of change on the input elements that much less mysterious.

    Second, class element names have a lot of landmine potential for the reasons you saw when you got your answer. It's just too easy to miss that period when reading the css sheet. That said, if you are writing your sheet to work without an html5shiv then using html5 semantic tags as class names is acceptable, even desirable. For example <div class="header"> instead of <header> Just don't mix and match these approaches - either used classes for the html semantic elements, or directly use the html5 semantics.

    Third, use the label tag. <label for="fname">First Name/label> The for attribute of label ties the label to the input it labels - the benefit of this is clicking on the label places focus on the input element. While this isn't especially useful for text inputs, it makes radio and checkbox input much more user friendly, ESPECIALLY on mobile devices.


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
  •