How to css a form

[newcoder1010]

Hello,

 

I have two images attached. Current shows the image of the website. Trying showing what i am trying to achieve. Below html shows the current page html. I am trying to apply css so my current page looks like the Trying page. If you can help me with the css, I would be so happy. I spent few hours and middle of no where.

<div class="Address_FL form-item webform-component webform-component-addressfield webform-component--PersonalInfo--myaddress">  <label for="edit-submitted-personalinfo-myaddress">myaddress <span class="form-required" title="This field is required.">*</span></label> <div class="form-item form-type-select form-item-submitted-PersonalInfo-myaddress-country">  <label for="edit-submitted-personalinfo-myaddress-country--3">Country </label> <select class="country form-select ajax-processed" autocomplete="country" id="edit-submitted-personalinfo-myaddress-country--3" name="submitted[PersonalInfo][myaddress][country]"><option value="">- None -</option><option value="US" selected="selected">United States</option></select></div><div class="street-block"><div class="form-item form-type-textfield form-item-submitted-PersonalInfo-myaddress-thoroughfare">  <label for="edit-submitted-personalinfo-myaddress-thoroughfare">Address 1 <span class="form-required" title="This field is required.">*</span></label> <input class="thoroughfare form-text required" autocomplete="address-line1" id="edit-submitted-personalinfo-myaddress-thoroughfare" name="submitted[PersonalInfo][myaddress][thoroughfare]" value="" size="30" maxlength="255" type="text"></div><div class="form-item form-type-textfield form-item-submitted-PersonalInfo-myaddress-premise">  <label for="edit-submitted-personalinfo-myaddress-premise">Address 2 </label> <input class="premise form-text" autocomplete="address-line2" id="edit-submitted-personalinfo-myaddress-premise" name="submitted[PersonalInfo][myaddress][premise]" value="" size="30" maxlength="255" type="text"></div></div><div class="addressfield-container-inline locality-block country-US"><div class="form-item form-type-textfield form-item-submitted-PersonalInfo-myaddress-locality">  <label for="edit-submitted-personalinfo-myaddress-locality">City <span class="form-required" title="This field is required.">*</span></label> <input class="locality form-text required" autocomplete=""address-level2" id="edit-submitted-personalinfo-myaddress-locality" name="submitted[PersonalInfo][myaddress][locality]" value="" size="30" maxlength="255" type="text"></div> <div class="form-item form-type-select form-item-submitted-PersonalInfo-myaddress-administrative-area">  <label for="edit-submitted-personalinfo-myaddress-administrative-area">State <span class="form-required" title="This field is required.">*</span></label> <select class="state form-select required" autocomplete="address-level1" id="edit-submitted-personalinfo-myaddress-administrative-area" name="submitted[PersonalInfo][myaddress][administrative_area]"><option value="" selected="selected">- Select -</option><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="DC">District of Columbia</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option><option value=" ">--</option><option value="AA">Armed Forces (Americas)</option><option value="AE">Armed Forces (Europe, Canada, Middle East, Africa)</option><option value="AP">Armed Forces (Pacific)</option><option value="AS">American Samoa</option><option value="FM">Federated States of Micronesia</option><option value="GU">Guam</option><option value="MH">Marshall Islands</option><option value="MP">Northern Mariana Islands</option><option value="PW">Palau</option><option value="PR">Puerto Rico</option><option value="VI">Virgin Islands</option></select></div> <div class="form-item form-type-textfield form-item-submitted-PersonalInfo-myaddress-postal-code">  <label for="edit-submitted-personalinfo-myaddress-postal-code">ZIP code <span class="form-required" title="This field is required.">*</span></label> <input class="postal-code form-text required" autocomplete="postal-code" id="edit-submitted-personalinfo-myaddress-postal-code" name="submitted[PersonalInfo][myaddress][postal_code]" value="" size="10" maxlength="255" type="text"></div></div></div>

Edited August 19, 2015 by newcoder1010

[Wolverine]

That is no CSS I have ever seen, that said the CSS in the tutorial looks like this: <!DOCTYPE html><html><head><style>form { display: block; margin-top: 0em;}</style></head><body><p>A form element is displayed like this:</p><form action="demo_form.asp">First name: <input type="text" name="FirstName" value="Mickey"><br>Last name: <input type="text" name="LastName" value="Mouse"><br><input type="submit" value="Submit"></form><p>Change the default CSS settings to see the effect.</p></body></html>

[davej]

I don't think it is practical to have such long names for every class and every id. How is "edit-submitted-personalinfo-myaddress-country--3" necessary? Why isn't "country" or "country3" good enough? You have increased the confusion-factor with these wordy strings.

 

Here is a simplified version without your long strings...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>div{margin:5px 8px}.leftmar50{margin-left:90px}.leftmar50f{margin-left:90px;float:left}label{color:blue;font-weight:bold}span.red{color:red}#state{width:120px}</style></head><body><div style="border:1px solid blue;width:550px;height:210px"> <label for="block">myaddress <span class="red" title="This field is required.">*</span></label> <div class="leftmar50">  <label for="country">Country </label><br/>  <select class="" autocomplete="country" id="country" name="submitted[PersonalInfo][myaddress][country]"><option value="">- None -</option><option value="US" selected="selected">United States</option></select> </div> <div class="leftmar50f">   <label for="addr1">Address 1 <span class="red" title="This field is required.">*</span></label><br/>   <input autocomplete="address-line1" id="addr1" name="submitted[PersonalInfo][myaddress][thoroughfare]" value="" size="30" maxlength="255" type="text"> </div> <div style="float:left">   <label for="addr2">Address 2 </label><br/>   <input autocomplete="address-line2" id="addr2" name="submitted[PersonalInfo][myaddress][premise]" value="" size="30" maxlength="255" type="text"> </div> <br style="clear:both"/> <div class="leftmar50f">   <label for="city">City <span class="red" title="This field is required.">*</span></label><br/>   <input autocomplete=""address-level2" id="city" name="submitted[PersonalInfo][myaddress][locality]" value="" size="30" maxlength="255" type="text"> </div> <div style="float:left">   <label for="state">State <span class="red" title="This field is required.">*</span></label><br/>   <select class="" autocomplete="address-level1" id="state" name="submitted[PersonalInfo][myaddress][administrative_area]"><option value="" selected="selected">- Select -</option><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="DC">District of Columbia</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option><option value=" ">--</option><option value="AA">Armed Forces (Americas)</option><option value="AE">Armed Forces (Europe, Canada, Middle East, Africa)</option><option value="AP">Armed Forces (Pacific)</option><option value="AS">American Samoa</option><option value="FM">Federated States of Micronesia</option><option value="GU">Guam</option><option value="MH">Marshall Islands</option><option value="MP">Northern Mariana Islands</option><option value="PW">Palau</option><option value="PR">Puerto Rico</option><option value="VI">Virgin Islands</option></select> </div> <div style="float:left">  <label for="zip">ZIP code <span class="red form-required" title="This field is required.">*</span></label><br/>  <input autocomplete="postal-code" id="zip" name="submitted[PersonalInfo][myaddress][postal_code]" value="" size="10" maxlength="255" type="text"> </div> <br style="clear:both"/></div></body></html>