SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard rozner's Avatar
    Join Date
    Oct 2002
    Location
    Paris
    Posts
    1,058
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css form problem

    I'm redesigning a form that was using tables... I'm trying to keep the css as simple as possible as this is not a complicated form, the only issue I'm having is with a checkbox and the text next to it, or the text that's supposed to be next to it, but ends up on the next line.

    This piece of HTML
    Code:
    <label class="signUpFormLabel">&nbsp;</label>
    <input name="print" type="checkbox" id="printCheckbox" onclick="javascript:displayState()"/>
    <p class="bluetext">I would like to receive free print-based activities, reports and CD-ROMs of thought-leader interviews.</p>
    with this css
    Code:
    label.signUpFormLabel, label.signUpFormLabelOptional {
        float: left;
        width: 120px;
        color: #0878ac;
        margin-top: 2px;
    
    }
    So I want the text to appear next to the checkbox, but it goes on the next line. The bluetext class is just a color, I tried sticking float:left in there but it makes no difference.

    I would appreciate any help on this.

    Thanks

  2. #2
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, you're using a "p" tag which starts a new paragraph. that's why it jumps down to another line below. you should do it like this my opinion:

    Code:
    <input name="print" type="checkbox" id="printCheckbox" onclick="javascript:displayState()"/>
    <label for="printCheckbox" class="bluetext">I would like to receive free print-based activities, reports and CD-ROMs of thought-leader interviews.</label>
    labels should always have the "for" attribute defined to tell the browser what element it's a label for. then just apply your class to style it.
    Steve Davis

  3. #3
    SitePoint Wizard rozner's Avatar
    Join Date
    Oct 2002
    Location
    Paris
    Posts
    1,058
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah you're right about the <p>, I had tried span and div as well, span wrapped around in an ugly way, div did the same as p, I'll try using a label for that as well.
    Thanks

  4. #4
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah div always starts a new line by default too. labels and only labels should be used for accessibility reasons. labels allow the user to click on the text and have it select the form element, and it also makes it easier for blind people using screen readers to view your site.
    Steve Davis

  5. #5
    SitePoint Wizard rozner's Avatar
    Join Date
    Oct 2002
    Location
    Paris
    Posts
    1,058
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post

    ok I've tried the label but it does the same thing as span

    it looks kind of like this
    Code:
                          [checkbox]I would like to receive free print-based CME/CE activities, clinical 
    reports and CD-ROMs of thought-leader interviews.
    
    // but should be
    
                          [checkbox]I would like to receive free print-based CME/CE activities, clinical 
                                   reports and CD-ROMs of thought-leader interviews.
    
    // note: this is not to scale :)

  6. #6
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    u should post a live example, but i think you're saying the text is wrapping below the checkbox. i would just add a bit of bottom padding or margin to the checkbox to counteract this, or set a height value. not sure, but one of those should work.

    OR

    you could use a float: left on the checkbox, but then you'd have to clear the floats below all this. not sure you know about floats, but that should work. google it, or look on the FAQ in this forum.
    Steve Davis

  7. #7
    SitePoint Wizard rozner's Avatar
    Join Date
    Oct 2002
    Location
    Paris
    Posts
    1,058
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried the padding and margin things, both didn't work for me, but the float did. I am familiar with floats, but they do confuse me sometimes, in the end that's what works for me. Thanks for your help.

  8. #8
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yay! no problem!
    Steve Davis

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bear in mind the example I'm providing isn't very user-friendly when it comes to forms due to the use of the universal selector, but if you're willing to redeclare the margins and padding on those elements you need to kill those properties on, it can be quite effective.

    HTML 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" xml:lang="en" lang="en">
    <head>
    	<title>CSS Based Form Layout</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css" media="screen,projection">
    	
    	* {
    		margin: 0;
    		padding: 0;
    	}
    
    	body {
    		background: #FFF;
    		color: #000;
    		font: normal 85&#37;/140% "lucida console", tahoma, verdana, arial, helvetica, sans-serif;
    		letter-spacing: 1px;
    		padding: 0 1em;
    	}
    
    	h1 {
    		background: #FFF;
    		color: inherit;
    		font: bold 1.95em/2em georgia, garamond, "times new roman", times, serif;
    	}
    
    	#example-form {
    		padding: 0.5em 0;
    	}
    		#about {
    			float: left;
    			margin-right: 1em;
    			width: 30em;
    		}
    
    		#survey {
    			float: left;
    			width: 33em;
    		}
    
    		.fieldset {
    			background: #FFE;
    			border: 1px solid #000;
    			margin-bottom: 1.5em;
    			padding: 1em 0 0.5em 0.5em;
    			position: relative;
    		}
    			fieldset {
    				border: 0;
    				display: block;
    			}
    		
    		legend span {
    			background: #CFC;
    			border: 1px solid #000;
    			color: #00C;
    			padding: 0 0.25em;
    			position: absolute;
    				top: -0.75em;
    			}
    		}
    
    		label {
    			margin: 0.25em 0;
    			vertical-align: middle;
    		}
    			#about label {
    				clear: left;
    				float: left;
    				padding-top: 0.1em;
    				width: 14em;
    			}
    
    			#survey label:hover {
    				background: #FFE;
    				color: #00F;
    				font-weight: bold;
    			}
    
    		input {
    			margin-bottom: 0.5em;
    			padding: 0 0.25em;
    			vertical-align: middle;
    		}
    			#about input {
    				background: #FCFBFA;
    				color: inherit;
    				width: 14em;
    			}
    
    			#survey input {
    				margin: 0 0.25em 0 0;
    				padding: 0;
    				width: auto;
    			}
    
    		select, textarea {
    			margin: 0.5em 0.25em;
    		}
    
    		select {
    			background: #FCFBFA;
    			color: inherit;
    		}
    
    		textarea {
    			background: #FCFBFA;
    			color: inherit;
    			padding: 0.5em;
    		}
    
    		textarea:active, textarea:focus, textarea:hover {
    			background: #FFF;
    			color: inherit;
    		}
    
    		.controls {
    			clear: left;
    		}
    
    	</style>
    </head>
    <body>
    <h1>Semantic Forms with (X)HTML and CSS</h1>
    <form action="#" id="example-form" method="post">
    	<div id="about">
    		<div class="fieldset">
    			<fieldset>
    				<legend><span>Basic Information</span></legend>
    				<label for="name">Your Name:</label> <input id="name" type="text" size="30" /><br />
    				<label for="email">Your Email Address:</label> <input id="email" type="text" size="30" />
    			</fieldset>
    		</div>
    		<div class="fieldset">
    			<fieldset>
    				<legend><span>What Is Your Favorite Color?</span></legend>
    				<select name="sections">
    					<option value="0">--select one--</option>
    					<option value="1">Black</option>
    					<option value="2">Blue</option>
    					<option value="3">Brown</option>
    					<option value="4">Green</option>
    					<option value="5">Grey</option>
    					<option value="5">Orange</option>
    					<option value="6">Purple</option>
    					<option value="7">Red</option>
    					<option value="8">White</option>
    					<option value="0">Yellow</option>
    					<option value="10">Other/No Preference</option>
    				</select>
    			</fieldset>
    		</div>
    		<div class="fieldset">
    			<fieldset>
    				<legend><span>Tell Us About Yourself</span></legend>
    				<div>
    					<textarea rows="10" cols="40"></textarea>
    				</div>
    			</fieldset>
    		</div>
    	</div>
    	<div id="survey">
    		<div class="fieldset">
    			<fieldset>
    				<legend><span>What browsers are installed on your computer?</span></legend>
    				<div>
    					<label for="msie"><input id="msie" type="checkbox" name="browser" value="Microsoft" /> Internet Explorer</label><br />
    					<label for="netscape"><input id="netscape" type="checkbox" name="browser" value="Netscape" /> Netscape Browser</label><br />
    					<label for="mozilla"><input id="mozilla" type="checkbox" name="browser" value="Mozilla" /> Mozilla FireFox</label><br />
    					<label for="opera"><input id="opera" type="checkbox" name="browser" value="Opera" /> Opera Web Browser</label><br />
    					<label for="konqueror"><input id="konqueror" type="checkbox" name="browser" value="Konqueror" /> Konqueror KDE</label><br />
    					<label for="safari"><input id="safari" type="checkbox" name="browser" value="Apple" /> Safari Web Browser</label><br />
    					<label for="another-browser"><input id="another-browser" type="checkbox" name="browser" value="Other" /> Something Else</label>
    				</div>
    			</fieldset>
    		</div>
    		<div class="fieldset">
    			<fieldset>
    				<legend><span>What do you use to build your Web sites?</span></legend>
    				<div>
    					<label for="golive"><input id="golive" name="editor" type="radio" value="Adobe GoLive" /> Adobe GoLive</label><br />
    					<label for="dreamweaver"><input id="dreamweaver" name="editor" type="radio" value="Macromedia Dreamweaver" /> Macromedia Dreamweaver</label><br />
    					<label for="frontpage"><input id="frontpage" name="editor" type="radio" value="Microsoft FrontPage" /> Microsoft FrontPage</label><br />
    					<label for="hand"><input id="hand" name="editor" type="radio" value="A Text Editor" /> Text Editor</label><br />
    					<label for="other"><input id="other" name="editor" type="radio" value="Other" /> Something Else</label>
    				</div>
    			</fieldset>
    		</div>
    	</div>	
    	<div class="controls">
    		<input class="submit" type="submit" value="Submit Form" /> <input class="reset" type="reset" value="Clear Form" />
    	</div>
    </form>
    <div>
    	Copyright &copy; 2006-2007, The Monster Under the Bed. All Rights To Scare
    	Unsuspecting Children Reserved.
    </div>
    </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
  •