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>
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
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
}
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.
i'm not very familiar with CSS, i'm trying to apply a border on my login form, here is the code i use:
login.html:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<div id="login_container">
<form action="#" method="POST">
<div class="row">
<label for="username" class="label">Username</label>
<input type="text" class="field" name="username" />
</div>
<div class="row">
<label for="password" class="label">Password</label>
<input type="password" class="field" name="password" />
</div>
</form>
</div>
css/style.css:
#login_container {
margin-top:50px;
margin-left: auto;
margin-right: auto;
width: 300px;
border:1px solid black;
display:block;
}
.field {
float:right;
margin-left: 10px;
}
label {
float:left;
}
.row{
display:block;
clear:both;
}
and the output:
Why does the border cross the password text field?
EDIT:
with
form{
border:1px solid black;
}
the output is:
Add overflow:auto; to your #login_container div.
jsFiddle example
Because the inner elements are floated, you need to specify the overflow property to bring the border back around them.
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