SitePoint Sponsor

User Tag List

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

    Float left prevents separation

    the 2nd * shows up next to the last div before it because I have all my Ids here floating left. This is a web form so I need the next span to show up on a new row but instead the *shows up inext to the first radiobutton list

    <div id="Tform">
    <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="fieldRowSeperator"></div>

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

    .formLabel
    {
    font-size: 14px;
    padding: 10px 10px 0px 0px;
    vertical-align:text-top;
    float: left;
    }

    .formField
    {
    padding: 10px 10px 0px 0px;
    float: left;
    }

    .fieldRowSeperator
    {
    height: 20px;
    }

    .requiredText
    {
    color: #7F1517;
    padding: 10px 5px 0px 0px;
    float: left;
    }

    essentially I'm trying to create a divless grid for my form fields to create rows for my form.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    This is the CSS forum so please just post CSS and html and not ASP. Just post the resulting html that you get from view source and it will make our job a lot easier

    I think I answered this question in your other posts with the examples I gave.

    If you want the items in a row do something like this:
    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;}
    label abbr{
        color:red;
        font-weight:bold;
        border:none;
        padding:0 3px 0 0;
    }
    
    </style>
    </head>
    <body>
    <form id="form1" method="post" action="">
        <fieldset>
        <legend>Form Test</legend>
        <label for="firstname"><abbr title="Required field">*</abbr>First Name:</label>
        <input type="text" name="firstname" id="firstname" />
        <br />
        <label for="lastname"><abbr title="Required field">*</abbr>Last Name:</label>
        <input type="text" name="lastname" id="lastname" />
        <br />
        <label for="address1"><abbr title="Required field">*</abbr>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>


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
  •