I have created a simple form with two fields, Username and password and a Log in buttion which use CSS.
I am trying to centre the form and its labels. current it centres the field boxes but not the labels, it looks like this: http://jsfiddle.net/zkzh66n0/
I think its something to do with the other CSS styles because when I tried the style on its own in fiddle it worked: http://jsfiddle.net/zkzh66n0/1/
HTML:
<div id ="form">
<form action = "entryformlogon.php" method="post">
<label for = "user">Username</label>
<input type ="text" name ="Username"><br>
<label for ="password">Password</label>
<input type ="password" name = "Password"><br>
<input type = "submit" name ="loginbutton" value ="Log in">
</form>
</div>
CSS:
label{
float: left;
width: 120px;
}
input, textarea{
width: 180px;
margin-bottom: 5px;
}
#loginbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}
#form {
text-align: center;
position: relative;
top: 100px;
}
Replace float: left with display: inline-block, then the width and margin work. Also, if you want to refer to the loginbutton via #loginbutton, you have to set its id attribute in addition to the name, because that is what this selector refers to.
fiddle
The relevant CSS:
label{
display: inline-block;
width: 120px;
text-align: left;
}
#loginbutton{
display: inline-block;
margin-left: 28px;
margin-top: 5px;
width: 90px;
}
I also changed the buttons CSS to include display: inline-block so the margin can be set so it lines up with the inputs.
try this
http://jsfiddle.net/zkzh66n0/2/
remove float: left; from label.
if you need space in labels and input box try to give padding like below fiddle
http://jsfiddle.net/zkzh66n0/3/
Related
I'm making a search bar with a submit button. Whenever I link the input box via a class to my css document, it misaligns the box and button.
Here's what I mean:
What I Have
When I remove the class, it re-aligns the box and button but removes my formatting.
This is what I need, but with formatting:
What I need
This is my HTML:
<div class="search">
<input type="text" placeholder="Search.." name="search" class="search">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
This is my CSS:
.search {
padding: 7.5px;
font-size: 15px;
border-radius: 4px;
border: none;
margin-top: 7px;
margin-right: 200px;
float: right;
}
It should align the search box to the right of the border as well, like this:
Formatting
How do I fix this?
Apologies if I've not explained it very well, so let me know if you need clarification.
Thanks!
you should put a id in the button and then recadre it in the css.
Use flexbox:
.search {
display: flex;
padding: 7.5px;
font-size: 15px;
border-radius: 4px;
border: none;
margin-top: 7px;
margin-right: 200px;
float: right;
justify-content: space-between;
}
.fa-search {
width: 40px; //or fit-content or some other sizes
}
for direction of your elements you can do many things but you should read this link about flexbox and its details.
Or this.
I'm trying to align a textbox inside a <div> - using the class .textbox
CSS Code
.sec1 {
padding-left: 20px;
padding-right: 20px;
display: relative;
}
.textbox {
display: absolute;
top: 10px;
background-color: white;
border-radius: 10px;
}
.subcars {
display: inline-flex;
}
.selectcar {
width: 80%;
}
HTML Code
<div class="subcars">
<div class="sec1">
<button class="bot"><img class="selectcar" src="Images/caradd2.png" alt="selectcar"></button>
<br><input name="cars1" class="textbox"></input>
</div>
</div>
The results so far is (I'm using pesticide to clarify the elements):
As it is possible to see, the text box is not centered inside the <div>, how can I fix it?
As #m4n0 mentioned in the comments, relative and absolute are not invalid values for display attribute. So, you don't need them in your code.
And to center the textbox, you can add margin-left property with a value accordingly under .textbox css.
I want to put a checkbox with a label to its right in my simple webpage, but when I select the label and checkbox to change their display, they both behave differently.
When checkbox is set to inline, it moves up to the right of textarea who's display is set to block. So I figured I can just set checkbox display to block and label display to inline and the label will move to the right of block. Instead, the label stays below the checkbox and eliminates any margin between it and the send button.
How can I fix this?
The code is in JS Bin
The form is a child of .main-body
HTML
<form>
<label for="name-input">Name</label>
<input type="text" id="name-input">
<label for="message-input">Message</label>
<textarea id="message-input"></textarea>
<input type="checkbox" id="current-user">
<label for="current-user">I currently use SuiteLyfe</label>
<input type="submit" value="Send">
</form>
CSS
.main-body {
display: box;
width: 600px;
margin: 0 auto 0 auto;
}
textarea[id=message-input] {
display: box;
box-sizing: border-box;
width: 400px;
height: 200px;
margin-bottom: 15px;
font-size: 14px;
}
input[type=checkbox] {
display: block;
}
label[for=current-user] {
display: inline;
}
P.S. I'm aware of bootstrap and other technologies but right now I am learning barebones html and css and wish to understand it even though I realize it may not matter in my career.
Change your textarea display type to block and your checkbox display type to inline
textarea[id=message-input] {
display: block;
box-sizing: border-box;
width: 400px;
height: 200px;
margin-bottom: 15px;
font-size: 14px;
}
input[type=checkbox] {
display: inline;
}
I am wanting to make a form where all the fields, and the input buttons are perfectly horizontally aligned. I tried setting margin: 0 auto on all the items (after resetting the css) but it seems like the length of the text fields make it so the items do not look horizontally center (the input button takes up much less space). Is there an easy way to offset this difference in widths without using absolute positioning (I want this to be responsive).
Here is the html:
<h1>
Please upload your file
</h1>
<form action="/upload" enctype="multipart/form-data" method="post">
<input type="file" name="upload" multiple="multiple" ><br>
<input type="submit" value="Upload">
</form>
And the css:
h1, form {
display: block;
text-align: center;
color: red;
margin-top: 1.2em;
}
h1 {
font-size: 2em;
margin-top: 2em;
margin-bottom: 1em;
}
p {
margin-top: .2em;
margin-bottom: 1em;
}
input {
display: block;
margin:0 auto;
}
input[type=submit] {
font-size: 2em;
}
And here is the issue I am mentioning. (I would like the choose files button centered)
Just add a border to your input fields to make it clear that it's centre aligned:
JSFiddle
input {
display: block;
margin:0 auto;
border: 1px solid #cfcfcf;
}
You can try setting input to a relative position and reposition from there:
input {
display: block;
margin: 0 auto;
position: relative;
left: 25px;
}
I'm styling a form designed by a client with the following structure:
<div class="formRow">
<div class="fieldName">
Email
</div>
<div class="fieldInput">
<input .../>
</div>
</div>
The width of the form is 500px, but the fieldName div and the fieldInput div stack on top of each other instead of sitting side-by-side. This is because (at least in Chrome and Firefox), the fieldName div is getting a computed right-margin of 340px, taking up the entire width of the form.
I can't seem to override this behavior, either. Entering a margin-right of 10px does nothing. And setting the width of the div either to a hard number or a percentage only changes the inside width, not the strange right-margin.
What CSS headache am I running up against, here?
BTW, here's the CSS:
.formRow{
padding: 3px 0 3px 0;
position: relative;
height: auto;
width: 100%;
}
.fieldName{
font-size: 12px;
margin-left: 10px;
margin-right: 10px;
width: 100px;
}
.fieldInput{
width: 200px;
}
One thing to take note of in your example code is that you are over-using DIVs. The same code could be written like this:
<div class="formRow">
<label class="fieldName">Email</label>
<input class="fieldInput" .../>
</div>
Or, even better:
<style type="text/css">
UL, UL LI
{
margin: 0px;
padding: 0px;
}
UL LI
{
list-style: none;
}
.fieldName{
font-size: 12px;
margin-left: 10px;
margin-right: 10px;
width: 100px;
}
.fieldInput{
width: 200px;
}
</style>
<ul>
<li><label class="fieldName">Email</label>
<input class="fieldInput" .../></li>
...
</ul>
By using DIV tags for both sections you are violating the semantic meaning of the tag, which is "this section of the page is distinct from this other section." What you really are trying to do is just style your Form label differently from your Input and we already have tags to describe those.
try adding
.fieldName {display: inline}
or
.fieldInput {display: inline}
or both
If you add a display: inline; to each element, that will allow them to sit side-by-side. Because they're rendered as block elements by default, the browser puts them on their own lines.
.fieldName{
font-size: 12px;
margin-left: 10px;
margin-right: 10px;
width: 100px;
display: inline;
}
.fieldInput{
width: 200px;
display: inline;
}