Need to change some CSS

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
legend986
Forum Contributor
Posts: 258
Joined: Sun Jul 15, 2007 2:45 pm

Need to change some CSS

Post by legend986 »

I would like to do a little modification to my CSS. Currently it looks like this:

Image


I want the labels and their respective fields to appear side by side. How do I get that?

My CSS:

Code: Select all

/* form elements */
form {
	margin: 15px;
	padding: 0;
	background: #000;
   border: 3px solid #151515;
}
label {
	display:block;
	font-weight:bold;
	margin:5px 0;
	color: #FFFFFF;
}
table {
	padding: 10px;
	width: 100%;
}
input {
	padding: 2px;
	border: 1px solid #CCC;
	font: normal 1em Verdana, sans-serif;
	color:#000;
	background: #CCC;
	font-weight: bold;
}
textarea {
	width: 250px;
	padding:2px;
	border: 1px solid #CCC;
	font: normal 1em Verdana, sans-serif;
	height:100px;
	display:block;
	color:#000;
	background: #CCC;
}
input.button { 
	margin: 0; 
	font: bold 1em Tahoma, Sans-serif; 
	border: 1px solid #CCC;
	padding: 2px 3px; 
	color: #000;
	background: #CCC;	
}
miro_igov
Forum Contributor
Posts: 485
Joined: Fri Mar 31, 2006 5:06 am
Location: Bulgaria

Post by miro_igov »

I think you need to change the HTML, not the CSS.

Code: Select all

<label>Label<input type="text" name="field" /></label>
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Post by califdon »

Code: Select all

label {
        display:inline;
        font-weight:bold;
        margin:5px 0;
        color: #FFFFFF;
}
display:block means that the element will begin a new line and the following element will be on a new line, unless modified by a float parameter.
User avatar
legend986
Forum Contributor
Posts: 258
Joined: Sun Jul 15, 2007 2:45 pm

Post by legend986 »

Thank you for your replies...

Actually I've tried that inline thing, but then I'm ending up with something like the following:


Image

I want all the text fields to align in a single line... so i couldn't do it...
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Float the input to the left and give it a width.

Code: Select all

label {
 float:left;
 display:block;
 width:12em; // ems or px
 text-align:right; // optional
 padding-right:1em; // optional
}
input {
}

Code: Select all

<form >
<p><label for="name">Name</label><input type="text" name="name" /></p>
</form>
Post Reply