SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Carriage Returns

    What's best practice on managing line returns. For example if I have a row of lable / field, to separate and put space between each row, should I use.

    So for example this code:

    <div id="RnForm">
    <% using(Html.BeginForm("HandleForm", "Home")) %>
    <%{%>
    <span class="requiredText">*</span>
    <div class="formLabel">Background Color</div>
    <div class="formField"><%=Html.RadioButton("rbBackgroundColorWhite", 0, false)%><label for="</div>
    <div class="formField"><%=Html.RadioButton("rbBackgroundColorWhite", 0)%></div>

    <span class="requiredText">*</span>
    <div class="formLabel">BFirst Name</div>
    <div class="formField"><%=Html.TextBox("FirstName", "", new {width="100px"}) %></div>
    <%}%>
    </div>

    I need a line return for each row of label/field in my form. So typically when I think aobut this here are the possible options:


    1) add a <br> (sometimes you have to hack and put two in order to make whatever element move to next line depending on what it's next to and that element's height)

    2) add a <div class="seperator"></div> - here I typically just set the seperator to desired space. I think I put in a height to make room between the element before and after

    not sure the best but I know I hate #1 but maybe that's acceptable.

    so for example:

    <div id="RnForm">
    <% using(Html.BeginForm("HandleForm", "Home")) %>
    <%{%>
    <span class="requiredText">*</span>
    <div class="formLabel">Background Color</div>
    <div class="formField"><%=Html.RadioButton("rbBackgroundColorWhite", 0, false)%><label for="</div>
    <div class="formField"><%=Html.RadioButton("rbBackgroundColorWhite", 0)%></div>
    <br>
    <span class="requiredText">*</span>
    <div class="formLabel">BFirst Name</div>
    <div class="formField"><%=Html.TextBox("FirstName", "", new {width="100px"}) %></div>
    <%}%>
    </div>

    or

    <div id="RnForm">
    <% using(Html.BeginForm("HandleForm", "Home")) %>
    <%{%>
    <span class="requiredText">*</span>
    <div class="formLabel">Background Color</div>
    <div class="formField"><%=Html.RadioButton("rbBackgroundColorWhite", 0, false)%><label for="</div>
    <div class="formField"><%=Html.RadioButton("rbBackgroundColorWhite", 0)%></div>
    <div class="seperator"></div>
    <span class="requiredText">*</span>
    <div class="formLabel">BFirst Name</div>
    <div class="formField"><%=Html.TextBox("FirstName", "", new {width="100px"}) %></div>
    <%}%>
    </div>

  2. #2
    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)
    None of the above

    What's best practice on managing line returns
    It all depends on the situation and a break is quite valid to use within a form structure to create a new line but not for making extra space between items. The break will always create a new line but so will a closing block element assuming you haven't applied alternative styling to it.

    If we are talking about label and input pairs then that can be simply done as follows.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    fieldset{width:300px;float:left}
    legend{
        font-weight:bold;
        margin:0 0 1em 0;
        color:#000;
    }
    #form1 label{
        float:left;
        width:7em;
        text-align:right;
        padding:5px 10px 5px 10px;
    }
    #form1 input{
        width:100px;
        margin:5px 0;
        float:left;
    }
    br{clear:both;}
    </style>
    </head>
    <body>
    <form id="form1" method="post" action="">
        <fieldset>
        <legend>Form Test</legend>
        <label for="firstname">First Name:</label>
        <input type="text" name="firstname" id="firstname" />
        <br />
        <label for="lastname">Last Name:</label>
        <input type="text" name="lastname" id="lastname" />
        <br />
        <label for="address1">Address 1:</label>
        <input type="text" name="address1" id="address1" />
        <br />
        <label for="address2">Address 2:</label>
        <input type="text" name="address2" id="address2" />
        <br />
        <label for="address3">Address  3:</label>
        <input type="text" name="address3" id="address3" />
        <br />
        <label for="address4">Address 4:</label>
        <input type="text" name="address4" id="address4" />
        <br />
        <label for="city">City:</label>
        <input type="text" name="City" id="city" />
        <br />
        <label for="state">State</label>
        <input type="text" name="state" id="state" />
        <br />
        <label class="zip" for="zip">Zip:</label>
        <input type="text" name="zip" id="zip" />
        <br />
        <label for="tel">Telephone:</label>
        <input type="text" name="tel" id="tel" />
        <br />
        </fieldset>
    </form>
    </body>
    </html>
    The code is clean, consistent, simple,valid and looks ok without css.

    In more complicated situations you can use different methods such as something like this which doesn't use breaks.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #form1 label {
        float:left;
        width:8em;
        clear:both;
        text-align:right;
        padding:0 1em 0 0;
    }
    #form1 .controls {
        overflow:hidden;
        width:200px;
        display:block;
    }
    #form1 input {
        margin:0 0 .5em
    }
    #form1 div {
        overflow:hidden;
        width:100&#37;;
        margin:1em 0;
    }
    </style>
    </head>
    <body>
    <form id="form1" method="post" action="">
        <fieldset>
        <legend>Form example</legend>
        <div>
            <label for="address1">Address:</label>
            <span class="controls">
            <input type="text" name="address1" id="address1" />
            <input type="text" name="address2" id="address2" />
            <input type="text" name="address3" id="address3" />
            </span></div>
        <div>
            <label for="address4">Address block 2:</label>
            <span class="controls">
            <input type="text" name="address4" id="address4" />
            <input type="text" name="address5" id="address5" />
            <input type="text" name="address6" id="address6" />
            </span></div>
        <div>
            <label for="address7">Address block final:</label>
            <span class="controls">
            <input type="text" name="address7" id="address7" />
            <input type="text" name="address8" id="address8" />
            <input type="text" name="address9" id="address9" />
            </span></div>
        </fieldset>
    </form>
    </body>
    </html>
    Notice the structure and how inline elements are used consistently and not inter-mixed on the same level as block elements. This is a gain a valid and semantic use and the method you choose to use depends largely on what you want to achieve.

    In normal usage a break would not be used to make a carriage return because the block element does that for you. Things like forms, addresses and poems however constitute a valid use of using a break to create just a line break. (However margins/spacing should still be carried out via the css as that is a presentation issue.)

    Styling forms just needs a little thought but they can be done quite easily.

    In your code your use of structures like the following is semantically incorrect.
    Code:
    <span class="requiredText">*</span>
                <div class="formLabel">Background Color</div>
    The span is an inline element and the div is block level and they shouldn't run into each other like that (although it will validate).

    The span should really have been a div or some more suitable html element as shown in my examples.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Or display block and margins. br is considered exceptable because then if css is off (or some mobiles ect) then you still have space between the inputs (if you use 2 br's that is). I use margins though.

    Edit- yeah, like Paul said.

  4. #4
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let me ask this then. What about an empty div whose sole purpose is to show an image. Lets say for an image seperator line between each fieldset? You set the background to that image and set the div to that class. Otherwise you're gonna have a ton of images repeated througout your page as line seperators. We are not using <hr>, we have a nicer line

  5. #5
    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)
    . Lets say for an image seperator line between each fieldset? You set the background to that image and set the div to that class. Otherwise you're gonna have a ton of images repeated througout your page as line seperators. We are not using <hr>, we have a nicer line
    You would apply the image to existing elements such as a div (or fieldset element) that is providing structure for your page.

    In most cases there would already be an element in place that you can use. if no element exists then you can add an empty div as a last resort.

    You may have a group of controls contained within a div (or more semantically a fieldset) and then you could apply a background image to that.

    e.g.
    Code:
    fieldset.test {
        background:url(images/divider.gif) no-repeat 0 100&#37;;
        padding:10px 0;
        margin:10px 0;
    }

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Styling the <hr> element is impossible to get consistant throughout the browsers-a more consistant way is wrapping the hr in a div and set the styles there.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    any good books you recommend on CSS design that does not go against standards and really teaches good CSS for current web standards?

  8. #8
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote:
    . Lets say for an image seperator line between each fieldset? You set the background to that image and set the div to that class. Otherwise you're gonna have a ton of images repeated througout your page as line seperators. We are not using <hr>, we have a nicer line
    You would apply the image to existing elements such as a div (or fieldset element) that is providing structure for your page.

    In most cases there would already be an element in place that you can use. if no element exists then you can add an empty div as a last resort.

    You may have a group of controls contained within a div (or more semantically a fieldset) and then you could apply a background image to that.

    e.g.
    Code:

    fieldset.test {
    background:url(images/divider.gif) no-repeat 0 100&#37;;
    padding:10px 0;
    margin:10px 0;
    }

    Ok, how do you control where that image is held? What if you want it aligned top or bottom in that fieldset?

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I would say the Ultimate CSS reference (Pauls sig)
    Everything you know about CSS is Wrong
    The.Art.and.Science.of.CSS
    And the Ultimate HTML Reference

    Those are some high quality a$$ books there.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    To control the image placement you set the background-position

    e.g.
    background-position:bottom center;

    Edit- Paul did it
    Code:
    background:url(images/divider.gif) no-repeat 0 100&#37;;
    You can use it in %'s as well. More control.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >>>Styling the <hr> element is impossible to get consistant throughout the browsers-a more consistant way is wrapping the hr in a div and set the styles there.

    but we want an image as our <hr>. Are you suggesting to set the <hr>'s background image?

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Nevermind I didd not read Pauls post at the time of writing .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems to work in fieldset and used the background-position on a second line in code but wondering if you can specify position right in the same line as your initial background: statement?

    second, I'm trying to add now some margin top and bottom on that background. Is that possible when you have it embedded like this inside another element like fieldset or any other element? I dont' see a property off that background that lets me specfiy andy margin or padding.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you want to move the background off a little bit you can position it using pixels to be more accurate. Yes you can specify it all in one property
    background:url() no-repeat bottom right;
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #15
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all, a lot to learn here, so definitely taking this down.

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    No problem-read this
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  17. #17
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice link! I've been trying to find something like this on the net about the background-image with all the optional attributes but just could not find one. This helps a lot.

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Sitepoint has more about different things in the background property so go check it out too. ALso Paul/Tommy have a link about a recent sitepoint article on styling hte html and body elements...let me find it...can't find it.

    Edit:

    http://www.sitepoint.com/blogs/2009/02/11/styling-the-html-and-body-elements/

    Thanksss Google
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •