I want to place a form field(div.invoer) in the left bottom of a div(div.content)
<body>
<div id="container" style="width:1280px";"height:800px">
<div id="header" style=;"background-color:#FFA500;""width:1280px";"height:200px">
<h1>EXPORT ZENDINGEN</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:600px;width:700px;float:left;">
</div>
<div id="content" style="background-color:#EEEEEE;height:600px;width:580px;float:right;">
<div id="invoer">
<form method="post" action="">
<label>Debiteur</label>
<input type="text" name="deb_nmr" />
<br />
<label>Klantnaam</label>
<input type="text" name="cost_name" />
<br />
<label>Aantal Pallets</label>
<input type="text" name="numb_pallets" />
<br />
<label>Totaal Gewicht</label>
<input type="text" name="tot_weight" />
<br />
<label>PB Nummers</label>
<input type="text" name="PB's" />
</form>
</div>
</div>
</div>
</body>
Used the following Css:
label{
display:inline-block;width:100px;margin-bottom:10px;
}
.content{
position: relative;
}
.invoer{
position: absolute;
bottom: 0px;
}
Used info from W3school but can't get in to work. Found some more information on stack overflow, like using position relative and absolute. But the form stays in the upper left of the content div.
content and invoer are ids not classes so the correct way to use them is #content ,#invoer not .Content , .content.
Everything is correct just replace the following css from this:
label{
display:inline-block;width:100px;margin-bottom:10px;
}
#content{
position: relative;
}
#invoer{
position: absolute;
bottom: 0px;
}
to this:
label{
display:inline-block;width:100px;margin-bottom:10px;
}
#content{
position: relative;
}
#invoer{
position: absolute;
bottom: 0px;
}
Here is the updated code.
label{
display:inline-block;width:100px;margin-bottom:10px;
}
#content{
position: relative;
}
#invoer{
position: absolute;
bottom: 0px;
}
<div id="container" style="width:1280px ; height:800px">
<div id="header" style=" background-color:#FFA500; width:1280px;height:200px">
<h1>EXPORT ZENDINGEN</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:600px;width:700px;float:left;">
</div>
<div id="content" style="background-color:#EEEEEE;height:600px;width:580px;float:right;">
<div id="invoer">
<form method="post" action="">
<label>Debiteur</label>
<input type="text" name="deb_nmr" />
<br />
<label>Klantnaam</label>
<input type="text" name="cost_name" />
<br />
<label>Aantal Pallets</label>
<input type="text" name="numb_pallets" />
<br />
<label>Totaal Gewicht</label>
<input type="text" name="tot_weight" />
<br />
<label>PB Nummers</label>
<input type="text" name="PB's" />
</form>
</div>
</div>
<div id="invoer">
But in css you tagged it as a class
.invoer{
position: absolute;
bottom: 0px;
}
However - change it to # and you should be able to style it.
#invoer{
//some css
}
Related
Goal: I am trying to make a form for users to submit their school schedule
Problem: the first of my input tags will not let me type an input. All the input sections are set up the same accept for their place holder text. they all follow the same pattern and have the same classes applied.
Notes: I know you are able to type in the input field inside of the snippet but it does not work when implemented into my full webpage. Also I'm fairly new to HTML/CSS so excuse the fact that my code is kinda messy. Any constructive criticism is openly accepted.
.form {
width: 680px;
height: 870px;
}
.inputConatiner {
height: 75px;
width: 680px;
display: inline-block;
float: left;
}
.textContainer {
height: 75px;
width: 405px;
display: inline-block;
}
.submitContainer {
width: 100%;
height: 40px;
position: relative;
}
.submit {
height: 40px;
width: 150px;
display: inline-block;
position: absolute;
left: 50%;
top: 2075%;
margin: 0 0 0 -75px;
}
input[type="text"] {
border: black 0px solid;
border-radius: 20px;
background-color: rgb(230, 230, 230);
padding-top: 13px;
padding-bottom: 13px;
font-family: "Arial";
}
input[type="radio"] {
height: 30px;
width: 30px;
margin: 0;
vertical-align: middle;
}
input[type="submit"] {
height: 40px;
width: 150px;
border: black 0px solid;
border-radius: 20px;
}
label[for="A"],
label[for="B"] {
display: inline-block;
width: 160px;
font-family: "Arial";
}
fieldset {
border: black 0px solid;
padding: 0px;
}
.label {
width: 270px;
height: 40px;
font-family: "Nunito Sans";
font-size: 30px;
display: inline-block;
background-color: rgb(104, 255, 144);
border-radius: 20px;
text-align: center;
vertical-align: middle;
}
input {
width: 200px;
}
<head>
<title>Side Project</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
</head>
<div class="form">
<form method="post" action="#" name="getStudentInfo">
<div class="inputConatiner">
<h1 class="label">Enter Your Name</h1>
<div class="textContainer">
<input type="text" placeholder="First" required />
<input type="text" placeholder="Last" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">1A Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">2A Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">3A Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">4A Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">A Day Lunch</h1>
<input type="radio" id="A" name="lunchADay" />
<label for="A">First Lunch</label>
<input type="radio" id="B" name="lunchADay" />
<label for="B">Second Lunch</label>
</div>
<div class="inputConatiner">
<h1 class="label">1B Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">2B Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">3B Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">4B Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">B Day Lunch</h1>
<input type="radio" id="A" name="lunchBDay" />
<label for="A">First Lunch</label>
<input type="radio" id="B" name="lunchBDay" />
<label for="B">Second Lunch</label>
</div>
<div class="submitContainer">
<div class="submit">
<input type="submit" placeholder="Submit" />
</div>
</div>
</form>
</div>
You have floated the row elements but not cleared them. As a result, the submit button's container element sits at the top of the page, partially overlapping the rows, even though the button itself has been pushed to the bottom (using absolute positioning).
Instead of doing this, you need to first clear the floated elements using .submitContainer, and center-align the button within it:
.submitContainer {
width: 100%;
height: 40px;
position: relative;
/* CLEAR THE FLOATED ROWS */
clear: both;
/* CENTER-ALIGN THE CONTENTS OF THIS CONTAINER */
text-align: center;
}
Next, remove the absolute positioning from the .submit element itself, as well as the negative margin (since it is now being aligned by its container):
.submit {
height: 40px;
width: 150px;
display: inline-block;
/* position: absolute; <- REMOVE THIS */
/* left: 50%; <- REMOVE THIS */
/* top: 2075%; <- REMOVE THIS */
/* margin: 0 0 0 -75px; <- REMOVE THIS */
}
That will allow the submit container and button to sit below the form without having to push it down.
The problem is that your wrapper div for submit button is overlapping the first input. Since you've used float: left in all your inputs, try and contain all of them in one div tag.
Add this to your css
.clearfix::after {
content: "";
clear: both;
display: table;
}
And wrap your inputs like
<form method="post" action="#" name="getStudentInfo">
<div class="clearfix">
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="submitContainer">
<div class="submit">
<input type="submit" placeholder="Submit" />
</div>
</div>
</form>
Let me start by telling that your css and containers work needs more working...
Your first input tag did not let you type since the "submitcontainer" was overlapping the input tags... I removed the submit Container and positioned the submit button slightly... But I implore you to learn some styling and not dependent on absolute positions...
<div class="submit">
<input type="submit" placeholder="Submit" />
</div>
.submit {
height: 40px;
width: 150px;
display: inline-block;
position: absolute;
left: 30%;
top: 100%;
margin: 0 0 0 -75px;
}
Codepen link: https://codepen.io/anon/pen/MrJGrN
How can i center the form called form_login horizontally and vertically in my page ?
Here is the HTML I'm using right now:
<body>
<form id="form_login">
<p>
<input type="text" id="username" placeholder="username" />
</p>
<p>
<input type="password" id="password" placeholder="password" />
</p>
<p>
<input type="text" id="server" placeholder="server" />
</p>
<p>
<button id="submitbutton" type="button">Se connecter</button>
</p>
</form>
</body>
I have tried to do the following css but my form is never centered :
#form_login {
left: 50%;
top: 50%;
margin-left: -25%;
position: absolute;
margin-top: -25%;
}
you can use display:flex to do this : http://codepen.io/anon/pen/yCKuz
html,body {
height:100%;
width:100%;
margin:0;
}
body {
display:flex;
}
form {
margin:auto;/* nice thing of auto margin if display:flex; it center both horizontal and vertical :) */
}
or display:table http://codepen.io/anon/pen/LACnF/
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display:table;
}
body {
display:table-cell;
vertical-align:middle;
}
form {
display:table;/* shrinks to fit content */
margin:auto;
}
If you want to do a horizontal centering, just put the form inside a DIV tag and apply align="center" attribute to it. So even if the form width is changed, your centering will remain the same.
<div align="center"><form id="form_login"><!--form content here--></form></div>
UPDATE
#G-Cyr is right. align="center" attribute is now obsolete. You can use text-align attribute for this as following.
<div style="text-align:center"><form id="form_login"><!--form content here--></form></div>
This will center all the content inside the parent DIV. An optional way is to use margin: auto CSS attribute with predefined widths and heights. Please follow the following thread for more information.
How to horizontally center a in another ?
Vertical centering is little difficult than that. To do that, you can do the following stuff.
html
<body>
<div id="parent">
<form id="form_login">
<!--form content here-->
</form>
</div>
</body>
Css
#parent {
display: table;
width: 100%;
}
#form_login {
display: table-cell;
text-align: center;
vertical-align: middle;
}
if you use a negative translateX/Y width and height are not necessary and the style is really short
#form_login {
left : 50%;
top : 50%;
position : absolute;
transform : translate(-50%, -50%);
}
<form id="form_login">
<p>
<input type="text" id="username" placeholder="username" />
</p>
<p>
<input type="password" id="password" placeholder="password" />
</p>
<p>
<input type="text" id="server" placeholder="server" />
</p>
<p>
<button id="submitbutton" type="button">Se connecter</button>
</p>
</form>
Alternatively you could use display: grid (check the full page view)
body {
margin : 0;
padding : 0;
display : grid;
place-content : center;
min-height : 100vh;
}
<form id="form_login">
<p>
<input type="text" id="username" placeholder="username" />
</p>
<p>
<input type="password" id="password" placeholder="password" />
</p>
<p>
<input type="text" id="server" placeholder="server" />
</p>
<p>
<button id="submitbutton" type="button">Se connecter</button>
</p>
</form>
The accepted answer didn't work with my form, even when I stripped it down to the bare minimum and copied & pasted the code. If anyone else is having this problem, please give my solution a try. Basically, you set Top and Left to 50% as the OP did, but offset the form's container with negative margins on the top and left equal to 50% of the div's height and width, respectively. This moves the center point of the Top and Left coordinates to the center of the form. I will stress that the height and width of the form must be specified (not relative). In this example, a 300x300px form div with margins of -150px on the top and left is perfectly centered no matter the window size:
HTML
<body>
<div class="login_div">
<form class="login_form" action="#">
</form>
</div>
</body>
CSS
.login_div {
position: absolute;
width: 300px;
height: 300px;
/* Center form on page horizontally & vertically */
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
}
.login_form {
width: 300px;
height: 300px;
background: gray;
border-radius: 10px;
margin: 0;
padding: 0;
}
JSFiddle
Now, for those wondering why I used a container for the form, it's because I like to have the option of placing other elements in the form's vicinity and having them centered as well. The form container is completely unnecessary in this example, but would definitely be useful in other cases. Hope this helps!
How about using a grid? it's 2019 and support is reasonable
body {
margin: 0;
padding: 0;
background-color: red;
}
.content {
display: grid;
background-color: bisque;
height: 100vh;
place-items: center;
}
<!DOCTYPE html>
<html>
<body>
<div class="content">
<form action="#" method="POST">
<fieldset>
<legend>Information:</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
</fieldset>
<button type="button" formmethod="POST" formaction="#">Submit</button>
</form>
</div>
</body>
</html>
I suggest you using bootstrap which works perfectly:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
html, body, .container-table {
height: 100%;
}
.container-table {
display: table;
}
.vertical-center-row {
display: table-cell;
vertical-align: middle;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Page | ... </title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
</head>
<body>
<div class="container container-table">
<div class="row vertical-center-row">
<div class="text-center col-md-4 col-md-offset-4" style="">
<form id="login" action="dashboard.html" method="post">
<div class="username">
<div class="usernameinner">
<input type="text" name="username" id="username" placeholder="Login" />
</div>
</div>
<div class="password">
<div class="passwordinner">
<input type="password" name="password" id="password" placeholder="Mot de passe" />
</div>
</div>
<button id="login-button">Connexion</button>
<div class="keep"><input type="checkbox" /> Gardez moi connecté</div>
</form>
</div>
</div>
</div>
</body>
</html>
#form_login {
height:500px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<form id="form_login">
<p>
<input type="text" id="username" placeholder="username"/>
</p>
<p>
<input type="password" id="password" placeholder="password" />
</p>
<p>
<input type="text" id="server" placeholder="server" />
</p>
<p>
<button id="submitbutton" type="button">Se connecter</button>
</p>
</form>
Please don't judge me i just stared developing websites and this is my first one.
here is my website and no matter what i set position to i cant make form or images stay on there place. when using static position i cant place one image on another. so what can i do ?
<style type="text/css">
.position
{
position:Relative;
top:-40px;
left: 5px;
width:13%;
height:13%;
}
.WidthFull
{
position: static;
z-index: 0;
width: 99.4%;
}
.FormPosition
{
position: Relative;
top:-80px;
right:-1070px;
}
</style>
</head>
<body>
<img alt="" class="WidthFull" src="img/main%20Head.png" />
<img alt="" class="position" src="img/Letters%20connic.png" />
<div class=FormPosition>
<form id="login" method="post" action="index.php">
<input type="text" placeholder="Your Email" name="email" autofocus/>
<input type="text" placeholder="Password" name="email" autofocus />
<button type="submit" style="width: 5%; height: 25px; border: 0;background: #209cf8; border-radius:5px"><font size="3.0";><b>Login</b></font>
</button>
<span></span>
</form>
</div>
</body>
</html>
Use like this
outer side div property will be relative and inner image/div property will be absolute
which one you want to show up side
<style type="text/css">
.position-relative{
position:relative;
}
.position-absolute{
position:absolute;
top:10px;
left:10px;
z-index:10;
}
</style>
</head>
<body>
<div class="position-relative">
<img alt="" class="WidthFull" src="img/main%20Head.png" />
<img alt="" class="position-absolute" src="img/Letters%20connic.png" />
</div>
</body>
</html>
How can I get the dates in the center of the main div.
JSFiddle
<style>
.div_table{
display:table;
width:100%;
}
.div_table_row{
display:table-row;
width:auto;
clear:both;
}
.div_table_col{
display:table-column;
float:left;/*fix for buggy browsers*/
}
label
{
width: 10em;
text-align: left;
margin-right: 0.5em;
display: block;
}
input
{
color: #781351;
background: #fee3ad;
border: 1px solid #781351
}
</style>
<div class="div_table">
<div class="div_table_row">
<img src="./images/logo_transparent.png" width="192" height="69" alt="Logo" />
</div>
<div class="div_table_row">
<?php include_once("./include/menu.php"); ?>
</div>
<div class="div_table_row">
<div style="text-align:center">
<label>From Date:<br /><input type="text" class="date" /></label>
<label>To Date:<br /><input type="text" class="date" /></label>
</div>
</div>
<div class="footer div_table_row">All Rights Reserved</div>
</div>
Whould you like to center the labels or the input textfields?
If labels do this:
<label><span>From Date:</span><br /><input type="text" class="date" /></label>
<label><span>To Date:</span><br /><input type="text" class="date" /></label>
Put the text in the label into a span.
in CSS:
label span {
position: absolute;
left: 50%;
}
Add position: relative; to .div_table_row.
Here is my HTML:
<tr>
<td>
<div class="fileinputs">
<input type="submit" name="submit" class="submit" />
</div>
<div class="fileinputs">
<input type="file" class="file" name="uploadedfile" />
<div class="fakefile">
<img src="uf_btt.png" />
</div>
</div>
<div class="fileinputs">
<input type="reset" class="reset" />
</div>
<div class="fileinputs">
<input type="button" class="print" onclick="window.print()" />
</div>
</td>
</tr>
And here is my CSS:
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
As a result, the buttons are positioned vertically, one below the other. In IE only "Upload File" button is seen.
I need all the buttons to be positioned horizontally, one next to the other, and look consistent in all browsers.
How do I obtain that?
Thank you!
you might want to learn about CSS float. alternatively use SPAN instead of DIVS, or DIVs with 'display:inline' style