Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
This question has been asked before, however each situation is unique. I have a screenshot of a website that has a login box (registration box) with a sticky note on the side to tell the users what information to enter.
Screenshot below:
The registration box is over lapping the sticky note when the user resizes his browser window. Also the login box is overlapping the logo on the top. A solution that is cross compatible with many browsers would be nice (if possible).
Here is my CSS:
.box
{
background:#fefefe;
border: 1px solid #C3D4DB;
border-top:1px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-moz-box-shadow:rgba(0,0,0,0.15) 0 0 1px;
-webkit-box-shadow:rgba(0,0,0,0.15) 0 0 1px;
box-shadow:rgba(0,0,0,0.15) 0 0 1px;
color:#444;
font:normal 12px/14px Arial, Helvetica, Sans-serif;
margin:0 auto 30px;
overflow:hidden;
}
.box.login
{
height:480px;
width:332px;
position:absolute;
left:50%;
top:37%;
margin:-130px 0 0 -166px;
}
.boxBody
{
background:#fefefe;
border-top:1px solid #dde0e8;
padding:10px 20px;
}
.box footer
{
background:#eff4f6;
border-top:1px solid #dde0e8;
padding:22px 26px;
overflow:hidden;
height:32px;
}
.box label
{
display:block;
font:14px/22px Arial, Helvetica, Sans-serif;
margin:10px 0 0 6px;
}
.box footer label{
float:left;
margin:4px 0 0;
}
.box footer input[type=checkbox]{
vertical-align:sub;
*vertical-align:middle;
margin-right:10px;
.sticky {
/* General */
margin: 0 auto;
padding: 8px 24px;
/*width: 370px; */
max-width: 370px;
height: auto;
width: auto\9;
position: fixed;
left: 3%;
top: 35%;
/* Font */
font-family: 'Nothing You Could Do', cursive;
font-size: 1.4em;
/* Border */
border:1px #E8Ds47 solid;
/* Shadow */
-moz-box-shadow:0px 0px 6px 1px #333333;
-webkit-box-shadow:0px 0px 6px 1px #333333;
box-shadow:0px 0px 6px 1px #333333;
/* Background */
background: #fefdca; /* Old browsers */
background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefdca), c$
background: -webkit-linear-gradient(top, #fefdca 0%,#f7f381 100%); /* Chrome10+,Safar$
background: -o-linear-gradient(top, #fefdca 0%,#f7f381 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #fefdca 0%,#f7f381 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefdca', endColor$
background: linear-gradient(top, #fefdca 0%,#f7f381 100%); /* W3C; A catch-all for ev$
}
.sticky ol {
margin: 12px;
}
.sticky p {
text-align: center;
}
And here is my HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Secure Customer Login</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0$
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/structure_register.css">
<link href='https://fonts.googleapis.com/css?family=Nothing+You+Could+Do' rel='styleshe$
<script>document.createElement('footer');</script>
</head>
<center><img src="/images/logo.png"></center>
<body>
<div class="sticky">
<p>
<strong>Please Note</strong>
<br />
</p>
<ol>
<li>Please use your real name (your information is secure and will NOT be shared)$
<li>Capitalize the first letter of your first name and last name (i.e. John Doe)<$
<li>Use your email address for the username, otherwise you will not be able to ac$
<li>Use a secure password that cannot be easily guessed</li>
</ol>
</div>
<form class="box login" name="register" action="<?php echo $_SERVER['PHP_SELF']; ?>" meth$
<fieldset class="boxBody">
<label>First Name</label>
<input type="text" name="firstname" maxlength="50" tabindex="1" placeholder="First Na$
<label>Last Name</label>
<input type="text" name="lastname" maxlength="50" tabindex="2" placeholder="Last Name$
<label>Username</label>
<input type="email" name="username" maxlength="50" tabindex="3" placeholder="Email" r$
<label>Password</label>
<input type="password" placeholder="Password" name="pass1" tabindex="4" />
<label>Repeat Password</label>
<input type="password" placeholder="Repeat Password" name="pass2" tabindex="5" />
</fieldset>
<footer>
<center><input type="submit" name="submit" value="Register" class="btnLogin" /></cent$
</footer>
</form>
<footer id="main">
© 2014 Rye High Group. All rights reserved.</a>
</footer>
</body>
</html>
Your help is very much appreciated, I love this community!
Thanks,
Fixnode
Try this http://jsfiddle.net/ab5KN/
HTML:
<body>
<div class="img">
<img src="http://rye-high.ca/images/logo.png" />
</div>
<div class="sticky">
<p> <strong>Please Note</strong>
<br />
</p>
<ol>
<li>Please use your real name (your information is secure and will NOT be shared) </li>
<li>Capitalize the first letter of your first name and last name (i.e. John Doe)</li>
<li>Use your email address for the username, otherwise you will not be able to access your account</li>
<li>Use a secure password that cannot be easily guessed</li>
</ol>
</div>
<div class="box">
<form class="login" name="register" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<fieldset class="boxBody">
<label>First Name</label>
<input type="text" name="firstname" maxlength="50" tabindex="1" placeholder="First Name" required />
<label>Last Name</label>
<input type="text" name="lastname" maxlength="50" tabindex="2" placeholder="Last Name" required />
<label>Username</label>
<input type="email" name="username" maxlength="50" tabindex="3" placeholder="Email" required />
<label>Password</label>
<input type="password" placeholder="Password" name="pass1" tabindex="4" />
<label>Repeat Password</label>
<input type="password" placeholder="Repeat Password" name="pass2" tabindex="5" />
</fieldset>
<footer>
<center>
<input type="submit" name="submit" value="Register" class="btnLogin" />
</center>
</footer>
</form>
</div>
<footer id="main">© 2014 Rye High Group. All rights reserved.</a>
</footer>
</body>
CSS:
body {
background:#eff3f6;
width: 1000px;
}
.img {
/*display: block;*/
width:300px;
margin: 0 auto;
}
.box {
width:332px;
margin: 5px auto;
background:#fefefe;
border: 1px solid #C3D4DB;
border-top:1px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-moz-box-shadow:rgba(0, 0, 0, 0.15) 0 0 1px;
-webkit-box-shadow:rgba(0, 0, 0, 0.15) 0 0 1px;
box-shadow:rgba(0, 0, 0, 0.15) 0 0 1px;
color:#444;
font:normal 12px/14px Arial, Helvetica, Sans-serif;
/*margin:0 auto 30px;*/
overflow:hidden;
position: block;
z-index: -1;
padding-top: 3px;
}
.box.login {
height:480px;
width:150px;
margin: 0 auto;
}
.login fieldset{
border: 0px;
}
.boxBody {
background:#fefefe;
border-top:1px solid #dde0e8;
padding:10px 20px;
}
.box footer {
background:#eff4f6;
border-top:1px solid #dde0e8;
padding:22px 26px;
overflow:hidden;
height:32px;
}
.box label {
display:block;
font:14px/22px Arial, Helvetica, Sans-serif;
margin:10px 0 0 6px;
}
.box footer label {
float:left;
margin:4px 0 0;
}
.box footer input[type=checkbox] {
vertical-align:sub;
*vertical-align:middle;
margin-right:10px;
}
/*Alert Box*/
.alert {
background: #fff6bf url(../images/exclamation.png) center no-repeat;
background-position: 15px 50%;
text-align: center;
padding: 5px 20px 5px 45px;
border-top: 2px solid #ffd324;
border-bottom: 2px solid #ffd324;
}
.info {
background: #CDFECD url(../images/information.png) center no-repeat;
background-position: 15px 50%;
text-align: center;
padding: 5px 20px 5px 45px;
border-top: 2px solid #90EE90;
border-bottom: 2px solid #90EE90;
}
.error {
background: #FFBFBF url(../images/error.png) center no-repeat;
background-position: 15px 50%;
text-align: center;
padding: 5px 20px 5px 45px;
border-top: 2px solid #FF2424;
border-bottom: 2px solid #FF2424;
}
.box input[type=email], .box input[type=password], .box input[type=text], .txtField, .cjComboBox {
border:6px solid #F7F9FA;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-moz-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
-webkit-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
margin:3px 0 4px;
padding:8px 6px;
width:270px;
display:block;
}
.box input[type=email]:focus, .box input[type=password]:focus, .box input[type=text]:focus, .txtField:focus, .cjComboBox:focus {
border:6px solid #f0f7fc;
-moz-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
-webkit-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
color:#333;
}
.cjComboBox {
width:294px;
}
.cjComboBox.small {
padding:3px 2px 3px 6px;
width:100px;
border-width:3px !important;
}
.txtField.small {
padding:3px 6px;
width:200px;
border-width:3px !important;
}
.rLink {
padding:0 6px 0 0;
font-size:11px;
float:right;
}
.box a {
color:#999;
}
.box a:hover, .box a:focus {
text-decoration:underline;
}
.box a:active {
color:#f84747;
}
.btnLogin {
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:15px;
background:#a1d8f0;
background:-moz-linear-gradient(top, #badff3, #7acbed);
background:-webkit-gradient(linear, left top, left bottom, from(#badff3), to(#7acbed));
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";
border:1px solid #7db0cc !important;
cursor: pointer;
padding:11px 16px;
font:bold 11px/14px Verdana, Tahomma, Geneva;
text-shadow:rgba(0, 0, 0, 0.2) 0 1px 0px;
color:#fff;
-moz-box-shadow:inset rgba(255, 255, 255, 0.6) 0 1px 1px, rgba(0, 0, 0, 0.1) 0 1px 1px;
-webkit-box-shadow:inset rgba(255, 255, 255, 0.6) 0 1px 1px, rgba(0, 0, 0, 0.1) 0 1px 1px;
box-shadow:inset rgba(255, 255, 255, 0.6) 0 1px 1px, rgba(0, 0, 0, 0.1) 0 1px 1px;
margin-left:12px;
padding:7px 21px;
}
.btnLogin:hover, .btnLogin:focus, .btnLogin:active {
background:#a1d8f0;
background:-moz-linear-gradient(top, #7acbed, #badff3);
background:-webkit-gradient(linear, left top, left bottom, from(#7acbed), to(#badff3));
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";
}
.btnLogin:active {
text-shadow:rgba(0, 0, 0, 0.3) 0 -1px 0px;
}
footer#main {
/*position:fixed;*/
left:0;
bottom:10px;
text-align:center;
font:normal 11px/16px Arial, Helvetica, sans-serif;
width:100%;
}
.sticky {
/* General */
margin: 0 auto;
padding: 8px 4px;
/*width: 370px; */
max-width: 300px;
height: auto;
width: auto\9;
position: absolute;
left: 3%;
top: 250px;
/* Font */
font-family:'Nothing You Could Do', cursive;
font-size: 1em;
/* Border */
border:1px #E8Ds47 solid;
/* Shadow */
-moz-box-shadow:0px 0px 6px 1px #333333;
-webkit-box-shadow:0px 0px 6px 1px #333333;
box-shadow:0px 0px 6px 1px #333333;
/* Background */
background: #fefdca;
/* Old browsers */
background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefdca), color-stop(100%, #f7f381));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fefdca 0%, #f7f381 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fefdca 0%, #f7f381 100%);
/* Opera11.10+ */
background: -ms-linear-gradient(top, #fefdca 0%, #f7f381 100%);
/* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefdca', endColorstr='#f7f381', GradientType=0);
/* IE6-9 */
background: linear-gradient(top, #fefdca 0%, #f7f381 100%);
/* W3C; A catch-all for everything else */
}
/*.sticky ol {
margin: 12px;
}*/
.sticky p {
text-align: center;
}
Basically I added a width to the body, or else adjusting the size of the window will always cause something to overlap. I also added in div wrappers around the image and form (not sure if really needed but added for what I consider better structure). Took out some of the positioning css as well as it causes undue pain when trying to do things.
Add this CSS rule:
.box
{
position: relative;
z-index: -1;
}
How about this?
I removed your position absolute styles and added a wrapper around the sticky and the login controls and applied float:left and float: right on them.
The wrapper itself is center aligned to the page.
I edited the fiddle you posted in the comment on a previous answer and updated it here:
http://jsfiddle.net/va45t/1/
#wrapper {
width: 720px;
position: relative;
margin: 0 auto;
}
The other styles changed were .box.login and .sticky
Related
I'm having trouble reformatting this form, two of the fields overlap in the middle and I can't for the life of me figure out why, or how to fix it. The form itself works perfectly fine, it's just the alignment that's wrong. I'm not sure if the new CSS doesn't like the spray fields and that's causing the issue. I applied this style to a couple of other forms on our site and they swapped over without a hitch, it's just been this one fighting me. I've tried using <br> and that doesn't change the issue
.form-2 {
font-family: 'Ubuntu', 'Lato', sans-serif;
font-weight: 400;
/* Size and position */
width: 650px;
position: relative;
margin: 20px auto 30px;
padding: 10px;
overflow: hidden;
/* Styles */
background: #111;
border-radius: 0.4em;
border: 1px solid #191919;
box-shadow:
inset 0 0 2px 1px rgba(255,255,255,0.08),
0 16px 10px -8px rgba(0, 0, 0, 0.6);
}
.form-2 label {
/* Size and position */
width: 20%;
float: left;
padding-top: 9px;
/* Styles */
color: #ddd;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 1px 0 #000;
text-indent: 10px;
font-weight: 700;
cursor: pointer;
}
.form-2 input[type=text],
.form-2 input[type=password] {
/* Size and position */
width: 60%;
float: left;
padding: 8px 5px;
margin-bottom: 10px;
font-size: 12px;
/* Styles */
background: #1f2124; /* Fallback */
background: -moz-linear-gradient(#1f2124, #27292c);
background: -ms-linear-gradient(#1f2124, #27292c);
background: -o-linear-gradient(#1f2124, #27292c);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#1f2124), to(#27292c));
background: -webkit-linear-gradient(#1f2124, #27292c);
background: linear-gradient(#1f2124, #27292c);
border: 1px solid #000;
box-shadow:
0 1px 0 rgba(255,255,255,0.1);
border-radius: 3px;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: #fff;
}
.form-2 input[type=text]:hover,
.form-2 input[type=password]:hover,
.form-2 label:hover ~ input[type=text],
.form-2 label:hover ~ input[type=password] {
background: #27292c;
}
.form-2 input[type=text]:focus,
.form-2 input[type=password]:focus {
box-shadow: inset 0 0 2px #000;
background: #494d54;
border-color: #986893;
border-width: 2px;
outline: none; /* Remove Chrome outline */
}
.form-2 p:nth-child(3),
.form-2 p:nth-child(4) {
float: left;
width: 50%;
}
.form-2 label[for=remember] {
width: auto;
float: none;
display: inline-block;
text-transform: capitalize;
font-size: 11px;
font-weight: 400;
letter-spacing: 0px;
text-indent: 2px;
}
.form-2 input[type=checkbox] {
margin-left: 10px;
vertical-align: middle;
}
.form-2 input[type=submit] {
/* Width and position LOGIN BUTTON*/
width: 35%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 input[value=Register] {
/* Width and position REGISTER BUTTON*/
width: 35%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 .Reset {
/* Width and position REGISTER BUTTON*/
width: 40%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 input[type=submit]:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.form-2 input[type=submit]:active {
background: #287db5;
box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
border-color: #000; /* Fallback */
border-color: rgba(0,0,0,0.9);
}
.no-boxshadow .form-2 input[type=submit]:hover {
background: #2a92d8;
}
.form-2:after {
/* Size and position */
content: "";
height: 1px;
width: 33%;
position: absolute;
left: 20%;
top: 0;
/* Styles */
background: -moz-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -ms-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -o-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.25, #444), color-stop(0.5, #b6b6b8), color-stop(0.75, #444), to(transparent));
background: -webkit-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
}
.form-2:before {
/* Size and position */
content: "";
width: 8px;
height: 5px;
position: absolute;
left: 34%;
top: -7px;
/* Styles */
border-radius: 50%;
box-shadow: 0 0 6px 4px #fff;
}
.form-2 p:nth-child(1):before{
/* Size and position */
content:"";
width:250px;
height:100px;
position:absolute;
top:0;
left:45px;
/* Styles */
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
background: -moz-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -ms-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -o-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -webkit-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
pointer-events:none;
}
.no-pointerevents .form-2 p:nth-child(1):before {
display: none;
}
<center>
<h1><font color="red">User Registration</font></h1>
</center>
<section class="main">
<form id="form1" name="form1" method="POST" action="<?php echo $editFormAction; ?>" class="form-2">
<p class="clearfix">
<br />
<label for="Username">Username</label>
<span id="sprytextfield3">
<input type="text" name="Username" id="Username" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="Password">Password</label>
<span id="sprytextfield2">
<input type="password" name="Password" id="Password" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="passval">Confirm Password</label>
<span id="spryconfirm1">
<input type="password" name="passval" id="passval" />
<span class="confirmRequiredMsg">Required.</span><span class="confirmInvalidMsg">The values don't match.</span></span>
</p>
<p class="clearfix">
<label for="EmailAddress">Email Address</label>
<span id="sprytextfield1">
<input type="text" name="EmailAddress" id="EmailAddress" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="Security">What is your favorite food?</label>
<span id="sprytextfield4">
<input type="text" name="Security" id="Security" />
<span class="textfieldRequiredMsg">A value is required.</span></span>
<br />
</p>
<br /><br />
<input type="submit" name="SubmitUserForm" id="SubmitUserForm" value="submit" />
</p>
<input type="hidden" name="MM_insert" value="form1" />
<br /><br /><br />
There was some style in your form
.form-2 p:nth-child(3),
.form-2 p:nth-child(4) {
float: left;
width: 50%;
}
They have 50% width, that's why there have another 50% of the width, for that reason they were overlapping
.form-2 {
font-family: 'Ubuntu', 'Lato', sans-serif;
font-weight: 400;
/* Size and position */
width: 650px;
position: relative;
margin: 20px auto 30px;
padding: 10px;
overflow: hidden;
/* Styles */
background: #111;
border-radius: 0.4em;
border: 1px solid #191919;
box-shadow:
inset 0 0 2px 1px rgba(255,255,255,0.08),
0 16px 10px -8px rgba(0, 0, 0, 0.6);
}
.form-2 label {
/* Size and position */
width: 20%;
float: left;
padding-top: 9px;
/* Styles */
color: #ddd;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 1px 0 #000;
text-indent: 10px;
font-weight: 700;
cursor: pointer;
}
.form-2 input[type=text],
.form-2 input[type=password] {
/* Size and position */
width: 60%;
float: left;
padding: 8px 5px;
margin-bottom: 10px;
font-size: 12px;
/* Styles */
background: #1f2124; /* Fallback */
background: -moz-linear-gradient(#1f2124, #27292c);
background: -ms-linear-gradient(#1f2124, #27292c);
background: -o-linear-gradient(#1f2124, #27292c);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#1f2124), to(#27292c));
background: -webkit-linear-gradient(#1f2124, #27292c);
background: linear-gradient(#1f2124, #27292c);
border: 1px solid #000;
box-shadow:
0 1px 0 rgba(255,255,255,0.1);
border-radius: 3px;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: #fff;
}
.form-2 input[type=text]:hover,
.form-2 input[type=password]:hover,
.form-2 label:hover ~ input[type=text],
.form-2 label:hover ~ input[type=password] {
background: #27292c;
}
.form-2 input[type=text]:focus,
.form-2 input[type=password]:focus {
box-shadow: inset 0 0 2px #000;
background: #494d54;
border-color: #986893;
border-width: 2px;
outline: none; /* Remove Chrome outline */
}
.form-2 label[for=remember] {
width: auto;
float: none;
display: inline-block;
text-transform: capitalize;
font-size: 11px;
font-weight: 400;
letter-spacing: 0px;
text-indent: 2px;
}
.form-2 input[type=checkbox] {
margin-left: 10px;
vertical-align: middle;
}
.form-2 input[type=submit] {
/* Width and position LOGIN BUTTON*/
width: 35%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 input[value=Register] {
/* Width and position REGISTER BUTTON*/
width: 35%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 .Reset {
/* Width and position REGISTER BUTTON*/
width: 40%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 input[type=submit]:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.form-2 input[type=submit]:active {
background: #287db5;
box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
border-color: #000; /* Fallback */
border-color: rgba(0,0,0,0.9);
}
.no-boxshadow .form-2 input[type=submit]:hover {
background: #2a92d8;
}
.form-2:after {
/* Size and position */
content: "";
height: 1px;
width: 33%;
position: absolute;
left: 20%;
top: 0;
/* Styles */
background: -moz-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -ms-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -o-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.25, #444), color-stop(0.5, #b6b6b8), color-stop(0.75, #444), to(transparent));
background: -webkit-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
}
.form-2:before {
/* Size and position */
content: "";
width: 8px;
height: 5px;
position: absolute;
left: 34%;
top: -7px;
/* Styles */
border-radius: 50%;
box-shadow: 0 0 6px 4px #fff;
}
.form-2 p:nth-child(1):before{
/* Size and position */
content:"";
width:250px;
height:100px;
position:absolute;
top:0;
left:45px;
/* Styles */
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
background: -moz-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -ms-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -o-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -webkit-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
pointer-events:none;
}
.no-pointerevents .form-2 p:nth-child(1):before {
display: none;
}
<center>
<h1><font color="red">User Registration</font></h1>
</center>
<section class="main">
<form id="form1" name="form1" method="POST" action="<?php echo $editFormAction; ?>" class="form-2">
<p class="clearfix">
<br />
<label for="Username">Username</label>
<span id="sprytextfield3">
<input type="text" name="Username" id="Username" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="Password">Password</label>
<span id="sprytextfield2">
<input type="password" name="Password" id="Password" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="passval">Confirm Password</label>
<span id="spryconfirm1">
<input type="password" name="passval" id="passval" />
<span class="confirmRequiredMsg">Required.</span><span class="confirmInvalidMsg">The values don't match.</span></span>
</p>
<p class="clearfix">
<label for="EmailAddress">Email Address</label>
<span id="sprytextfield1">
<input type="text" name="EmailAddress" id="EmailAddress" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="Security">What is your favorite food?</label>
<span id="sprytextfield4">
<input type="text" name="Security" id="Security" />
<span class="textfieldRequiredMsg">A value is required.</span></span>
<br />
</p>
<br /><br />
<input type="submit" name="SubmitUserForm" id="SubmitUserForm" value="submit" />
</p>
<input type="hidden" name="MM_insert" value="form1" />
<br /><br /><br />
I have an image that is 224w x 400h.
Floated over that image is a simple form.
My goal is to make the div that encompasses that image + overlaying form to occupy the entire screen when viewed on mobile devices. I've tried various combinations using media headers, viewport meta, and tons of css that I pieced together from similar stack overflow questions. I'm currently lost on what to do next.
I also tried to at least center the img+form but I abandoned that as it doesn't center relative to mobile device screen sizes. (Rather it pushes the div off the screen and creates horizontal scrollbars as if it's considering the mobile device screen as hugely wide.)
How do I change so a mobile device will fill up its screen with my specified div? (or in the very least, center the fullsrceen div class on mobile device's smaller screens.) Any help is very appreciated!
Current html
<!DOCTYPE html>
<html>
<head>
<title>Reg</title>
<meta name="viewport" content="target-densitydpi=device-dpi">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<link href="Form.css" rel="stylesheet">
</head>
<body>
<div class="fullscreen" id="fullscreen">
<div style="position:relative">
<img src="fbg.png" alt="" />
<div style="position:absolute;left:0;top:0;">
<div id"=main">
<form method="post" action="SMA_Send2.php">
<label for="form">
First Name: <input type="text" maxlength="20" name="Fname" required><br />
Last Name: <input type="text" maxlength="36" name="Lname" required><br />
Student ID: <input type="number" maxlength="4" name="Sid" required><br />
Email: <input type="email" maxlength="36" name="Email" required placeholder="Enter a valid email address"><br />
Device Type:<br />
<select name="Dtype">
<option value="iPad">iPad</option>
<option value="iPhone">iPhone</option>
<option value="AndroidTablet">Android Tablet</option>
<option value="AndroidPhone">Android Phone</option></select><br />
Mac Address: <input type="text" maxlength="17" name="Mac" pattern="([0-9A-F]{2}[:-]){5}([0-9A-F]{2})" title="Use Format: 1A:B2:3C:D4:5E:6F" required placeholder="Ex: 1A:B2:3C:D4:5E:6F"><br />
<br />
<input type="submit" value="submit" name="submit">
</label>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Current css
#fullscreen {
height: 100vh;
width: 100vw;
position:fixed;
top:0;
left:0;
}
#media screen and (orientation:portrait) { height: 100vh;
width: 100vw; }
#media screen and (orientation:landscape) {height: 100vh;
width: 100vw; }
label {
display: inline-block;
position: relative;
float: left;
text-align: left;
margin-right: 20px;
width: 190px;
padding: 5px;
}
input, textarea {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 190px;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
select {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
height: 36px;
width: 210px;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
.form label {
margin-left: 10px;
color: #999999;
}
.submit input {
width: 210px;
padding: 9px 15px;
background: #617798;
border: 1;
font-size: 14px;
color: #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
input[type=submit] {
border: 1; /*rewriting standard style, it is necessary to be able to change the size*/
height: 35px;
width: 210px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
I think this will be easier if you aren't trying to do this with absolute & relative positioning. If you want the image and form centered, try this:
#fullscreen {
height: 100vh;
width: 100vw;
border: 1px solid black;
background-image:url(http://placehold.it/224x400);
background-repeat: no-repeat;
background-position: center top;
}
#formDiv {
margin: auto;
width: 224px;
padding-left: 12px;
}
label {
display: inline-block;
position: relative;
float: left;
text-align: left;
margin-right: 20px;
width: 190px;
padding: 5px;
}
input, textarea {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 190px;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
select {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
height: 36px;
width: 210px;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
.form label {
margin-left: 10px;
color: #999999;
}
.submit input {
width: 210px;
padding: 9px 15px;
background: #617798;
border: 1;
font-size: 14px;
color: #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
input[type=submit] {
border: 1; /*rewriting standard style, it is necessary to be able to change the size*/
height: 35px;
width: 210px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
<div class="fullscreen" id="fullscreen">
<div id="formDiv">
<form method="post" action="SMA_Send2.php">
First Name: <input type="text" maxlength="20" name="Fname" required><br />
Last Name: <input type="text" maxlength="36" name="Lname" required><br />
Student ID: <input type="number" maxlength="4" name="Sid" required><br />
Email: <input type="email" maxlength="36" name="Email" required placeholder="Enter a valid email address"><br />
Device Type:<br />
<select name="Dtype">
<option value="iPad">iPad</option>
<option value="iPhone">iPhone</option>
<option value="AndroidTablet">Android Tablet</option>
<option value="AndroidPhone">Android Phone</option></select><br />
Mac Address: <input type="text" maxlength="17" name="Mac" pattern="([0-9A-F]{2}[:-]){5}([0-9A-F]{2})" title="Use Format: 1A:B2:3C:D4:5E:6F" required placeholder="Ex: 1A:B2:3C:D4:5E:6F"><br />
<br />
<input type="submit" value="submit" name="submit" />
</form>
</div>
</div>
Media queries need to encompass rules, as you have it the code in the media queries is invalid and does not target anything with a selector.
The way you target mobile devices is not by any means perfect with media queries as you generally use the viewport width to do so:
#media (max-width: 600px) {
/*Some rule(s)*/
}
So rather than targeting mobile devices, really you're targeting narrow screens/viewports.
That said, you need to insert a rule (or some rules) into your media query for it to do anything:
#media (max-width: 600px) {
#fullscreen {
/*Some declaration(s)*/
}
}
Now... that said, your rule for #fullscreen already makes the <div /> element full width/height, see here: http://jsfiddle.net/5jtuqry8/. So I'm not quite sure what you are trying to do exactly.
Your code is a bit messy and difficult to understand, whats vh and vw?
Anyway try this, I have tided the code a bit and removed the unnecessary stuff. I added a css for mobile screens which tells it to make all inputs of the form 100% of the screen width.
<div style="position:relative">
<img src="fbg.png" alt="" />
<div id="main">
<div id="myForm">
<form method="post" action="SMA_Send2.php">
First Name:<br />
<input type="text" maxlength="20" name="Fname" required>
<br />
Last Name:<br />
<input type="text" maxlength="36" name="Lname" required><br />
Student ID:<br />
<input type="number" maxlength="4" name="Sid" required><br />
Email:<br />
<input type="email" maxlength="36" name="Email" placeholder="Enter a valid email address" required><br />
Device Type:<br />
<select name="Dtype">
<option value="iPad">iPad</option>
<option value="iPhone">iPhone</option>
<option value="AndroidTablet">Android Tablet</option>
<option value="AndroidPhone">Android Phone</option></select><br />
Mac Address:<br />
<input type="text" maxlength="17" name="Mac" pattern="([0-9A-F]{2}[:-]){5}([0-9A-F]{2})" title="Use Format: 1A:B2:3C:D4:5E:6F" required placeholder="Ex: 1A:B2:3C:D4:5E:6F">
<br /><br />
<input type="submit" value="submit" name="submit">
</form>
</div></div></div>
CSS:
#myForm {
position:absolute;
left:0;
top:0
}
input, textarea {
padding: 9px;
margin: 5px 0;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 190px;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
select {
padding: 9px;
margin: 5px 0;
border: solid 1px #E5E5E5;
outline: 0;
height: 36px;
width: 210px;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
background: -webkit-gradient(linear, left top, left 25, from(#FFF), color-stop(4%, #EEE), to(#FFF));
background: -moz-linear-gradient(top, #FFF, #EEE 1px, #FFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
submit {
width: 210px;
padding: 9px 15px;
background: #617798;
border: 1;
font-size: 14px;
color: #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
input[type=submit] {
border: 1; /*rewriting standard style, it is necessary to be able to change the size*/
height: 35px;
width: 210px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
#media screen and (max-device-width: 480px){
input, select {width:100%}
}
I am building a website with a responsive CSS layout: I have two sections here, "third" and "footer". I would like to stretch the background of third to cover up the whitespace that I have between "third" and "footer".
Here is the HTML that I am using:
<!-- Third -->
<section id="third" class="main">
<header>
<div class="container">
<h2>keep in touch</h2>
<p>we'd love to hear from you. send us your questions and comments.</p>
</div>
</header>
<div class="content dark style3 featured">
<div class="container small">
<form method="post" action="#">
<div class="row half">
<div class="6u"><input type="text" class="text" placeholder="Name" /></div>
<div class="6u"><input type="text" class="text" placeholder="Email" /></div>
</div>
<div class="row half">
<div class="12u"><textarea name="message" placeholder="Message"></textarea></div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li><input type="submit" class="button" value="Send Message" /></li>
<li><input type="reset" class="button alt" value="Clear Form" /></li>
</ul>
</div>
</div>
</form>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="content style3 featured">
<ul class="icons">
<li><span>Twitter</span></li>
<li><span>Facebook</span></li>
<li><span>Instagram</span></li>
<li><span>Pinterest</span></li>
<li><span>Flickr</span></li>
</ul>
</div>
</section>
</body>
and the CSS:
.main
{
position: relative;
margin: 0;
}
.main > header
{
background: #fff;
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
}
.main > header h2
{
font-size: 2.25em;
font-weight: 100;
margin-bottom: 0;
}
.main > header p
{
margin: 2em 0 0 0;
padding: 0;
text-align: center;
}
.main > .content
{
padding: 6em 0 6em 0;
}
.main > .content > .container
{
}
.main > .content.style3
{
background: url('images/bgtr.svg') top right no-repeat,
url('images/bgbl.svg') bottom left no-repeat,
url('images/overlay.png'),
linear-gradient(45deg, #5f796b, #3a4e59, #2f394e);
}
This is what it looks like now: http://imgur.com/2gsv2Xk
How would I be able to fill in that whitespace?
Here is the CSS for the sections:
section,
article
{
margin-bottom: 0;
}
section > :last-child,
article > :last-child
{
margin-bottom: 0;
}
section:last-child,
article:last-child
{
margin-bottom: 0;
}
.row > section,
.row > article
{
margin-bottom: 0;
}
The section article did have a margin-bottom of 3em, but I changed it to 0, and I still see the whitespace.
I have prepared an example for you. You can benefit from this example.
See this DEMO
Also i will give you the code:
HTML
<div class="container">
<div class="text_wrap">
<div class="div_text">
<input type='text' class='cc-mask' placeholder='Name'/>
</div>
<div class="div_text">
<input type='text' class='cc-mask' placeholder='Surname'/>
</div>
<div class="message_text">
<input type='text' class='message-mask' placeholder='Message Here'/>
</div>
<div class="send_message_clearform_wrap">
<div class="send_message">
<input type="submit" class="sendButton" value="Send Message" />
</div>
<div class="clear_form">
<input type="submit" class="clearButton" value="Celar Form" />
</div>
</div>
</div>
</div>
<div class="white_area"></div>
CSS
body {
margin:0px;
padding:0px;
background-image: rgba(235,235,235,1);
background-image: -webkit-linear-gradient(-45deg, #188aad 0%,#00a698 100%);
background-image: -moz-linear-gradient(-45deg, #188aad 0%,#00a698 100%);
background-image: -o-linear-gradient(-45deg, #188aad 0%,#00a698 100%);
background-image: -ms-linear-gradient(135deg, #188aad 0%,#00a698 100%);
background-image: linear-gradient(-45deg, #188aad 0%,#00a698 100%);
-webkit-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
-moz-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}
.container {
width:600px;
height:400px;
margin:10px auto;
}
.div_text {
float:left;
margin-left:10px;
}
.cc-mask {
display:inline-block;
height:40px;
font-size:18px;
background:none;
border-radius:3px;
border:1px solid #c1c1c1;
padding:2px;
outline:none;
width:250px;
}
.message-mask {
display:inline-block;
height:250px;
font-size:18px;
background:none;
border:1px solid #c1c1c1;
padding:2px;
outline:none;
width:518px;
margin-left:10px;
border-radius:3px;
}
.message_text {
float:left;
margin-top:10px;
}
.sendButton {
width: 220px;
height: 54px;
padding: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
color: #fff;
font: normal 11px/24px "Lucida Grande";
border: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-image: rgba(235,235,235,1);
background-image: -webkit-linear-gradient(top, #eb5a17 0%,#eb5a17 100%);
background-image: -moz-linear-gradient(top, #eb5a17 0%,#eb5a17 100%);
background-image: -o-linear-gradient(top, #eb5a17 0%,#eb5a17 100%);
background-image: -ms-linear-gradient(top, #eb5a17 0%,#eb5a17 100%);
background-image: linear-gradient(top, #eb5a17 0%,#eb5a17 100%);
-webkit-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
-moz-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}
.send_message {
float:left;
width:200px;
height:56px;
margin-top:10px;
margin-left:30px;
}
.clear_form{
float:left;
width:200px;
height:56px;
margin-top:10px;
margin-left:30px;
}
.clearButton {
width: 220px;
height: 54px;
padding: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
color: #fff;
border:1px solid #fff;
border-radius:3px;
font: normal 11px/24px "Lucida Grande";
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5;
}
.white_area {
width:100%;
background-color:#fff;
height:50px;
}
I dont find how i can horizontal align my submit button.
i would like to align my submit button to the right of my input field.
i try several things but its not working.
here is my html file :
<body>
<form:form class="form" method="post" action="/it-portail/passwordChange.mvc" commandName='email'>
<h3>Formulaire email</h3>
<form:errors class ="errorPass" path="email" />
<div class="field">
<form:label path="email">Email:</form:label>
<form:input class ="input" path="email" />
<p class="hint">Entrez votre email.</p>
</div>
<input class="button" type="submit" value="VALIDER" />
</form:form>
here is my css file :
.form {
width: 600px;
display:inline-block;
padding: 20px;
background: #f0f0f0;
overflow: auto;
/* Border style */
border: 1px solid #cccccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
/* Border Shadow */
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;
position:absolute;
left: 30%;
top: 40%;
width: 600px;
height: 200px;
margin-left: -100px; /* Cette valeur doit être la moitié négative de la valeur du width */
margin-top: -100px; /* Cette valeur doit être la moitié négative de la valeur du height */
}
input {
font-family: Arial, Verdana;
font-size: 15px;
padding: 5px;
padding-top:5px
border: 1px solid #b9bdc1;
width: 150px;
color: #797979;
text-align:center;
}
.field {
margin-top:4px;
margin-bot:2px;
}
.button {
float: none;
margin-top:5px;
font-weight: bold;
line-height: 1;
cursor: pointer;
color: #fff;
vertical-align:40%;
text-shadow: 0 -1px 1px #64799e;
/* Background gradient */
background: #a5b8da;
background: -moz-linear-gradient(top, #a5b8da 0%, #7089b3 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a5b8da),
to(#7089b3));
/* Border style */
border: 1px solid #5c6f91;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* Box shadow */
-moz-box-shadow: inset 0 1px 0 0 #aec3e5;
-webkit-box-shadow: inset 0 1px 0 0 #aec3e5;
box-shadow: inset 0 1px 0 0 #aec3e5;
}
thanks,
Change float: none; to float: right;
DEMO
Add this to your .button css as
position:absolute;
right:15px;
top:145px;
for this I have updated some of your css and html.
css
input {
font-family: Arial, Verdana;
font-size: 15px;
padding: 5px;
padding-top:5px
border: 1px solid #b9bdc1;
width: 150px;
color: #797979;
text-align:center;
float:left;
margin-right:10px;
}
.field {
margin-top:4px;
margin-bot:2px;
}
.button {
float:left;
font-weight: bold;
cursor: pointer;
color: #fff;
text-shadow: 0 -1px 1px #64799e;
/* Background gradient */
background: #a5b8da;
background: -moz-linear-gradient(top, #a5b8da 0%, #7089b3 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a5b8da),
to(#7089b3));
/* Border style */
border: 1px solid #5c6f91;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* Box shadow */
-moz-box-shadow: inset 0 1px 0 0 #aec3e5;
-webkit-box-shadow: inset 0 1px 0 0 #aec3e5;
box-shadow: inset 0 1px 0 0 #aec3e5;
}
.label{
float:left;
margin-right:10px;
}
.hint{
clear:both
}
html
<form:form class="form" method="post" action="/it-portail/passwordChange.mvc" commandName='email'>
<h3>Formulaire email</h3>
<form:errors class ="errorPass" path="email" />
<div class="field">
<form:label path="email" class="label">Email:</form:label>
<input name="" type="text" class ="input" />
<input class="button" type="submit" value="VALIDER" />
<p class="hint">Entrez votre email.</p>
</div>
</form:form>
jsFiddle File
please check this is working for you or not.
Thank you :)
Change your .button's css...
from
float: none;
margin-top:5px;
to
float: right;
margin-top:-25px;
DEMO : http://jsfiddle.net/a4QNB/166/
I've got a container that has a contact form in it.. the form is ignoring my width of 140px and somehow computing itself out to 300px. no idea where it's coming from.
HTML:
<div id="main" role="main">
<div id="mail">
<form id="signup" action="<?=$_SERVER['PHP_SELF']; ?>" method="get">
<fieldset>
<span id="response">
<? require_once('php/store-address.php'); if($_GET['submit']){ echo storeAddress(); } ?>
</span>
<input type="email" name="email" id="email" placeholder="Enter your email address" />
<input type="submit" id="submit" class="btn" value="Go" />
</fieldset>
</form>
</div>
</div>
CSS:
#main {
width:300px;
height:110px;
padding:10px 20px 10px 20px;
position:absolute;
bottom:50px;
left:50%;
margin-left:-170px;
background-color: #f0f3f8;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f0f3f8), to(#a9a9ad));
background: -moz-linear-gradient(100% 100% 90deg, #a9a9ad, #f0f3f8);
background: -o-linear-gradient(#f0f3f8, #a9a9ad);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
//text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
//border-bottom: 1px solid rgba(0,0,0,0.25);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
////////CONTACT FORM
#mail {
width:140px;
height:95px;
float:right;
display:block;
/*background: #c9d0de; border: 1px solid #e1e1e1;
-moz-box-shadow: 0px 0px 8px #444;
-webkit-box-shadow: 0px 0px 8px #444;*/
}
#response {
width:140px;
height:25px;
margin-bottom:10px;
display:block;
font-style:italic;
}
input {
width: 124px;
height: 9px;
padding: 8px;
margin: 0 0 10px 0;
background: #5E768D;
background: -moz-linear-gradient(top, #546A7F 0%, #5E768D 20%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#546A7F), color-stop(20%,#5E768D));
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 1px 0px #f2f2f2;
-webkit-box-shadow: 0px 1px 0px #f2f2f2;
font-family: sans-serif;
font-size: 10px;
color: #f2f2f2;
text-shadow: 0px -1px 0px #334f71;
outline:none;
}
input::-webkit-input-placeholder {
color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
}
input:-moz-placeholder {
color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
}
input:focus, textarea:focus {
background: #728eaa;
background: -moz-linear-gradient(top, #668099 0%, #728eaa 20%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#668099), color-stop(20%,#728eaa));
}
input[type=submit] {
width: 40px;
height: 25px;
padding:5px;
margin: 0 auto;
display:block;
-moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999;
border: 1px solid #556f8c;
background: -moz-linear-gradient(top, #718DA9 0%, #415D79 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#718DA9), color-stop(100%,#415D79));
cursor: pointer;
}
JSFiddle link
You can't have comments with //. Only multi-line comments work with css. You'll have to remove this comment:
////////CONTACT FORM
The rest of your styles should work after you remove that.