SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Problems floating items on form

    I'm having problems getting input and select items in a form to line up vertically and float correctly. I'm making the form 800px and I'm guessing that I will need a clear after each line of floated items? Any help would be appreciated.

    Thanks,
    jodmcc

    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    		<meta name="generator" content="Adobe GoLive">
    		<title>Hillman Foods - Contact Us</title>
    		
    	</head>
    
    	<body>
    	<div id="navigation">
    			<img id="logo" src="images/logo.gif" alt="" height="165" width="388" border="0"><img src="images/location_contact_on.gif" alt="" name="homedefault" height="62" width="402" border="0"><a onclick="CSAction(new Array(/*CMP*/'C77B46FF10'));return CSClickReturn()" onmouseover="CSAction(new Array(/*CMP*/'C773F5560'));return true;" onmouseout="CSAction(new Array(/*CMP*/'C773F5CF1'));" href="#" csclick="C77B46FF10" csout="C773F5CF1" csover="C773F5560"><img id="nav_01" src="images/home.gif" alt="" height="40" width="40" border="0"></a><a onclick="CSAction(new Array(/*CMP*/'C77B472511'));return CSClickReturn()" onmouseover="CSAction(new Array(/*CMP*/'C773F6282'));return true;" onmouseout="CSAction(new Array(/*CMP*/'C773F64D3'));" href="#" csclick="C77B472511" csout="C773F64D3" csover="C773F6282"><img id="nav_02" src="images/arrow.gif" alt="" height="40" width="40" border="0"></a><a onclick="CSAction(new Array(/*CMP*/'C77B474312'));return CSClickReturn()" onmouseover="CSAction(new Array(/*CMP*/'C773F66F4'));return true;" onmouseout="CSAction(new Array(/*CMP*/'C773F6885'));" href="#" csclick="C77B474312" csout="C773F6885" csover="C773F66F4"><img id="nav_03" src="images/burger_flip.gif" alt="" height="40" width="40" border="0"></a><a onclick="CSAction(new Array(/*CMP*/'C77B477213'));return CSClickReturn()" onmouseover="CSAction(new Array(/*CMP*/'C773F69E6'));return true;" onmouseout="CSAction(new Array(/*CMP*/'C773F6B27'));" href="#" csclick="C77B477213" csout="C773F6B27" csover="C773F69E6"><img id="nav_04" src="images/envelope_on.gif" alt="" height="40" width="40" border="0"></a><a onclick="CSAction(new Array(/*CMP*/'C77B479414'));return CSClickReturn()" onmouseover="CSAction(new Array(/*CMP*/'C773F6C38'));return true;" onmouseout="CSAction(new Array(/*CMP*/'C773F6D39'));" href="#" csclick="C77B479414" csout="C773F6D39" csover="C773F6C38"><img id="nav_05" src="images/key.gif" alt="" height="40" width="40" border="0"></a></div>
    		<div id="feedbackform"><form id="feedback" action="" method="get" name="feedback">
    				<h1>Hillman Foods Inc. Contact Us</h1>
    				<h5>Contact Information: (Please fill in all fields marked with "*")</h5>
    				<label for="title">Title*:</label><select id="title" name="title" size="1">
    					<option value="Select">Select</option>
    					<option value="Dr.">Dr.</option>
    					<option value="Rev.">Rev.</option>
    					<option value="Mr.">Mr.</option>
    					<option value="Mrs.">Mrs.</option>
    					<option value="Miss">Miss</option>
    				</select>
    				<label for="firstname">First Name *:</label><input id="firstname" name="firstname" class="text" type="text" size="24"><label for="lastname">Last Name *:</label><input id="lastname" name="lastname" class="text" type="text" size="24"><label for="mailingaddress">Mailing Address * (U.S. Only):</label><input id="mailingaddress" name="mailingaddress" class="text" type="text" size="24"><input id="mailingaddress2" name="mailingaddress2" class="text" type="text" size="24"><label for="mailcity">City *:</label><input id="mailcity" name="mailcity" class="text" type="text" size="24"><label for="mailstate">State *:</label><select id="mailstate"  name="mailstate" size="1">
    					<option value="Select">Select</option>
    					<option value="AL">AL</option>
    					<option value="AK">AK</option>
    					<option value="AZ">AZ</option>
    					<option value="AR">AR</option>
    					<option value="CA">CA</option>
    					<option value="CO">CO</option>
    					<option value="CT">CT</option>
    					<option value="DE">DE</option>
    					<option value="FL">FL</option>
    					<option value="GA">GA</option>
    					<option value="HI">HI</option>
    					<option value="ID">ID</option>
    					<option value="IL">IL</option>
    					<option value="IN">IN</option>
    					<option value="IA">IA</option>
    					<option value="KS">KS</option>
    					<option value="KY">KY</option>
    					<option value="LA">LA</option>
    					<option value="ME">ME</option>
    					<option value="MD">MD</option>
    					<option value="MA">MA</option>
    					<option value="MI">MI</option>
    					<option value="MN">MN</option>
    					<option value="MS">MS</option>
    					<option value="MO">MO</option>
    					<option value="MT">MT</option>
    					<option value="NE">NE</option>
    					<option value="NV">NV</option>
    					<option value="NH">NH</option>
    					<option value="NJ">NJ</option>
    					<option value="NM">NM</option>
    					<option value="NY">NY</option>
    					<option value="NC">NC</option>
    					<option value="ND">ND</option>
    					<option value="OH">OH</option>
    					<option value="OK">OK</option>
    					<option value="OR">OR</option>
    					<option value="PA">PA</option>
    					<option value="RI">RI</option>
    					<option value="SC">SC</option>
    					<option value="SD">SD</option>
    					<option value="TN">TN</option>
    					<option value="TX">TX</option>
    					<option value="UT">UT</option>
    					<option value="VT">VT</option>
    					<option value="VA">VA</option>
    					<option value="WA">WA</option>
    					<option value="WV">WV</option>
    					<option value="WI">WI</option>
    					<option value="WY">WY</option>
    				</select>
    				<label for="mailzip">Zip *:</label><input id="mailzip" name="mailzip" class="text" type="text" size="24"><label for="dayphone">Day Phone *:</label><input id="dayphone" name="dayphone" class="text" type="text" size="3">-<input id="dayphone2" name="dayphone2" class="text" type="text" size="3">-<input id="dayphone3" name="dayphone3" class="text" type="text" size="4"><label for="dayphoneext">Extension:</label><input id="dayphoneext" name="dayphoneext" class="text" type="text" size="5"><label for="eveningphone">Evening Phone *:</label><input id="eveningphone" name="eveningphone" class="text" type="text" size="3">-<input id="eveningphone2" name="eveningphone2" class="text" type="text" size="3">-<input id="eveningphone3" name="eveningphone3" class="text" type="text" size="4"><label for="eveningphoneext">Extension:</label><input id="eveningphoneext" name="eveningphoneext" class="text" type="text" size="5"><label for="timetoreach">Most convenient time/day to reach you by phone:</label><input id="timetoreach" name="timetoreach" class="text" type="text" size="24"><label for="email">Your E-mail Address *:</label><input id="email" name="email" class="text" type="text" size="24"><label for="email2">Re-enter E-mail Address *:</label><input id="email2" name="email2" class="text" type="text" size="24"><h5>Restaurant Visited: (Please fill in all fields)</h5><label for="restaddress">Address *:</label><input id="restaddress" name="restaddress" class="text" type="text" size="24"><label for="restcity">City *:</label><input id="restcity" name="restcity" class="text" type="text" size="24"><label for="reststate">State *:</label><select id="reststate"  name="reststate" size="1">
    					<option value="Select">Select</option>
    					<option value="AL">AL</option>
    					<option value="AK">AK</option>
    					<option value="AZ">AZ</option>
    					<option value="AR">AR</option>
    					<option value="CA">CA</option>
    					<option value="CO">CO</option>
    					<option value="CT">CT</option>
    					<option value="DE">DE</option>
    					<option value="FL">FL</option>
    					<option value="GA">GA</option>
    					<option value="HI">HI</option>
    					<option value="ID">ID</option>
    					<option value="IL">IL</option>
    					<option value="IN">IN</option>
    					<option value="IA">IA</option>
    					<option value="KS">KS</option>
    					<option value="KY">KY</option>
    					<option value="LA">LA</option>
    					<option value="ME">ME</option>
    					<option value="MD">MD</option>
    					<option value="MA">MA</option>
    					<option value="MI">MI</option>
    					<option value="MN">MN</option>
    					<option value="MS">MS</option>
    					<option value="MO">MO</option>
    					<option value="MT">MT</option>
    					<option value="NE">NE</option>
    					<option value="NV">NV</option>
    					<option value="NH">NH</option>
    					<option value="NJ">NJ</option>
    					<option value="NM">NM</option>
    					<option value="NY">NY</option>
    					<option value="NC">NC</option>
    					<option value="ND">ND</option>
    					<option value="OH">OH</option>
    					<option value="OK">OK</option>
    					<option value="OR">OR</option>
    					<option value="PA">PA</option>
    					<option value="RI">RI</option>
    					<option value="SC">SC</option>
    					<option value="SD">SD</option>
    					<option value="TN">TN</option>
    					<option value="TX">TX</option>
    					<option value="UT">UT</option>
    					<option value="VT">VT</option>
    					<option value="VA">VA</option>
    					<option value="WA">WA</option>
    					<option value="WV">WV</option>
    					<option value="WI">WI</option>
    					<option value="WY">WY</option>
    				</select>
    				<label for="restlandmark">Landmark * (describe location of restaurant):</label><input id="restlandmark" name="restlandmark" class="text" type="text" size="24">
    			</form></div>
    		<p></p>
    	</body>
    
    </html>
    CSS:
    Code:
    body   { font-size: small; font-family: Verdana, Arial, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; margin: 0; }
    * html body { font-size: x-small; /* for IE5/Win */ f\ont-size: small; /* for other IE versions */ }
    h1 { font-size: 150%; }
    h2 { font-size: 130%; }
    h3 { font-size: 120%; }
    h4 { font-size: 110%; }
    h5 { font-size: 100%; }
    ul  { list-style-type: square; list-style-position: outside; margin: 0 0 0 20px; padding: 0 }
    ul li    { font-size: 100%; padding-bottom: 8px }
    .redtext  { color: red }
    #navigation  { margin-bottom: 15px; width: 800px; }
    #navigation img#logo  { margin-right: 10px; float: left; }
    #navigation img#nav_01 { margin-top: 63px; margin-right: 50px; float: left; }
    #navigation img#nav_02 { margin-top: 63px; margin-right: 50px; float: left; }
    #navigation img#nav_03 { margin-top: 63px; margin-right: 50px; float: left; }
    #navigation img#nav_04 { margin-top: 63px; margin-right: 50px; float: left; }
    #navigation img#nav_05 { margin-top: 63px }
    label   { font-size: 75%; display: block }
    form { width: 800px; }
    form input, form select { float: left; }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Is there any particular reason you are floating those inputs? What layout do you actually want?

    Removing form input, form select { float: left; } allows the elements to stack nicely.

  3. #3
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And this has no bearing whatsoever to the problem but i just noticed you have an empty p after your form....
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  4. #4
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    It is a long form. I'm trying to get Title, First and Last on one line, both Address inputs stacked, City, State and Zip on one line, Day Phone and Extension on one line, Evening Phone and Extension on one line. Basically trying to redo a form that was originally done as a table.

  5. #5
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Should I wrap these items in DIVs? I don't to create "divitus". Also, items are not vertically aligning. Any help would be great.

    jodmcc
    Last edited by jodmcc; Jan 29, 2010 at 12:16. Reason: punctuation

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jodmcc View Post
    Should I wrap these items in DIVs? I don't to create "divitus".
    Don't be afraid to use divs. They are meant for dividing up content into logical blocks. Indeed, your page won't validate in strict mode unless inputs are contained in block-level elements anyway (be it divs or Ps or whatever).

    Is something like this what you were aiming for?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    		<meta name="generator" content="Adobe GoLive">
    		<title>Hillman Foods - Contact Us</title>
    		<style type="text/css" media="all">
    body   { font-size: small; font-family: Verdana, Arial, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; margin: 0; }
    * html body { font-size: x-small; /* for IE5/Win */ f\ont-size: small; /* for other IE versions */ }
    h1 { font-size: 150%; }
    h2 { font-size: 130%; }
    h3 { font-size: 120%; }
    h4 { font-size: 110%; }
    h5 { font-size: 100%; }
    ul  { list-style-type: square; list-style-position: outside; margin: 0 0 0 20px; padding: 0 }
    ul li    { font-size: 100%; padding-bottom: 8px }
    .redtext  { color: red }
    
    label   { font-size: 75%; display: block }
    form { width: 800px; }
    /* form input, form select { float: left; } */
    
    
    .section, .group {padding-bottom: 20px;}
    .section input, .section label, .section select {display:inline;}
    .group input, .group label, .group select {display:block;}
    </style>
    	</head>
    
    	<body>
    	
    	
    
    <div id="feedbackform">
    <form id="feedback" action="" method="get" name="feedback">
    <h1>Hillman Foods Inc. Contact Us</h1>
    <h5>Contact Information: (Please fill in all fields marked with "*")</h5>
    
    <div class="section">
    
    <label for="title">Title*:</label><select id="title" name="title" size="1">
        <option value="Select">Select</option>
        <option value="Dr.">Dr.</option>
        <option value="Rev.">Rev.</option>
        <option value="Mr.">Mr.</option>
        <option value="Mrs.">Mrs.</option>
        <option value="Miss">Miss</option>
    </select>
    
    <label for="firstname">First Name *:</label><input id="firstname" name="firstname" class="text" type="text" size="24"><label for="lastname">Last Name *:</label><input id="lastname" name="lastname" class="text" type="text" size="24">
    
    </div>
    
    <div class="group">
    <label for="mailingaddress">Mailing Address * (U.S. Only):</label><input id="mailingaddress" name="mailingaddress" class="text" type="text" size="24"><input id="mailingaddress2" name="mailingaddress2" class="text" type="text" size="24">
    </div>
    
    <div class="section">
    <label for="mailcity">City *:</label><input id="mailcity" name="mailcity" class="text" type="text" size="24"><label for="mailstate">State *:</label><select id="mailstate"  name="mailstate" size="1">
    					<option value="Select">Select</option>
    					<option value="AL">AL</option>
    					<option value="AK">AK</option>
    					<option value="AZ">AZ</option>
    					<option value="AR">AR</option>
    					<option value="CA">CA</option>
    					<option value="CO">CO</option>
    					<option value="CT">CT</option>
    					<option value="DE">DE</option>
    					<option value="FL">FL</option>
    					<option value="GA">GA</option>
    					<option value="HI">HI</option>
    					<option value="ID">ID</option>
    					<option value="IL">IL</option>
    					<option value="IN">IN</option>
    					<option value="IA">IA</option>
    					<option value="KS">KS</option>
    					<option value="KY">KY</option>
    					<option value="LA">LA</option>
    					<option value="ME">ME</option>
    					<option value="MD">MD</option>
    					<option value="MA">MA</option>
    					<option value="MI">MI</option>
    					<option value="MN">MN</option>
    					<option value="MS">MS</option>
    					<option value="MO">MO</option>
    					<option value="MT">MT</option>
    					<option value="NE">NE</option>
    					<option value="NV">NV</option>
    					<option value="NH">NH</option>
    					<option value="NJ">NJ</option>
    					<option value="NM">NM</option>
    					<option value="NY">NY</option>
    					<option value="NC">NC</option>
    					<option value="ND">ND</option>
    					<option value="OH">OH</option>
    					<option value="OK">OK</option>
    					<option value="OR">OR</option>
    					<option value="PA">PA</option>
    					<option value="RI">RI</option>
    					<option value="SC">SC</option>
    					<option value="SD">SD</option>
    					<option value="TN">TN</option>
    					<option value="TX">TX</option>
    					<option value="UT">UT</option>
    					<option value="VT">VT</option>
    					<option value="VA">VA</option>
    					<option value="WA">WA</option>
    					<option value="WV">WV</option>
    					<option value="WI">WI</option>
    					<option value="WY">WY</option>
    				</select>
    				<label for="mailzip">Zip *:</label><input id="mailzip" name="mailzip" class="text" type="text" size="24">
    </div>
    
    <div class="section">
    <label for="dayphone">Day Phone *:</label><input id="dayphone" name="dayphone" class="text" type="text" size="3">-<input id="dayphone2" name="dayphone2" class="text" type="text" size="3">-<input id="dayphone3" name="dayphone3" class="text" type="text" size="4"><label for="dayphoneext">Extension:</label><input id="dayphoneext" name="dayphoneext" class="text" type="text" size="5">
    </div>
    
    <div class="section">
    <label for="eveningphone">Evening Phone *:</label><input id="eveningphone" name="eveningphone" class="text" type="text" size="3">-<input id="eveningphone2" name="eveningphone2" class="text" type="text" size="3">-<input id="eveningphone3" name="eveningphone3" class="text" type="text" size="4"><label for="eveningphoneext">Extension:</label><input id="eveningphoneext" name="eveningphoneext" class="text" type="text" size="5">
    </div>
    
    <div class="section">
    <label for="timetoreach">Most convenient time/day to reach you by phone:</label><input id="timetoreach" name="timetoreach" class="text" type="text" size="24">
    </div>
    
    <div class="section">
    <label for="email">Your E-mail Address *:</label><input id="email" name="email" class="text" type="text" size="24">
    </div>
    
    <div class="section">
    <label for="email2">Re-enter E-mail Address *:</label><input id="email2" name="email2" class="text" type="text" size="24">
    </div>
    
    
    <h5>Restaurant Visited: (Please fill in all fields)</h5>
    
    <label for="restaddress">Address *:</label><input id="restaddress" name="restaddress" class="text" type="text" size="24"><label for="restcity">City *:</label><input id="restcity" name="restcity" class="text" type="text" size="24"><label for="reststate">State *:</label><select id="reststate"  name="reststate" size="1">
    					<option value="Select">Select</option>
    					<option value="AL">AL</option>
    					<option value="AK">AK</option>
    					<option value="AZ">AZ</option>
    					<option value="AR">AR</option>
    					<option value="CA">CA</option>
    					<option value="CO">CO</option>
    					<option value="CT">CT</option>
    					<option value="DE">DE</option>
    					<option value="FL">FL</option>
    					<option value="GA">GA</option>
    					<option value="HI">HI</option>
    					<option value="ID">ID</option>
    					<option value="IL">IL</option>
    					<option value="IN">IN</option>
    					<option value="IA">IA</option>
    					<option value="KS">KS</option>
    					<option value="KY">KY</option>
    					<option value="LA">LA</option>
    					<option value="ME">ME</option>
    					<option value="MD">MD</option>
    					<option value="MA">MA</option>
    					<option value="MI">MI</option>
    					<option value="MN">MN</option>
    					<option value="MS">MS</option>
    					<option value="MO">MO</option>
    					<option value="MT">MT</option>
    					<option value="NE">NE</option>
    					<option value="NV">NV</option>
    					<option value="NH">NH</option>
    					<option value="NJ">NJ</option>
    					<option value="NM">NM</option>
    					<option value="NY">NY</option>
    					<option value="NC">NC</option>
    					<option value="ND">ND</option>
    					<option value="OH">OH</option>
    					<option value="OK">OK</option>
    					<option value="OR">OR</option>
    					<option value="PA">PA</option>
    					<option value="RI">RI</option>
    					<option value="SC">SC</option>
    					<option value="SD">SD</option>
    					<option value="TN">TN</option>
    					<option value="TX">TX</option>
    					<option value="UT">UT</option>
    					<option value="VT">VT</option>
    					<option value="VA">VA</option>
    					<option value="WA">WA</option>
    					<option value="WV">WV</option>
    					<option value="WI">WI</option>
    					<option value="WY">WY</option>
    				</select>
    				<label for="restlandmark">Landmark * (describe location of restaurant):</label><input id="restlandmark" name="restlandmark" class="text" type="text" size="24">
    			</form></div>
    		<p></p>
    	</body>
    
    </html>

  7. #7
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To add a bit, forms by nature are not so easy to style. The best way usually is to provide 'hooks' for the styling, meaning dividing parts of the form in divs so they can serve as hooks for the css and using classes to style separate elements. And using a reset for forms to try to get the same look x-browser.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  8. #8
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph,

    That's looking like what I was going for. I'm going to take a look at what you did since I do want to learn and not have to ask so many questions. I was hesitant to use all the DIVs because of all the flack about using too many of them. This CSS is still somewhat hard to wrap my head around, even after getting numerous books, i.e., Eric Meyer, Dan Cedarholm just to name a few.

    jodmcc

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    What I did was very simple, and not necessarily the best way to go about it, but pretty reliable. I just wrapped a div around various items and set a few simple rules for them, so it shouldn't be hard to follow.

    You'll no doubt want to add some more styling, such as padding on the lables and inputs, but I thought it was best to see if this was what you wanted before going further.


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
  •