JavaScript and client side scripting.
Moderator: General Moderators
-
legend986
- Forum Contributor
- Posts: 258
- Joined: Sun Jul 15, 2007 2:45 pm
Post
by legend986 »
I would like to do a little modification to my CSS. Currently it looks like this:
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>
-
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.
-
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:
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>