I was practising some code and then this happened, The input text tag won't center. Margin: 0 auto; also doesn't seem to work either.
Here's the code I was working on.
HTML:
<input type="text" placeholder="Email">
CSS:
input {
outline: none;
border-radius: 5px;
border-style: none;
height: 45px;
width: 218px;
padding:0 16px;
font-family: Helvetica Neue;
font-size: 18px;
background-color: rgb(250,250,250);
margin:0 auto;
}
Can anyone help me out with this? and also a possible explanation?
input {
display:block;
margin:0 auto;
}
try using display:block in input element
snippet
div{
width:500px;
height:500px;
border:solid;
}
input {
display:block;
outline: none;
border-radius: 5px;
border-style: none;
height: 45px;
width: 218px;
padding:0 16px;
font-family: Helvetica Neue;
font-size: 18px;
background-color: rgb(250,250,250);
margin:0 auto;
border:solid;
}
<div>
<input type="text" placeholder="Email">
</div>
use this code:
input {
text-align:center;
}
click here for demo
<html>
<head>
<title>Page Title</title>
<style>
input {
outline: none;
border-radius: 5px;
border-style: none;
height: 45px;
width: 218px;
padding:0 16px;
font-family: Helvetica Neue;
font-size: 18px;
background-color: rgb(250,250,250);
position:absolute;
left:300px;
}
</style>
</head>
<body>
<input type="text" placeholder="Email">
</body>
</html>
*just increase the left px where you want it.
Related
The title says it all. I have tried to wrap the whole html-body, but that didn't work. When I minimize my browser or drag the corners all the elements on my page moves. Suggestions? I'll add my code here, maybe someone can find the error. The page is not done btw!
h1 {
font-family: Arial, Helvetica, sans-serif;
}
/* KATEGORIER*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;
}
li a {
float:left;
display: block;
color: black;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
padding: 16px;
text-decoration: none;
cursor:pointer;
}
li a:hover{
background-color: none;
color: #0095cc;
}
/* SØKEBAR*/
#searchbar {
position: relative;
top: 30%;
right: 1000px;
}
/*LOGIN*/
form {
float:right;
width:35%;
position:absolute;
top:20px;
right:10px;
font-family: Arial, Helvetica, sans-serif;
}
.tftextinput{
}
/*BOKSER*/
.boxed{
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid black 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.boxed{
position: relative;
bottom:-70px;
right:530px;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Startside</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Filmregister</h1>
<!-- KATEGORIER -->
<ul>
<li>Startside</li>
<li>Min Liste</li>
<li>Mine lån</li>
</ul>
<!-- SØKEBAR -->
<div id="searchbar">
<form id="tfnewsearch" method="get" action="">
<input type="text" class="tftextinput" name="q" size="21" maxlength="120"><input type="submit" value="søk" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
<!-- LOGIN -->
<form>
<label for="E-postadresse">E-postadresse</label>
<input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" />
<label for="Passord">Passord</label>
<input type="password" placeholder="Passord" id="Passord" />
<input type="submit" value="Logg inn" />
</form>
<!--BOKSER-->
<div class="boxed">
Dette er en test
</div>
</body>
</html>
There are many things wrong with the positioning. I would suggest to use some kind of grid framework for beginning, and look through that code and see how it is done (for example bootstrap). It makes making layout much easier.
http://www.w3schools.com/bootstrap/ go through that tutorial and you will learn a lot about positioning and page layouts.
I could not leave you hanging :D I left the colours so you see what is going on. You can remove them afterwards. And this moving of the code inside the page on stackoverflow to display right is so annoying honestly. Probably there is a solution I do not know about as a new member. Btw the min-width:900px; on class header is to prevent the log in form from overlapping on top of Filmregister. Tested on Mozilla version I fave no clue :D What I am saying is it will most likely act different on different browsers.
<!DOCTYPE html>
<html>
<head>
<title>Startside</title>
<meta charset="utf-8" />
<style>
h1 {
font-family: Arial, Helvetica, sans-serif;
}
/* KATEGORIER*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;
}
li a {
float:left;
display: block;
color: black;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
padding: 16px;
text-decoration: none;
cursor:pointer;
}
li a:hover{
background-color: none;
color: #0095cc;
}
/* SØKEBAR*/
#searchbar {
position: absolute;
left: 30px;
top: 200px;
}
/*LOGIN*/
form {
float:right;
width:35%;
position:absolute;
top:20px;
right:10px;
font-family: Arial, Helvetica, sans-serif;
}
.tftextinput{
}
/*BOKSER*/
.boxed{
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid black 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.boxed{
position: absolute;
top: 300px;
left:20px;
background-color: white;
}
.header
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
min-width:900px;
background-color: red;
display: inline-block;
}
.menu
{
position: absolute;
top: 100px;
left: 0px;
width: 100%;
background-color: yellow;
display: inline-block;
}
.login
{
position: absolute;
top: 10px;
right: 0px;
width: 650px;
background-color: yellow;
display: inline-block;
}
</style>
</head>
<body>
<!-- KATEGORIER -->
<span class='menu'>
<ul>
<li>Startside</li>
<li>Min Liste</li>
<li>Mine lån</li>
</ul>
</span>
<!-- SØKEBAR -->
<div id="searchbar">
<pre><form id="tfnewsearch" method="get" action=""><input type="text" class="tftextinput" name="q" size="21" maxlength="120"><input type="submit" value="søk" class="tfbutton"></form></pre>
<div class="tfclear"></div>
</div>
<!-- LOGIN -->
<span class='header'>
<h1>Filmregister</h1>
<form>
<span class='login'>
<label for="E-postadresse">E-postadresse</label>
<input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" />
<label for="Passord">Passord</label>
<input type="password" placeholder="Passord" id="Passord" />
<input type="submit" value="Logg inn" />
</span>
</form>
</span>
<!--BOKSER-->
<div class="boxed">
Dette er en test
</div>
</body>
</html>
i'm creating a form and I want to put an icon into the input text, but when it comes to preview the text is put over the icon and I don't know how to fix it
the html looks like this
<div id="name"> <input type="text" name="username" placeholder="Nombre"> </div>
and the css as well
#name{
float:left;
}
#name input {
font:'Montserrat', sans-serif;
font-weight:700;
font-size:24px;
border-radius: 2.5px;
border: 5px solid #000;
background-color:transparent;
color:#56828B;
width:300px;
height:30px;
background-image:url(../imgs/nameicon.png);
background-repeat:no-repeat;
}
::-webkit-input-placeholder {
color:#56828B;
padding-left:5px;
}
thanks
You actually do not need an image for that. Try the method below and the problem will never occur again:
#name {
font:'Montserrat', sans-serif;
font-weight:700;
font-size:24px;
border-radius: 2.5px;
border: 5px solid #999;
color:#56828B;
width:240px;
height:30px;
background-repeat:no-repeat;
position: relative;
padding-left: 50px; /* makes space for the icon */
}
#name:after {
content: '\f095';
font-family: fontAwesome;
position: absolute;
left: 8px;
top: 5px;
font-size: 20px;
color: #999
}
input:focus, input:active {
outline: 00;
}
#name input {
border: none!important;
width: 100%;
background-color:transparent;
color:#56828B;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="name"> <input type="text" name="username" placeholder="Nombre"> </div>
Note: This is just an example, adjust to suit your needs.
See this tutorial here
What I would like is to have a column of labels, and to the right a column of text boxes approximately a few tabs apart and all aligned on (their respective) margins.
So far I have this. However when I resize the screen my text boxes move. How can I make them fixed?
This is the CSS:
#layout {
background-color: #f5fffa;
width: 600px;
padding: 20px;
border: 5px solid black;
margin: 0 auto;
color: black;
font-family: arial;
font-size: 15px;
font-weight: bold;
}
#zero {
text-align: center;
}
#one {
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:4px solid #18ab29;
border-width: 4px;
background-color: #44c767;
color:#ffffff;
padding-left: 9em;
padding-right: 9em;
}
.myform {
width:40px;
text-align: left;
position: absolute;
right: 800px;
height: 1.5em;
}
This is the HTML:
<div id="layout">
<h1 id="zero">Title</h1>
<form id="one">
<br>
<label>input one:</label>
<input type="text" class="myform" value="0" /><br><br>
<label>input two:</label>
<input type="text" class="myform" value="0" /></br>
</br>
</form>
</div>
EDIT:
I've figured it out:
Add this:
#one label {
display: inline-block;
width: 270px;
}
And take away:
position: absolute;
right: 800px;
from
.myform {
width:40px;
text-align: left;
position: absolute;
right: 800px;
height: 1.5em;
}
try to give the label a width:
label {
width: 100px;
}
#layout {
background-color: #f5fffa;
width: 600px;
padding: 20px;
border: 5px solid black;
margin: 0 auto;
color: black;
font-family: arial;
font-size: 15px;
font-weight: bold;
}
#zero {
text-align: center;
}
#one {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
border: 4px solid #18ab29;
border-width: 4px;
background-color: #44c767;
color: #ffffff;
height: 1.5em;
}
.myform {
text-align: left;
position: absolute;
right: 800px;
}
.leftCol {
float: left;
width: 50%
}
.rightCol {
float: right;
width: 50%
}
<div id="layout">
<h1 id="zero">Title</h1>
<form id="one">
<div class="leftCol">
<label>input one:</label>
<input type="text" value="0" />
</div>
<div class="rightCol">
<label>input two:</label>
<input type="text" value="0" />
</div>
</form>
</div>
I removed the position:absolute from the inputs (because in my screen they where way of, that's why you should use it if nothing else works) and then added a margin-right on the form labels. demo;
Relevant CSS
#one label{
margin-right:10px;
}
Update
I've added a fixed width to ammend for the possibility of labels with differente text lengths, here it is:
#one label{
display:inline-block;
margin-right:10px;
width:150px;
}
You should change width:150px to whatever you want it to be :)
Hope it helps!
I am trying to make facebook style comment post area but css is not working. What I'm trying to do. When increased the height of the textarea i want to submit button move down at the same time. When you write a few lines in the textarea, you'll see the submit button does not go move down at the same time.
HTML
<div class="stcommenttext">
<form method="post" action="">
<div class="comtextarea">
<div class="yorumyazalani">
<textarea name="comment" class="comment" maxlength="200" id="" rows="2" cols="50" value="Add your comment here...."></textarea>
</div>
<div class="comgonder">
<input type="submit" value="" id="" rel="" class="comment_button wallbutton" />
</div>
</div>
</form>
</div>
CSS
.comment {
border:1px solid #fff;
width:425px;
margin-left:3px;
margin-top:3px;
font-family:'lucida grande', tahoma, verdana, arial, sans-serif;
font-size:12px;
resize:none;
background-color:#f4f4f4;
}
.comtextarea {
float:left;
width:494px;
margin-left:3px;
height:auto;
border:1px solid #d8dbdf;
background-color:#fff;
}
.comtextarea textarea {
min-height:30px;
}
.yorumyazalani {
float:left;
width:auto;
height:auto;
}
.comgonder {
float:right;
width:auto;
height:auto;
bottom:0px;
margin-left:-5px;
}
.wallbutton {
float:left;
background-color: #fff;
min-width: 32px;
padding: 4px;
text-align: center;
background-position: left bottom;
background-repeat: repeat-x;
border: 1px solid #fff;
color: white !important;
cursor: pointer;
font-size: 12px;
font-weight: bold;
margin-top: 7px;
padding: 5px;
margin-left:5px;
text-decoration:none;
background-image:url(https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10291103_828742610487379_816788942451910142_n.jpg);
background-repeat:no-repeat;
background-position:left;
outline:none;
}
Here is the DEMO
You can fix this in a couple of simple steps:
Set position: relative; on .comtextarea. Now each child can relate to it's container.
Set position: absolute; on .comgonder. Now you can position this element in relation to .comtextarea.
Set bottom: 5px; and right: 5px; on .comgondor. It now follows the right corner of .comtextarea.
Codepen Fork
Try this CSS for the button:
.comgonder {
width: auto;
height: auto;
margin-bottom: 8px;
vertical-align: bottom;
display: inline-block;
}
And this for the textarea:
.yorumyazalani {
width: auto;
height: auto;
vertical-align: top;
display: inline-block;
}
This will make your 2 form elements inline (instead of floating them) and allow the button to be aligned based on the bottom of the textarea, instead of the top.
Updated Demo: http://codepen.io/anon/pen/CdxDI
.comtextarea
{
position: relative;
}
.comgonder
{
position: absolute;
right: 0px;
bottom: 0px;
}
You can change the right/bottom offsets for better spacing/alignment if you like
I am trying to make this form:
And this is what I get:
(I changed the button color, I know =) )
Here is my HTML:
<form method="post" action="">
<input type="text" id="email" name="email" value="Email" />
<input type="submit" value="Keep me notified" id="submitButton"
</form>
Here is my CSS:
form{
width:350px;
margin: 20px auto;
display:block;
}
input[type=text]{
display:inline-block;
font-family: 'PT Serif Caption', serif;
border:1px solid #CCCBC2;
display:inline;
font-size:14px;
width:300px;
line-height: 16px;
padding: 9px 10px;
height: 18px;
margin:0;
margin-bottom: 5px;
outline: 0;
vertical-align: middle;
width: 269px;
float:left;
-webkit-font-smoothing: antialiased;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
-ms-border-radius:3px;
border-radius:3px;
}
input[type=submit] {
display: inline-block;
background:none;
padding:0 14px;
height: 36px;
margin: 1px 0 0 15px;
text-align: center;
font-size: 15px;
overflow: visible;
color: white;
background-color: #2459a9;
border:none;
font-family: 'PT Serif Caption', serif;
text-transform: lowercase;
text-decoration: none;
cursor: pointer;
-webkit-font-smoothing: antialiased;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
-ms-border-radius:3px;
border-radius:3px;
}
My Q:
How do I get the floats right? Or is it something else?
Can you do it in html5? Cool, show me =)
How do a implement a placeholder in the inputbox
How do I get big letter in the button?
Two things:
The form is too narrow for the total width of the inputs. So for the fiddle you provided, it should be 464px.
Use white-space: nowrap; on the form.
See it at jsFiddle.
Demo
Your form rule makes the form too small, causing the button to wrap on a new line. Try this rule instead:
form {
width: 440px;
margin: 20px auto;
display: block;
}
EDIT:
This should work:
form {
width: 440px;
margin: 20px auto;
display: inline;
}
Demo