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%}
}
Related
I having problems trying to get a log and a search box to go side by side. The logo on the left and the search box on the right.
header {
background:#383838;
height: 130px;
border-top:10px solid #2C2C2C; border-bottom:1px solid #2C2C2C;
}
.wrap-header {
width:960px;
position:relative;
margin: 0px auto;
}
header #logo {
position:absolute;
top:40px;
left: 30px;
width: 100%;
}
header #search,
header #submit {
position: absolute;
top: 60px;
right: 20px;
width: 258px;
z-index: 15;
}
header #search {
padding: 5px 9px;
height: 20px;
width: 300px;
border: 1px solid #a4c3ca;
background: #f1f1f1;
border-radius: 50px 3px 3px 50px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
header #submit
{
background-color: #6cbb6b;
background-image: linear-gradient(#95d788, #6cbb6b);
border-radius: 3px 50px 50px 3px;
border-width: 1px;
border-style: solid;
border-color: #7eba7c #578e57 #447d43;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3),
0 1px 0 rgba(255, 255, 255, 0.3) inset;
height: 35px;
margin: 0 0 0 10px;
padding: 0;
width: 90px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #23441e;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
header #submit:hover {
background-color: #95d788;
background-image: linear-gradient(#6cbb6b, #95d788);
}
header #submit:active {
background: #95d788;
outline: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
header #submit::-moz-focus-inner {
border: 0; /* Small centering fix for Firefox */
}
header #search::-webkit-input-placeholder {
color: #9c9c9c;
font-style: italic;
}
<header>
<div class="wrap-header">
<div id="logo"><img src="./images/logo.png"/></div>
<form id="searchbox" action="search.php" method="post">
<input id="search" type="text" placeholder="Type here" name="search">
<input name="submit" type="submit" id="submit" formmethod="POST" value="Search">
</form>
</div>
</header>
What is happening is the logo is okay but the submit button for the search-box is inside the text-box for the search.
Just edit following css header #search class
header #search {
padding: 5px 9px;
height: 20px;
margin-right: 90px;
width: 300px;
border: 1px solid #a4c3ca;
background: #f1f1f1;
border-radius: 50px 3px 3px 50px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
It will do the job well.. Here is the preview
Edit
You need toadd min-width to your header element
Here's working jsfiddle http://jsfiddle.net/otbay822/
<header>
<div class="wrap-header">
<div id="logo" class="inline-div">
<img src="./images/logo.png"/>
</div>
<div class="inline-div">
<form id="searchbox" action="search.php" method="post">
<input id="search" type="text" placeholder="Type here" name="search">
<input name="submit" type="submit" id="submit" formmethod="POST" value="Search">
</form>
</div>
</div>
</header>
CSS:
.inline-div{
display:inline-block;
}
I Wrapped the Form in a div and applied a class too both the form and the logo div. And then simply applied display:inline-block;
Hope it Helps.
I am trying to get a form styled with css on my webpage, but i cant seem to get the form to recognize the css.As you can see below I am simply trying to stlye the element below is the code. Any thoughts? I am sure the solution is cake, new programmer over here.. any and all help is appreciated!
CSS
form {
background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE));
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
margin: auto;
position: relative;
width: 550px;
height: 450px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
color: #09C;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 10px;
border: 1px solid #999;
border: inset 1px solid #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
input {
width: 375px;
display: block;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
textarea#feedback {
width: 375px;
height: 150px;
}
textarea.message {
display: block;
}
input.button {
width: 100px;
position: absolute;
right: 20px;
bottom: 20px;
background: #09C;
color: #fff;
font-family: Tahoma, Geneva, sans-serif;
height: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999;
}
input.button:hover {
background: #fff;
color: #09C;
}
textarea:focus, input:focus {
border: 1px solid #09C;
}
HTML
<form>
<div>
<h1>Contact Form :</h1>
<label>
<span>Your name</span><input id="name" type="text" name="name" />
</label>
<label>
<span>Email Address</span><input id="email" type="text" name="email" />
</label>
<label>
<span>Subject</span><input id="subject" type="text" name="subject" />
</label>
<label>
<span>Message</span><textarea id="feedback" name="feedback"></textarea>
<input type="button" value="Submit Form" />
</label>
</div>
</form>
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
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.