Page 1 of 1

Need to change some CSS

Posted: Sat Aug 25, 2007 8:45 am
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;	
}

Posted: Sat Aug 25, 2007 10:54 am
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>

Posted: Sat Aug 25, 2007 12:19 pm
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.

Posted: Sat Aug 25, 2007 12:34 pm
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...

Posted: Sun Aug 26, 2007 1:45 am
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>