For some reason I cant get CSS to work with my form? I have tried just about everything and I cant seem to find the issue? What am I doing wrong?
My HTML Structure
<div class="login-container">
<form>
<fieldset>
<label for="email">Email:</label>
<input type="text" name="email" class="input" id="email" />
<br /><br />
<label for="pword">Password:</label>
<input type="text" name="pword" id="pword" />
</fieldset>
</form>
</div>
My CSS Structure
.login-container fieldset {
padding: 1em;
}
.login-container label {
float:left;
width:25%;
margin-right:0.5em;
padding-top:0.2em;
text-align:right;
font-weight:bold;
}
.input {
background-color:#F00;
}
Remove the . in front of your input selector.
input {
background-color:#F00;
}
See also: CSS element selector vs. CSS .class selector
Seems to work just fine, please see jsfiddle.net/4FCgc/
What is not working? Maybe it is your web browser's cache... But I doubt that.
Related
I am trying to render a html form like this: http://i.imgur.com/V53sv8F.jpg
The problem I am facing are:
I am not able to make the fields go in next line after the label
I haven't been able to get the firld length of first and last combined to be as long as that of the email (or password)
Any help is much appreciated.
HTML Code:
<form>
<label for="Name"><strong> Your Name:</strong></label>
<input type="text" id="Name_First" name="Name_First" required>
<input type="text" id="Name_Last" name="Name_Last" required>
<label for="Email">Email Address:<input type="email" id="Email" name="Email" vrequired></label>
<label for="RegPassword">Password:<input type="password" id="RegPasswordRegPassword" name="RegPassword" required></label>
<form>
JS Fiddle link: http://jsfiddle.net/d6a4h9o8/
For starters, your HTML is wrong, so no solution will work if you don't fix it first. So let's start with that:
<form>
<div class="row">
<label for="Name"><strong> Your Name:</strong></label>
<input type="text" id="Name_First" name="Name_First" />
<input type="text" id="Name_Last" name="Name_Last" />
</div>
<div class="row">
<label for="Email">Email Address:</label><input type="email" id="Email" name="Email" />
</div>
<div class="row">
<label for="RegPassword">Password:</label><input type="password" id="RegPasswordRegPassword" name="RegPassword" />
</div>
<form>
Now that we have proper markup and have added some divs to aid with styling (pay attention to those class="row" divs) we can apply CSS this way:
form {
background:#ccc;
padding:30px;
margin:0 auto;
width:50%
}
form label {
display: block;
}
input {
width:300px;
}
.row {
width:300px;
clear:both;
display:block;
position:relative;
margin:5px auto
}
.row:first-child input {
width:142px;
}
.row:first-child input:last-child {
position:absolute;
right:-5px;
width:144px
}
See fiddle to see the result
Now, there are MANY ways to do it, this is just one, but the most important part is to have your markup fixed, then styling it is really easy.
Here is working example similar to the picture.
HTML
<form>
<label for="Name"><strong> Your Name:</strong></label>
<input type="text" id="Name_First" name="Name_First" required>
<input type="text" id="Name_Last" name="Name_Last" required>
<label for="Email">Email Address:</label>
<input type="email" id="Email" name="Email" vrequired>
<label for="RegPassword">Password:</label><input type="password" id="RegPassword" name="RegPassword" required>
<form>
CSS.
form{
max-width: 500px;
background: #d4d4d4;
padding: 20px;
}
form label {display: block;}
input{padding: 7px 0;font-size: 25px;}
input[type="text"]{width:48.2%;}
input[type="email"],input[type="password"]{width: 98%;}
}
Try this:
label {
display: block;
clear: both;
}
You'll still have to do additional styling, of course.
use
#Name_First {
...
}
to target specific element with your css styles.
and try read through http://www.htmldog.com/guides/css/beginner/applyingcss/
what you want to focus on should be "display" and "width"
Ive been working on trying to get a simple "login" form to be displayed vertically and position it as well. It seems that I can do one or the other, never both. Ive tried different ways of doing this neither worked out, so this is basically what I had last.
HTML
<form class = "login">
E-Mail: <input type="text" name="id" maxlength="30" value="" />
Password: <input type="text" name="pw" maxlength="30" value="" />
<input type="submit" name="submit" value="Login" />
</form>
CSS
login {
position:absolute;
top:10px;
left:185px;
}
login.input {
display: inline;
}
Right now your CSS is targeting a <login> element in the DOM and a <login> element with a class of input. I believe what you are trying to do is target the class of login and element's inside the form with a class of login. Try modifying your CSS like so:
.login {
position:absolute;
top:10px;
left:185px;
}
.login input {
display: inline;
}
JSFiddle
This code
HTML
<input type="text" name="category" id="category" value=""> <input type="text" name="category_1" id="category_1" value="" tabindex="1"></div>
Though with repeated efforts starting from adding tabindex, nbsp to css cannot have these two inputs appear on single line.
CSS
<style type="text/css">
input.category {
vertical-align:top;
}
</style>
UPDATE
I think there is a plugin css which is over-ridding this behaviour. I have applied all what you guys said nothing works here is the css. I'm using plugin mcdropdown. Here is the code at start is just the copy of style followed with is is the css copy paste of mcdropdown.css file.
Please let me know how this can be done.
add class="category" for input fields and css:
.category {
float: left;
display: block;
}
#category_1 {
margin-left: 20px; /* or space you want..*/
}
and remove those spaces ( ) not really good way to code :)
Benefit of changing element display to block is that you can set vertical margins and paddings to it when needed.
Example usage with labels could be:
html:
<div class="col1">
<label for="field1">Field1 title</label>
<input type="text" name="field1" id="field1" />
</div>
<div class="col2">
<label for="field2">Field2 title</label>
<input type="text" name="field2" id="field2" />
</div>
<div class="clearfix"></div>
CSS:
.col1 {
float: left;
width: 200px;
}
.col2 {
float: left;
width: 200px;
}
.clearfix:after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
To get them to display on a single line use the css display attribute to change their display to inline here is how I do it:
<html>
<head>
<style>
#category, #category_1{
display: inline;
}
</style>
</head>
<body>
<input type="text" name="category" id="category" value="">
<input type="text" name="category_1" id="category_1" value="" tabindex="1">
</body>
That should solve your problem and it's really simple to! Have a great day!
They are both inline elements and should appear on the same line by default. Close your input tags appropriately (<input... />) and remove the closing </div> tag:
change
<input type="text" name="category" id="category" value=""> <input type="text" name="category_1" id="category_1" value="" tabindex="1"></div>
to
<input type="text" name="category" id="category" value="" /> <input type="text" name="category_1" id="category_1" value="" tabindex="1" />
You can do that by removing float, and add display:inline-block.
Here: http://jsfiddle.net/xW3tt/2/
Can you try this, By default your elements aligned and dispalyed in single line. If you want to apply any css styling or css properties then you may use as like in below. Added class in input elements class="category"
CSS:
<style type="text/css">
input.category {
float:left;
width:100px;
}
</style>
HTML:
<div style='width:500px;'>
<input type="text" name="category" id="category" value="" class="category">
<input type="text" name="category_1" id="category_1" value="" class="category" tabindex="1">
</div>
This answer is a wild guess operation, Try
Try applying below CSS to over-ride:
input.category {
float:left !important;
margin: 0 !important;
padding:0 !important;
clear:none !important;
}
and apply .category class to both your input (*SEE FIDDLE)
FIDDLE DEMO
I am trying to align to input text boxes of a form side by side but i not able to do so. Please help.
Fiddle: here
HTML:
<p>Your Name
<br>
<span class="wpcf7-form-control-wrap your-name">
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true"
</span>
</p>
<p>Your Email
<br>
<span class="wpcf7-form-control-wrap your-email">
<input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7- validates-as-email" aria-required="true">
</span>
</p>
CSS:
.wpcf7 input[type="text"], .wpcf7 input[type="email"] {
background-color: #fff;
color: #000;
width: 50%;
}
http://jsfiddle.net/rHh3w/12/show
Just need to set your p element to "display:inline;" by default they are block elements and will not align next to each other.
also deleted two br tags
p {display:inline;}
How about display them like a table.
.myForm {
width:100%;
display:table;
}
.myForm div {
margin:0;
padding:0;
display:table-cell;
}
.myForm div:last-of-type{
text-align:right;
}
.myForm div:last-of-type Align text to the right side.
Check it on http://jsfiddle.net/463QF/
Remove <br /> from your HTML markup.
Write:
p{
display:inline-block;
width:50%;
}
.wpcf7-form-control-wrap input[type="text"],.wpcf7-form-control-wrap input[type="email"] {
background-color: #fff;
color: #000;
width: 50%;
}
Note:
inline-block leaves white space between elements. Write elements on same line to avoid it.
Like write
</p><p>
(on same line)
rather than
</p>
<p>
(on different lines)
Fiddle.
Try this
What I have done is added the following:
p {
float: left;
}
That's all you need to do, it also means that if your container width goes below the fixed width of the two input boxes together, they will float down over two lines rather than breaking and spilling out of their container.
While you're at it, it might be worth changing the text labels to actual labels, this will allow the user to click on the label and still highlight the form, which is growing increasingly important due to the rise in mobile use.
Also, you missed a closing > of your first input box.
Try below CSS for p tag
p
{
width:auto;
float:left;
margin-right:10px;
}
If you need some space between text box then u can set margin-right to the same.
Just add this to your CSS code : p{width:40%;border:1px solid #000;float:left}
Fiddle :http://jsfiddle.net/logintomyk/PSQ7u/
HTML example:
<div class="myForm">
<div>
<label for="name">Your name</label>
<input name="name" id="name" type="text" />
</div>
<div>
<label for="email">your email</label>
<input name="email" id="email" type="text" />
</div>
</div>
CSS:
.myForm div {
width: 47%;
margin:0;
padding:0;
float:left;
}
.myForm div label
{
display:block;
}
fiddle
I have an example here: http://jsfiddle.net/3zSbt/
I don't know how I'd even up my input boxes with eachother...
Any help would be greatly appreciated.
HTML
<div id="contactContent">
<form>
Email: <input type="text" name="firstName">
<br>
Subject: <input type="text" name="lastName">
</form>
</div>
CSS
#contactContent { margin-top: 50px; margin-left: 300px;}
input { border: none; margin-left: 50px; margin-bottom: 30px; padding-right: 50px;}
There are many ways. One way is putting your value names in label. Example:
HTML
<label>Email:</label><input type="text" name="firstName" />
<br />
<label>Subject:</label><input type="text" name="lastName" />
CSS
label{
display:inline-block;
width:100px;
}
JSFiddle.
If you wanted to use HTML you could try putting it in a table, or if you just want to use CSS have you tried this;
input {
display:inline-block;
float:left;
}