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
Related
Hello I am having issues centering a form for a login page. I am not to good with CSS and it has been a while since I have played with HTML. What I want to do is, center the input boxes and align the text left on top of the input fields, as well as have an image centered as well, like in the picture. I have tried adding different div id and tags to the form but I can not seem to figure out the css part. I appreciate any help and sorry if the CSS is sloppy.
body {
background-color:lightgray;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
h1 {
color: black;
}
p {
color: black;
}
html {
text-alight: center;
}
#login {
text-align:center;
}
input[type=text], input[type=date], input[type=password] {
width: 30%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 30%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
#service_type, #series, #speaker, #users {
width: 30%;
height: 50px;
}
#media only screen and (max-device-width: 1024px){
input[type=text], input[type=date], input[type=password] {
width: 100%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
#service_type, #series, #speaker, #users{
width: 100%;
height: 50px;
}
#keypad_users{
width: 345px;
height: 50px;
vertical-align:middle;
text-align:center;
border:1px solid #000000;
font-size:30px;
font-weight:bold;
}
#keypad {margin:auto; margin-top:10px;}
#keypad tr td {
vertical-align:middle;
text-align:center;
border:1px solid #000000;
font-size:18px;
font-weight:bold;
width:100px;
height:80px;
cursor:pointer;
background-color:#666666;
color:#CCCCCC;
}
#keypad tr td:hover {
background-color:#999999;
color:#FFFF00;
}
#display {
text-align:center;
width:345px;
margin:10px auto auto auto;
background-color:#000000;
color:#00FF00;
font-size:48px;
border:1px solid #999999;
}
#message {
text-align:center;
color:#009900;
font-size:18px;
font-weight:bold;
display:none;
}
}
<div id="login">
<form action = "login.php" id="login" method ="POST">
Username <br />
<input type="text" name="username" id="username" required /><br /><br />
Password <br />
<input type ="password" name="password" id="password" required /><br /><br />
<input type="submit" name="submit" value="Log in">
</form>
</div>
I've made a JSfiddle for you here (click me please) that resembles the picture you've added.
As requested to not use a third party like I've added the code here:
HTML
<div id="login">
<form action = "login.php" id="login" method ="POST">
<div class="picture">
</div>
<p>Username</p>
<input type="text" name="username" id="username" required /><br /><br />
<p>Password</p>
<input type ="password" name="password" id="password" required /><br /><br />
<input type="submit" name="submit" value="Log in">
</form>
</div>
CSS
body
{
background-color:lightgray;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#login
{
text-align:center;
width: 50%;
margin: 0 auto;
}
.picture
{
width:100px;
height: 100px;
border-radius: 100px;
background-color:red;
margin: 0 auto;
}
#login p
{
float: left;
}
input[type=text], input[type=date], input[type=password] {
width: 100%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
EDIT:
New fiddle here: https://jsfiddle.net/gay1ufa1/2/
I've improved your HTML. All form inputs should have an associated label element. Also don't use br for spacing use padding/margin instead.
Further more use have a duplicated id, id's must be unique to the page.
#login_container /*This is Our base container for the login "control" */
{
width:30%; /*Define the width of the control*/
margin:auto; /*This Provide the horizontal centering of the control*/
padding:120px 10px 10px 10px; /*Add some padding, the first number is the top and provides room for the image*/
background-image:url(" http://fillmurray.com/100/100"); /*Add our background image, thanks Bill Murray*/
background-position:center 10px; /*Position our image, first is Horizontal alignment, second is top*/
background-repeat:no-repeat; /*One Bil Murray is more than enough*/
background-color: #F0F0F0; /*Base Background image*/
}
#login_container label
{
display:block; /*Label will now take up a whole line*/
margin-bottom:.25em; /*Give it some room underneath*/
}
#login_container input[type="text"], #login_container input[type="password"], #login_container input[type="submit"]
{
width:100%; /*Form controls now take 100% width of the container*/
margin-bottom:0.5em;
}
<div id="login_container"> <!-- Can't have duplicate ID's -->
<form action = "login.php" id="login" method ="POST">
<label for="username">Username </label>
<input type="text" name="username" id="username" required />
<label for="password">Password</label>
<input type ="password" name="password" id="password" required />
<input type="submit" name="submit" value="Log in">
</form>
</div>
One problem in your code is that you use the ID "login " twice, which must not be done. I put together a codepen, which you can find here:
http://codepen.io/anon/pen/dNWQgp
What I basically did (except adding a div representing the image in your picture): I assigned the following CSS to a wrapper DIV around the whole form and image. It uses flexbox to center the contents. Plus I assigned a width setting (40%) to the form element.
.wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
To center a div set margin-left and margin-right to auto and assign a fixed width to it. In your case, this would be for #login.
so i have this html code for radio buttons which works perfect on chrome but the css for radio buttons on firefox isnt working. What could be the problem?that is the code i have,is there anything im missing?
input[type='radio'] {
border-radius:50%;
outline:none;
}
input[type='radio']:before {
content:'';
display:block;
width:50%;
height:50%;
margin: 25% auto;
border-radius:50%;
}
input[type='radio']:checked:before {
background-color: #0496fd;
}
.bob-bound
{
padding-bottom:0.2px;
padding-right:10px;
margin:auto;
border: solid 0px blue;
height: 110px;
position:relative;
background-color: #f5f5f5;
}
.bob-bound-type-lable{
position: absolute;
margin-top:20px;
margin-left:30px;
border: solid 0px red;
width: 239px;
height: 18px;
font-family: HelveticaNeue-Light, Arial;
font-size: 16px;
color: #000000;
}
.bob-button {
width: 250px;
height: 46px;
vertical-align:right;
background-color: #ffffff ;
border: solid 1px #bfbfbf;
padding-left:5px;
font-family: ArialMT, Arial, sans-serif;
font-size: 15px;
margin-left:12px;
cursor:pointer;
}
.bob-button:hover {
background-color: #f3f8fd;
}
.bob-recommendation-button
{
position:absolute;
right:0px;
width: 292px;
top:49px;
border: solid 0px red;
}
.bob-Inbound{
position:absolute;
top:6px;
margin-left:8px;
width: 112px;
height: 17px;
font-family: ArialMT, Arial, sans-serif;
font-weight:bold;
font-size: 16px;
border: solid 0px red;
}
.bob-Outbound {
position:absolute;
top:6px;
margin-left:12px;
width: 239px;
height: 17px;
font-family: ArialMT, Arial, sans-serif;
font-weight:bold;
font-size: 16px;
border: solid 0px red;
margin-bottom:20px;
}
.bob-bound-type{
position: absolute;
width:437px;
margin-top:56px;
font-size: 14px;
margin-left:27px;
border: solid 0px red;
}
.bob-radio{
background:green;
width: 24px;
height: 24px;
background-color: #ffffff;
border: solid 1px #bbbbbb;
}
.bob-second-radio{
margin-left:120px;
}
<div class="bob-bound">
<div class="bob-bound-type-lable">
Contact Type
</div>
<div class="bob-bound-type">
<input type="radio" name="radiogroup" id="Inbound" class="bob-radio" value="Inbound" checked="checked"/>
<label for="Inbound" class="bob-Inbound">Inbound</label>
<input type="radio" name="radiogroup" id="Outbound" class="bob-radio bob-second-radio" value="Outbound"/>
<label for="Outbound" class="bob-Outbound">Outbound</label>
</div>
</div>
this is the way its supposed to display:
The general consensus is that styling radio buttons in Firefox with CSS is a fool's errand. But there are several workarounds that achieve the same effect. My personal favorite is to hide the actual radio button and instead use images to show if it is checked or unchecked.
There's a nice working example here:
Mozilla Firefox input radio button styling and default settings
Styling input elements (in particular radio buttons and checkboxes) can be unreliable across navigators. You're better off applying the styling to the label or a pseudo element.
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 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