Question:
I'm trying to adapt the comment box from this site
http://www.mentby.com/Group/mono-aspnet-list/input-data-cannot-be-coded-as-a-valid-certificate.html
to my site.
I have successfully copied it, but I want to vertical-align the labels in the center.
It's working, but for some odd reason not for the last one.
Can anybody tell me what I am doing wrong / what I am missing ?
Obviously, it has something to do with textarea.
Here is what I have:
<!DOCTYPE html>
<html>
<head>
<title>Comment</title>
<style type="text/css" media="all">
label
{
cursor: text;
}
#commentForm
{
/*width: 80%;*/
width: 500px;
margin-top: 10px;
padding-bottom: 10px;
background-color: #f6f6f6;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
border-left: 1px solid #e1e1e1;
}
#commentForm div.rowHolder
{
margin-bottom: 5px;
/*float: left;*/
}
.commentFormLabel
{
background: #efefef url(separator.gif) repeat-x top;
padding: 2px 10px 2px 10px;
margin: 0 0 20px 0;
border-bottom: 1px solid #e1e1e1;
font: bold 13pt "sans-serif", arial, verdana;
letter-spacing: -1px;
line-height: 16pt;
color: #000;
}
#commentForm label
{
display: inline-block;
width: 100px;
padding-right: 10px;
text-align: right;
/*float: left;
vertical-align: middle;
*/
font-family: "sans-serif", arial, verdana;
font-size: 9pt;
color: #333;
}
#commentForm input, #commentForm textarea
{
width: 314px;
/*float: left;*/
border: 1px solid #e7e7e7;
padding: 2px;
}
#commentForm .lblVertAlign
{
display: table-cell; vertical-align: middle;
/*background-color: Red;*/
}
</style>
</head>
<body>
<div id="commentForm">
<div class="commentFormLabel">Post a Comment</div>
<div class="formHolder">
<div class="rowHolder">
<div class="lblVertAlign">
<!--
<span style="vertical-algin: middle;">Name</span>
-->
<label for="name">Name</label>
<input id="name" name="name" value="" />
</div>
</div>
<div class="rowHolder">
<div class="lblVertAlign">
<label for="email">Email</label>
<input id="email" name="email" value="" />
</div>
</div>
<div class="rowHolder">
<div class="lblVertAlign">
<label for="website">Website</label>
<input id="website" name="website" value="http://" />
</div>
</div>
<div class="rowHolder" style="padding: 0px; margin: 0px;">
<div class="lblVertAlign">
<label for="comment">Comment</label>
<textarea id="message" name="message"></textarea>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You need to modify the vertical-align of the input elements:
http://jsfiddle.net/7VstA/2/
#commentForm input, #commentForm textarea
{
width: 314px;
/*float: left;*/
border: 1px solid #e7e7e7;
padding: 2px;
vertical-align: middle;
}
Related
Here I made two simple input fields, but when I zoom in and zoom out on the page (Ctrl + Mouse wheel) somehow the input fields change places, input goes down and up, why it is doing this? How to have them at the same place whether I zoom in or out?
body {
width: 870px;
}
#col3 {
width: 400px;
float: left;
/*background-color:#383838;*/
margin: 20px 10px 10px 30px;
}
form {
width: 380px;
margin: auto;
padding: 5px;
border: solid 1px white;
}
fieldset {
margin: auto;
border: solid 1px #E37222;
padding-left: 19px;
padding-top: 15px;
background-color: #EEEEDD;
}
label {
display: block;
width: 70px;
float: left;
margin-left: 10px;
}
span {
margin-left: -16px;
}
legend {
background-color: #E37222;
color: white;
}
input.tt {
outline: 1px solid #909090;
}
.tt {
margin-top: 8px;
}
<div id="col3">
<form>
<fieldset>
<legend>eeeee</legend>
<label for="name">
<span>rrr:</span>
</label>
<input class="tt" type="text" size="34" />
<br />
<label class="tt" for="email">
<span>ttt:</span>
</label>
<input class="tt" type="text" size="34" />
</fieldset>
</form>
</div>
..........................
Remove float:left for <label>
label{
display:block;
width:70px;
margin-left:10px;
}
Try with This
.youclassname{
display:flex;
}
<div class="yourclassname">
<label for="name"><span>rrrrrr rrrrrr:</span></label>
<input class="tt type="text" size="34" />
</div>
Either change your markup a little like that, or use flexbox/grid.
<style>
body{
width:870px;
}
#col3{
width:400px;
float:left;
/*background-color:#383838;*/
margin:20px 10px 10px 30px;
}
form{
width:380px;
margin:auto;
padding:5px;
border:solid 1px white;
}
fieldset{
margin:auto;
border:solid 1px #E37222;
padding-left: 19px;
padding-top: 15px;
background-color: #EEEEDD;
}
label{
display:block;
width: 100%;
}
label div{
padding-right: 5px;
width: 68px;
display: inline-block;
}
legend{
background-color:#E37222;
color:white;
}
input.tt{
outline: 1px solid #909090;
}
.tt{
margin-top:8px;
}
</style>
</head>
<body>
<div id="col3">
<form ">
<fieldset >
<legend>eeeee</legend>
<label for="name"><div>rrr:</div><input class="tt type="text" size="34" /> </label>
<br/>
<label class="tt"for="email"><div>ttt:</div><input class="tt" type="text" size="34" /></label>
</fieldset>
</form>
</div>
</body>
On my MailChimp form I would like to have the form and submit the button inline with one another.
I have been trying several different variations of float and display but none of them have the desired effect.
Here is the original code. Anyone have any suggestions on how to align the form and the button?
#mc_embed_signup .button {
clear: both;
background-color: #aaa;
border: 0 none;
border-radius: 4px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 15px;
font-weight: bold;
height: 32px;
line-height: 32px;
margin: 10px 0px 10px 0;
padding: 0 22px;
text-align: center;
text-decoration: none;
vertical-align: top;
white-space: nowrap;
width: auto;
}
#mc_embed_signup .mc-field-group input {
display: block;
width: 100%;
padding: 8px 0;
text-indent: 2%;
}
#mc_embed_signup input.mce_inline_error {
border-color: #6B0505;
}
#mc_embed_signup input {
border: 1px solid #999;
-webkit-appearance: none;
}
#mc_embed_signup .mc-field-group label {
display: block;
margin-bottom: 3px;
}
<!-- Begin MailChimp Signup Form -->
<style type="text/css">
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<label for="mce-EMAIL">Email Addresse </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="name#domain.de">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div>
<div class="clear text-center"><input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
In newsletter is recommended use "old style" code, with <table> and inline style. If you use table can have the form next to each other and it will be compatible on most devices.
Live example on the jsFiddle
button {
clear: both;
background-color: #aaa;
border: 0 none;
border-radius: 4px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 15px;
font-weight: bold;
height: 32px;
line-height: 32px;
margin: 10px 0px 10px 0;
padding: 0 22px;
text-align: center;
text-decoration: none;
vertical-align: top;
white-space: nowrap;
width: auto;
}
input {
display: block;
width: 100%;
padding: 8px 0;
text-indent: 2%;
}
<table>
<tr>
<td><input type="text" placeholder="name#name.com" /></td>
<td><button>Send</button></td>
</tr>
</table>
I made some changes to your code for inline elements:
#mc_embed_signup .button {
clear: both;
background-color: #aaa;
border: 0 none;
border-radius: 4px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 15px;
font-weight: bold;
height: 32px;
line-height: 32px;
/*margin: 10px 0px 10px 0;*/
/*padding: 0 22px;*/
text-align: center;
text-decoration: none;
vertical-align: top;
white-space: nowrap;
/*width: auto;*/
}
#mc_embed_signup .mc-field-group input {
/*display: block;*/
/*width: 100%;*/
/*padding: 8px 0;*/
text-indent: 2%;
}
#mc_embed_signup input.mce_inline_error {
border-color: #6B0505;
}
#mc_embed_signup input {
border: 1px solid #999;
-webkit-appearance: none;
}
#mc_embed_signup .mc-field-group label {
display: block;
margin-bottom: 3px;
}
#mce-EMAIL{
padding: 8px 0;
display: inline-block;
width: 70%;
}
#mc-embedded-subscribe{
display: inline-block;
width: 20%;
margin: 0;
padding: 0;
}
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<label for="mce-EMAIL">Email Addresse </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="name#domain.de">
<input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div>
<div class="clear text-center"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
http://jsfiddle.net/mitsuru/3Lusbvjx/1/
You should put the submit input near the email from input, then "inline-block" and "width" in % do the magic.
It doesn't use tables, !importants, nor needs to fix or apply tricks. It's just CSS.
Cheers.
html
div class="main">
<div class="one">
<div class="register">
<h3>Create your account</h3>
<form id="reg-form">
<div>
<div>
<label for="username">Username</label>
<input type="text" id="username" spellcheck="false" placeholder="User Name" />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" />
</div>
<div>
<label></label>
<input type="submit" value="Shop Login" id="create-account" class="button"/>
</div>
</form>
</div>
</div></div>
<div class="two">
<div class="register">
<h3>Create your account</h3>
<form id="reg-form1">
<div>
<label for="name1">Name</label>
<input type="text" id="name1" spellcheck="false" placeholder="Enter Your Name"/>
</div>
<div>
<label for="email1">Email</label>
<input type="text" id="email1" spellcheck="false" placeholder="mymail#mail.com"/>
</div>
<div>
<label for="username1">Username</label>
<input type="text" id="username1" spellcheck="false" placeholder="User Name" />
</div>
<div class="textarea">
<label for="address">Shipping Address</label>
<textarea name="address"cols="35" rows="4"></textarea>
</div>
<div>
<label for="password1">Password</label>
<input type="password" id="password1" />
</div>
<div>
<label for="password-again1">Password Again</label>
<input type="password" id="password-again1" />
</div>
<div>
<label></label>
<input type="submit" value="Create Account" id="create-account1" class="button"/>
</div>
</form>
</div>
</div>
</div>
CSS
.main > div {
display: inline-block;
width: 49%;
margin-top: 20px;
}
.two .register {
border: none;
}
.two .register h3 {
border-bottom-color: #909090;
}
.two .register .sep {
border-color: #909090;
}
.register {
width: 400px;
margin: 10px auto;
padding: 10px;
border: 7px solid #ADD8E6;
border-radius: 10px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
background-color: #f0f0f0;
box-shadow: 0 0 20px 0 #000000;
}
.register h3 {
margin: 0 15px 20px;
border-bottom: 2px solid #72b372;
padding: 5px 10px 5px 0;
font-size: 1.1em;
}
.register div {
margin: 0 0 15px 0;
border: none;
}
.register label {
display: inline-block;
width: 25%;
text-align: right;
margin: 10px;
}
.register input[type=text], .register input[type=password] {
width: 65%;
font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;
padding: 5px;
font-size: 0.9em;
border-radius: 5px;
background: rgba(0, 0, 0, 0.07);
}
.register input[type=text]:focus, .register input[type=password]:focus {
background: #FFFFFF;
}
.register textarea{
width: 65%;
font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;
padding: 5px;
font-size: 0.9em;
border-radius: 5px;
background: rgba(0, 0, 0, 0.07);
}
.register .button {
font-size: 1em;
border-radius: 8px;
padding: 10px;
border: 1px solid #ADD8E6;
box-shadow: 0 1px 0 0 #05B8CC inset;
background: #05B8CC;
background: -webkit-linear-gradient(#ADD8E6, #05B8CC);
background: -moz-linear-gradient(#ADD8E6, #05B8CC);
background: -o-linear-gradient(#ADD8E6, #05B8CC);
background: linear-gradient(#ADD8E6, #05B8CC);
}
.register .button:hover {
background: #51db1c;
background: -webkit-linear-gradient(#51db1c, #6ba061);
background: -moz-linear-gradient(#51db1c, #6ba061);
background: -o-linear-gradient(#51db1c, #6ba061);
background: linear-gradient(#51db1c, #6ba061);
}
.register .sep {
border: 1px solid #72b372;
position: relative;
margin: 35px 20px;
}
.register .or {
position: absolute;
width: 50px;
left: 50%;
background: #f0f0f0;
text-align: center;
margin: -10px 0 0 -25px;
line-height: 20px;
}
.register .connect {
width: 400px;
margin: 0 auto;
text-align: center;
}
div.one {position: relative; top: -165px}
The css is working fine, except that the label for text area is displaying at bottom.
How can I display the text area label at center position of the text area ?? Thanks in advance.
Here is a link to Fiddle Demo
Add the following css rule:
div.textarea > * {
vertical-align:middle
}
Add following css in your code
.register label, .register textarea{
vertical-align:middle
}
I have a <a> tag with border: 1px solid #CCC; border-bottom:none; style and it's leaves a tiny gap, please look at the codepen result to see what I mean. This gap appears left from login tab if the login tab is active or right from register tab if register tab is active.
HTML:
<div id="w-login">
<div id="login">
<menu id="tabs"> <a id="tab-signin" class="tab-active"><i class="fa fa-unlock-alt"></i>Login</a><a id="tab-signup"><i class="fa fa-lock"></i>Register</a>
</menu>
<div id="signin">
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="control-label col-1">Username:</label>
<input type="text" name="username" class="form-control col-2" id="si-username">
</div>
<div class="form-group">
<label for="password" class="control-label col-1">Password:</label>
<input type="password" name="password" class="form-control col-2" id="si-password">
</div>
<input type="submit" value="Login" class="btn btn-primary" id="si-submit">
</form>
</div>
<div id="signup">
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="control-label col-1">Username:</label>
<input type="text" name="username" class="form-control col-2" id="su-username">
</div>
<div class="form-group">
<label for="password" class="control-label col-1">Password:</label>
<input type="password" name="password" class="form-control col-2" id="su-password">
</div>
<div class="form-group">
<label for="email" class="control-label col-1">Email:</label>
<input type="text" name="email" class="form-control col-2" id="su-email">
</div>
<input type="submit" value="Register" class="btn btn-primary" id="su-submit">
</form>
</div>
</div>
</div>
CSS:
#container {
height: 100%;
width: 100%;
text-align: center;
font-size: 14px;
}
#container:before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -3px;
}
#w-login {
display: inline-block;
vertical-align: middle;
width: 40%;
padding: 5px;
}
#login {
}
#signin, #signup {
border: 1px solid #CCC;
border-top: none;
padding: 20px 10px;
border-bottom-left-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-bottom-right-radius: 15px;
}
#signup {
display: none;
}
#tabs {
padding: 0;
margin: 0;
border: 1px solid #CCC;
border-top-left-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-top-left-radius: 15px;
border-top-right-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-top-right-radius: 15px;
border-bottom: none;
}
#tabs a {
padding: 10px 0;
display: inline-block;
width: 50%;
cursor: pointer;
text-decoration: none;
}
#tabs .tab-active {
}
#tab-signin.tab-active {
border: 1px solid #CCC;
border-width: 0 1px 1px 0;
}
#tab-signup.tab-active {
border: 1px solid #CCC;
border-width: 0 0 1px 1px;
}
.col-1 {
width: 28%;
}
.col-2 {
width: 70%;
display: inline-block;
}
.form-horizontal .form-group {
margin-right: 0;
margin-left: 0;
}
.btn {
width: 99%;
}
.fa {
padding-right: 5px;
}
Note: the rest of the CSS styles come from Bootstrap
JS/jQuery:
$(function(){
$('#tab-signin').click(function(){
$('#signup').hide();
$('#signin').show();
switchTab();
});
$('#tab-signup').click(function(){
$('#signin').hide();
$('#signup').show();
switchTab();
});
});
function switchTab(){
$('#tabs a').toggleClass('tab-active');
}
I suggest the following approach.
I would take advantage of the fact that in your mark-up the two tab elements,
#tab-signin and #tab-signup, are children of the menu#tabs element.
That being the case, I would place the left, top and right borders on the #tabs element
and remove the left/top and top/right borders on the two children elements (#tab-signin and #tab-signup respectively).
The CSS for #tabs would look like:
#tabs{
padding: 0;
margin: 0;
border: 1px solid #CCC;
border-top-left-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-top-left-radius: 15px;
border-top-right-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-top-right-radius: 15px;
border-bottom: none;
}
To style the .tab-active cases, I would create two specific rules for the sign-in and the sign-up tabs, for the right/bottom and the bottom/left borders respectively:
#tabs .tab-active{
}
#tab-signin.tab-active{
border: 1px solid #CCC;
border-width: 0 1px 1px 0;
}
#tab-signup.tab-active{
border: 1px solid #CCC;
border-width: 0 0 1px 1px;
}
See demo at: http://jsfiddle.net/audetwebdesign/By4g5/
The problem you noticed earlier is not really a browser bug. The CSS specification does not specify exactly how browsers are to draw the corners of borders (the joints), so you are at the mercy of the browser for that particular design detail.
My approach is to avoid the problem by taking full advantage of the HTML mark-up in your code.
You should probably try floats but a quick fix could be negative margins...
#tabs{
padding: 0;
margin: 0px 0px -1px 0px;
}
DEMO
EDIT: inline blocks side effects, something to read ;)
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Another solution would be if set a transparent border on class .tab-active.
just using border transparent .
#tabs .tab-active{
border-bottom: 1px solid transparent;
}
Chec the DEMO.
i am trying to remove the extra line in the page footer, i tried to edit my css but its useless , i have 4 css IDs on the page content , search, button_style and ad which is acting as my footer here , the porblem that i need remove the blue line below the page as you see in the screen shot , here is my code
#content {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 6px solid #BDF4FC ;
width: 50%;
height: 150px;
margin: 0px auto;
text-align: left;
padding: 15px;
margin-top: 10%;
background-color: #ffffff;
}
#search {
height: 42px;
border: medium solid #63D1F2;
font-size: 24px;
font-style: normal;
color: #CCC;
font-weight: bolder;
vertical-align: middle;
margin-left:7%;
margin-top:7%;
position:relative;
text-indent:10px;
}
#button_style {
background-image: url(images/search_button.png);
height: 44px;
width: 92px;
background-color: #FFF;
border: 0px none #FFF;
vertical-align: middle;
margin-top:7%;
margin-left:1px;
}
#ad {
width:auto;
height:190px;
background-color:#FFF;
margin-top:5%;
border-top-width: 10px;
border-top-style: solid;
border-top-color: #12ADDA;
border-right-color: #EDEDED;
border-bottom-color: #EDEDED;
border-left-color: #EDEDED;
padding-top:40px;
float: none;
}
<body>
<div id="buttonsmenu">
HOME | LOGIN | REGISTER | ABOUT US | HELP
</div>
<div id="content">
<form action="" method="get">
<input name="search" type="text" id="search" onfocus="clearContents(this);" onchange="RestContents(this);" value="Search Reservation" size="40" /><input type="submit" value="" id="button_style"/>
</form>
</div>
<div id="ad"></div>
</body>
</html>
any suggestions ?
I just think that is padding in your <body> try this
CSS
html, body {padding-bottom:0;}
do that and then if you were sizing you body tag or anything just make sure you don't give it any padding on the bottom.