This is the code i have written in html/css in eclipse(kepler) by making the dynamic web application.The error i get is in line:
<style type="text/css" scoped>
error name-invalid location of tag.
<div style="text-align: center;">
<div style="box-sizing: border-box; display: inline-block; width: auto; max-width: 480px; background-color: #FFFFFF; border: 2px solid #D4D4D4; border-radius: 5px; box-shadow: 0px 0px 8px #D4D4D4; margin: 50px auto auto;">
<div style="background: #D4D4D4; border-radius: 5px 5px 0px 0px; padding: 15px;"><span style="font-family: verdana,arial; color: #D4D4D4; font-size: 1.00em; font-weight:bold;">HEY REGISTER NOW!</span></div>
<div style="background: ; padding: 15px">
<style type="text/css" scoped>
td { text-align:left; font-family: verdana,arial; color: #000000; font-size: 1.00em; }
input { border: 1px solid #CCCCCC; border-radius: 5px; color: #666666; display: inline-block; font-size: 1.00em; padding: 5px; width: 100%; }
input[type="button"], input[type="reset"], input[type="submit"] { height: auto; width: auto; cursor: pointer; box-shadow: 0px 0px 5px #D4D4D4; float: right; margin-top: 10px; }
table.center { margin-left:auto; margin-right:auto; }
.error { font-family: verdana,arial; color: #000000; font-size: 1.00em; }
</style>
<form method="post" action="crf.html" name="aform" target="_top">
<input type="hidden" name="action" value="login">
<input type="hidden" name="hide" value="">
<table class='center'>
<tr><td>Username:</td><td><input type="text" name="login"></td></tr>
<tr><td>Password:</td><td><input type="password" name="password"></td></tr>
<tr><td> </td><td><input type="submit" value="Submit"></td></tr>
<tr><td colspan=2> </td></tr>
</table>
</form>
</div></div></div>
Please help me with an appropriate solution.
Use this format
<!DOCTYPE HTML>
<html>
<head>
<title>Sample Application</title>
<style type="text/css" scoped>
td {
text-align: left;
font-family: verdana, arial;
color: #000000;
font-size: 1.00em;
}
input {
border: 1px solid #CCCCCC;
border-radius: 5px;
color: #666666;
display: inline-block;
font-size: 1.00em;
padding: 5px;
width: 100%;
}
input[type="button"],input[type="reset"],input[type="submit"] {
height: auto;
width: auto;
cursor: pointer;
box-shadow: 0px 0px 5px #D4D4D4;
float: right;
margin-top: 10px;
}
table.center {
margin-left: auto;
margin-right: auto;
}
.error {
font-family: verdana, arial;
color: #000000;
font-size: 1.00em;
}
</style>
</head>
<body>
<div style="text-align: center;">
<div
style="box-sizing: border-box; display: inline-block; width: auto; max-width: 480px; background-color: #FFFFFF; border: 2px solid #D4D4D4; border-radius: 5px; box-shadow: 0px 0px 8px #D4D4D4; margin: 50px auto auto;">
<div
style="background: #D4D4D4; border-radius: 5px 5px 0px 0px; padding: 15px;">
<span
style="font-family: verdana, arial; color: #D4D4D4; font-size: 1.00em; font-weight: bold;">HEY
REGISTER NOW!</span>
</div>
<div style="background:; padding: 15px">
<form method="post" action="crf.html" name="aform" target="_top">
<input type="hidden" name="action" value="login"> <input
type="hidden" name="hide" value="">
<table class='center'>
<tr>
<td>Username:</td>
<td><input type="text" name="login"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Submit"></td>
</tr>
<tr>
<td colspan=2> </td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
You need to put the style tag within the head tags, not the body.
Also, this line:
<div style="background: ; padding: 15px">
Should be:
<div style="padding: 15px">
Or give it a background.
All your styles should go in a separate .css file, rather than inline/same file.
It looks fine here: JSFiddle
In:
HTML 4 and Earlier
XHTML 1.x
HTML 5
The <style> element can only appear in the <head>
In:
The WHATWG Living Standard for HTML
HTML 5.1
The <style> element can appear in the <body> as well, but only if it has a scoped attribute and (IIRC) one or two other conditions are met.
Whatever tool you are using to test your markup with, is testing it against one of the languages in the first group (where it is not allowed) and not in the second group (where it is).
Given browser support for it, I would advise against using the scoped attribute at the moment.
scoped isn't a widely supported attribute (believe it's oly natively available in Firefox at the moment), also you will need to specify the DOCTYPE as HTML5 for it to work. You have two choices, use a JavaScript library to get the tag working: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin
Or use conventional styling with classes, id's and appropriate CSS selectors.
More info here: http://html5doctor.com/the-scoped-attribute/
Related
I'm building a simple Web UI for an embedded system.
I have a couple of buttons to upload a file to the server, the code of the buttons is the following
.button {
background-color: #009999;
border: 0.5px solid #F0F0F0;
border-radius: 0px;
color: white;
display: inline-block;
font-family: Open Sans, Helvetica, Arial;
font-size: 14px;
font-weight: bold;
width: 100%;
padding: 4px 4px;
text-decoration: none;
text-shadow: 0px 1px 0px #197276;
text-align: left;
}
<td style="width: 20%; vertical-align:top; background-color:#FFFFFF;">
<form action="cgi-bin/upload.cgi" method="post" enctype="multipart/form-data">
<input class="button" type="file" name="file">
<input class="button" type="submit" name="Submit" value="Upload">
</form>
</td>
The problem that I noticed is that the file buttons is always slightly bigger than the submit button.
Is there a way to align them? What am I doing wrong?
Thanks!
EDIT:
After trying Yasaman Mansouri (thanks) suggestion (overflow: hidden) i get the follwing output (on the right).
It's much better but still not aligned with the other button.
you can hide your form overflow
.button {
background-color:#009999;
border:0.5px solid #F0F0F0;
border-radius:0px;
color:white;
display:inline-block;
font-family:Open Sans, Helvetica, Arial;
font-size:14px;
font-weight:bold;
width:100%;
padding:4px 4px;
text-decoration:none;
text-shadow:0px 1px 0px #197276;
text-align:left;
}
form{
width: 200px;
overflow: hidden;
}
<td style="width: 20%; vertical-align:top; background-color:#FFFFFF;">
<form action="cgi-bin/upload.cgi" method="post" enctype="multipart/form-data">
<input class="button" type="file" name="file" >
<input class="button" type="submit" name="Submit" value="Upload">
</p>
</form>
</td>
We got it answered on Reddit, by adding "box-sizing:border-box;" to the button css
the alignment is OK.
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
.button {
background-color: #009999;
border: 0.5px solid #F0F0F0;
border-radius: 0px;
box-sizing:border-box;
color: white;
display: inline-block;
font-family: Open Sans, Helvetica, Arial;
font-size: 14px;
font-weight: bold;
width: 100%;
padding: 4px 4px;
text-decoration: none;
text-shadow: 0px 1px 0px #197276;
text-align: left;
}
Thanks!
I'm doing a course on HTML5 and am supposed to create a registration form. I am only allowed to change the .html file and not the .css file, and I managed to align all the input fields nicely, except for the "date" input field. And I have no idea how to make it the same size as others without modifying the .css file.
I have put all the parts of the form into a table, which helped align everything nicely, except for the "date" input field. Does anyone have any clue why this is happening and is there any way to align then in a different way?
Putting them in a table was my only idea.
header{
width: 100%;
height: 80px;
background-color: #cc6533;
display: inline-block;
}
header a:hover{
color: orange;
}
h1{
margin: 13px 15px 12px 13px;
color:black
}
input{
border: 1px solid #cc6533;
border-radius: 4px 0px 0px 4px;
}
form{
margin: 47px 0px 0px 34px;
}
#container{
margin-left: 11px;
width: 500px;
height: 300px;
border-radius: 4px;
border: 1px solid #cc6533
}
button{
border-radius: 4px;
border: none;
padding: 4px 9px 5px 10px;
margin: 6px 0px 0px 452px;
background-color: #cc6533;
}
select{
border-radius: 0px 4px 4px 0px;
border: none;
background-color: #cc6533;
padding: 1px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.png" type="image/png">
<title>Destiny</title>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>
Registration Form
</h1>
<main id= "container">
<form >
<table width= "100%">
<tr>
<td >Name:</td>
<td ><input type="text"></input></td>
</tr>
<tr>
<td>Date of Birth:</td>
<td><input type="date"></input></td>
</tr>
<tr>
<td>Country:</td>
<td>
<input list = "countries">
<datalist id = "countries">
<option value ="India">
<option value ="United States">
<option value ="United Kingdom">
<option value ="Australia">
<option value ="France">
</datalist>
</input></td>
</tr>
<tr>
<td>Phone number:</td>
<td><input type="tel"></input></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email"></input></td>
</tr>
<tr>
<td>website:</td>
<td><input type="url"></input></td>
</tr>
</table>
</form>
</main>
<button>
Submit
</button>
</body>
You Can Try to This Way. I Think It Will Work Properly,
header{
width: 100%;
height: 80px;
background-color: #cc6533;
display: inline-block;
}
header a:hover{
color: orange;
}
h1{
margin: 13px 15px 12px 13px;
color:black
}
input{
border: 1px solid #cc6533;
border-radius: 4px 0px 0px 4px;
}
form{
margin: 47px 0px 0px 34px;
}
#container{
margin-left: 11px;
width: 500px;
height: 300px;
border-radius: 4px;
border: 1px solid #cc6533
}
button{
border-radius: 4px;
border: none;
padding: 4px 9px 5px 10px;
margin: 6px 0px 0px 452px;
background-color: #cc6533;
}
select{
border-radius: 0px 4px 4px 0px;
border: none;
background-color: #cc6533;
padding: 1px;
}
.dateField{
width:52%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.png" type="image/png">
<title>Destiny</title>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>
Registration Form
</h1>
<main id= "container">
<form >
<table width= "100%">
<tr>
<td >Name:</td>
<td ><input type="text"></input></td>
</tr>
<tr>
<td>Date of Birth:</td>
<td><input type="date" class="dateField"></input></td>
</tr>
<tr>
<td>Country:</td>
<td>
<input list = "countries">
<datalist id = "countries">
<option value ="India">
<option value ="United States">
<option value ="United Kingdom">
<option value ="Australia">
<option value ="France">
</datalist>
</input></td>
</tr>
<tr>
<td>Phone number:</td>
<td><input type="tel"></input></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email"></input></td>
</tr>
<tr>
<td>website:</td>
<td><input type="url"></input></td>
</tr>
</table>
</form>
</main>
<button>
Submit
</button>
</body>
The other answers are pointing out the underlying problem, you need to set the correct width for your input field.
Since you write you do an HTML5 course then you should also use the correct, semantic elements. So you should use label for your input fields and if you really can't change the CSS file then use inline css. But don't use tables for aligning your inputs, that's not very HTML5.
header {
width: 100%;
height: 80px;
background-color: #cc6533;
display: inline-block;
}
header a:hover {
color: orange;
}
h1 {
margin: 13px 15px 12px 13px;
color: black
}
input {
border: 1px solid #cc6533;
border-radius: 4px 0px 0px 4px;
}
form {
margin: 47px 0px 0px 34px;
}
#container {
margin-left: 11px;
width: 500px;
height: 300px;
border-radius: 4px;
border: 1px solid #cc6533
}
button {
border-radius: 4px;
border: none;
padding: 4px 9px 5px 10px;
margin: 6px 0px 0px 452px;
background-color: #cc6533;
}
select {
border-radius: 0px 4px 4px 0px;
border: none;
background-color: #cc6533;
padding: 1px;
}
<h1>
Registration Form
</h1>
<main id="container">
<form>
<div style="display:flex; margin-bottom: 7px;">
<label for="name" style="width: 35%">Name:
</label>
<input id="name" style="width: 40%">
</div>
<div style="display:flex; margin-bottom: 7px;">
<label for="dob" style="width: 35%">Date of Birth
</label>
<input id="dob" type="date" style="width: 40%">
</div>
<div style="display:flex; margin-bottom: 7px;">
<label for="country" style="width: 35%">Country:</label>
<input list="countries" id="country" style="width: 40%">
<datalist id="countries">
<option value="India">
<option value="United States">
<option value="United Kingdom">
<option value="Australia">
<option value="France">
</datalist>
</div>
<div style="display:flex; margin-bottom: 7px;">
<label for="phone" style="width: 35%">Phone number:</label>
<input type="tel" style="width: 40%" id="phone">
</div>
<div style="display:flex; margin-bottom: 7px;">
<label for="mail" style="width: 35%">Email:</label>
<input type="email" id="mail" style="width: 40%">
</div>
<div style="display:flex; margin-bottom: 7px;">
<label for="website" style="width: 35%">website:</label>
<input type="url" id="website" style="width: 40%">
</div>
</form>
</main>
<button>
Submit
</button>
just add style tag in your html as shown below.
and here is the link to codepen for your example.
<head>
<link rel="icon" href="favicon.png" type="image/png">
<title>Destiny</title>
<link href="mystyle.css" rel="stylesheet" type="text/css">
<style>
input{
display:block;
width:50%;
}
</style>
</head>
Use same with for all inputs,
suppose, you given width:400px to all inputs, now use code for <input type="date" />
input[type="date"]{
width:calc(400px +1px);
}
The layout of my form is three columns: the first the label, the second for the input, and the third for the units (cm, kg etc.). Everything has been given inside a table in the form. But the first column takes more more (horizontal) space than it should. It has no padding, margin nor border. Here's my code:
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
color: #222222;
}
table {
width: 100%;
white-space: nowrap;
}
input {
background-color: #DACBDF;
padding: 8px 10px 8px 10px;
width: 91.5%;
font-family: Georgia;
font-size: 13px;
border: 1px solid #EEEEEE;
}
input:hover {
border: 1px solid green;
}
input:focus {
background-color: #DACBFF;
border: 1px solid #FF0000;
}
input[type="submit"] {
font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: 8px 15px 8px 15px;
width: auto;
border: 1px solid #EEEEEE;
color: #222222;
}
input[type="submit"]:hover {
background: #4691A4;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
#wgCalc, #hsCalc, #bfCalc, #ccCalc, #apCalc {
height: 33px;
width: 16.5%;
z-index: 2;
float: left;
margin-left: 8px;
}
#container {
background-color: #EEEEEE;
padding: 10px 10px 10px 10px;
border: 3px solid #888888;
width: 30%;
z-index: 1;
margin: 0px auto;
}
#container h3 {
text-align: center;
}
.menu {
width: 30%;
height: 35px;
margin: 60px auto;
margin-bottom: 0px;
}
.tabOn {
background-color: #EEEEEE;
border-bottom: 3px solid #EEEEEE !important;
border: 2px solid blue;
font-weight: bold;
text-align: center;
}
.tabOff {
background-color: #BBBBBB;
border-bottom: 3px solid #888888 !important;
border: 2px solid navy;
text-align: center;
}
.tabOff a {
color: #4422FF;
text-decoration: none;
}
.tabOff a:hover {
color: #4691A4;
}
.image-holder {
width: 40%;
margin: 0px auto;
}
.warning {
font-weight: bold;
color: #FF0000;
}
.result {
font-weight: bold;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Body Fat Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="fcalc.js"></script>
</head>
<body>
<div class="menu">
<div id="wgCalc" class="tabOff">Weight Goal</div>
<div id="hsCalc" class="tabOff">How Sexy</div>
<div id="bfCalc" class="tabOn">Body Fat</div>
<div id="ccCalc" class="tabOff">Circ. Expect.</div>
<div id="apCalc" class="tabOff">Absolute Power</div>
</div>
<div id="container">
<div class="image-holder">
<img src="EnData.png" width="100%" />
</div>
<h3>BODY FAT CALCULATOR</h3>
<form id="bodyFatCalc" name="bodyFatCalc" method="post" autocomplete="off" onSubmit="formData(); return false;">
<table>
<tr>
<td><label>Height:</label></td>
<td><input type="text" id="height" name="height" value="" maxlength="5" /></td>
<td>cm</td>
</tr><tr>
<td><label>Navel:</label></td>
<td><input type="text" id="navel" name="navel" value="" maxlength="5" /></td>
<td>cm</td>
</tr><tr>
<td><label>Neck:</label></td>
<td><input type="text" id="neck" name="neck" value="" maxlength="4" /></td>
<td>cm</td>
</tr><tr>
<td><label>Weight:</label></td>
<td><input type="text" id="weight" name="weight" value="" maxlength="4" /></td>
<td>kg</td>
</tr><tr>
<td></td>
<td><input type="submit" id="calculate" name="calculate" value="Calculate" /></td>
<td></td>
</tr>
</table>
</form>
<p id="warning" class="warning"></p>
<p id="result_p" class="result"></p>
<p id ="result_w" class="result"></p>
</div></body>
</html>
Can you please help me find out why?
BTW, I tried giving td {width: auto} but it only worsened the case.
UPDATE: It seems my question is not clear and concise enough. What I want is that td tags to take the width of whatever is inside them...
What you are asking for is not possible.
If your table is set to have a width:100% then the tds will widen-up to take up the space available so that the table is using its prescribed width.
What you might have to do is define which columns need to have a variable width and which ones will be static. (you cannot have it both ways)
Something along the lines of:
tr > td:last-of-type, tr > td:first-of-type {
width: 50px !important; /* adjust width as necessary to fit longest word */
}
/* changed this to 'input' */
input{
width: 95%;
/* other properties */
}
I reduced your given code to a MCVE.
See running demo:
table {
width: 100%;
white-space: nowrap;
}
input {
background-color: #DACBDF;
padding: 8px 10px 8px 10px;
width: 95%;
font-family: Georgia;
font-size: 13px;
border: 1px solid #EEEEEE;
}
input:hover {
border: 1px solid green;
}
input:focus {
background-color: #DACBFF;
border: 1px solid #FF0000;
}
input[type="submit"] {
font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: 8px 15px 8px 15px;
width: auto;
border: 1px solid #EEEEEE;
color: #222222;
}
input[type="submit"]:hover {
background: #4691A4;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
tr > td:last-of-type, tr > td:first-of-type {
width: 50px !important; /* adjust width as necessary to fit longest word */
}
<table>
<tr>
<td><label>Height:</label></td>
<td><input type="text" id="height" name="height" value="" maxlength="5" /></td>
<td>cm</td>
</tr>
<tr>
<td><label>Navel:</label></td>
<td><input type="text" id="navel" name="navel" value="" maxlength="5" /></td>
<td>cm</td>
</tr>
<tr>
<td><label>Neck:</label></td>
<td><input type="text" id="neck" name="neck" value="" maxlength="4" /></td>
<td>cm</td>
</tr>
<tr>
<td><label>Weight:</label></td>
<td><input type="text" id="weight" name="weight" value="" maxlength="4" /></td>
<td>kg</td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="calculate" name="calculate" value="Calculate" /></td>
<td></td>
</tr>
</table>
If you add border-collapse: collapse; to table, that helps a little bit...:
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
color: #222222;
}
table {
width: 100%;
white-space: nowrap;
border-collapse: collapse;
}
input {
background-color: #DACBDF;
padding: 8px 10px 8px 10px;
width: 91.5%;
font-family: Georgia;
font-size: 13px;
border: 1px solid #EEEEEE;
}
input:hover {
border: 1px solid green;
}
input:focus {
background-color: #DACBFF;
border: 1px solid #FF0000;
}
input[type="submit"] {
font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: 8px 15px 8px 15px;
width: auto;
border: 1px solid #EEEEEE;
color: #222222;
}
input[type="submit"]:hover {
background: #4691A4;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
#wgCalc, #hsCalc, #bfCalc, #ccCalc, #apCalc {
height: 33px;
width: 16.5%;
z-index: 2;
float: left;
margin-left: 8px;
}
#container {
background-color: #EEEEEE;
padding: 10px 10px 10px 10px;
border: 3px solid #888888;
width: 30%;
z-index: 1;
margin: 0px auto;
}
#container h3 {
text-align: center;
}
.menu {
width: 30%;
height: 35px;
margin: 60px auto;
margin-bottom: 0px;
}
.tabOn {
background-color: #EEEEEE;
border-bottom: 3px solid #EEEEEE !important;
border: 2px solid blue;
font-weight: bold;
text-align: center;
}
.tabOff {
background-color: #BBBBBB;
border-bottom: 3px solid #888888 !important;
border: 2px solid navy;
text-align: center;
}
.tabOff a {
color: #4422FF;
text-decoration: none;
}
.tabOff a:hover {
color: #4691A4;
}
.image-holder {
width: 40%;
margin: 0px auto;
}
.warning {
font-weight: bold;
color: #FF0000;
}
.result {
font-weight: bold;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Body Fat Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="fcalc.js"></script>
</head>
<body>
<div class="menu">
<div id="wgCalc" class="tabOff">Weight Goal</div>
<div id="hsCalc" class="tabOff">How Sexy</div>
<div id="bfCalc" class="tabOn">Body Fat</div>
<div id="ccCalc" class="tabOff">Circ. Expect.</div>
<div id="apCalc" class="tabOff">Absolute Power</div>
</div>
<div id="container">
<div class="image-holder">
<img src="EnData.png" width="100%" />
</div>
<h3>BODY FAT CALCULATOR</h3>
<form id="bodyFatCalc" name="bodyFatCalc" method="post" autocomplete="off" onSubmit="formData(); return false;">
<table>
<tr>
<td><label>Height:</label></td>
<td><input type="text" id="height" name="height" value="" maxlength="5" /></td>
<td>cm</td>
</tr><tr>
<td><label>Navel:</label></td>
<td><input type="text" id="navel" name="navel" value="" maxlength="5" /></td>
<td>cm</td>
</tr><tr>
<td><label>Neck:</label></td>
<td><input type="text" id="neck" name="neck" value="" maxlength="4" /></td>
<td>cm</td>
</tr><tr>
<td><label>Weight:</label></td>
<td><input type="text" id="weight" name="weight" value="" maxlength="4" /></td>
<td>kg</td>
</tr><tr>
<td></td>
<td><input type="submit" id="calculate" name="calculate" value="Calculate" /></td>
<td></td>
</tr>
</table>
</form>
<p id="warning" class="warning"></p>
<p id="result_p" class="result"></p>
<p id ="result_w" class="result"></p>
</div></body>
</html>
table{table-layout: fixed;}
td:first-of-type{width: your-width;}
What I want is to make my page a little responsive for desktop browsers.
For example, when I decrease the width of the browser, the left and right portion of the page should be stacked over each other. Please check the code, you'll understand. The outerLeft and outerRight div are floated left and right respectively. When I decrease the width of browser, outerRight goes below outerLeft, which is good. But then the problem is with footer and copyright (last two divs at bottom) divs. These do not get displaced because of the outerRight div. I want them to be below outerRight. How can I do this?
HTML:
<body style="margin: 0px">
<div class="outer">
<div id="header"></div>
<div class="outerLeft">
<h1><a style="text-decoration: none; color: white;" href="login.php">WinkCage</a></h1>
<br />
<p>Instant Messaging web application</p>
</div>
<div class="outerRight">
<div class="loginform">
<form name="form2" method="post">
<table>
<tr>
<td><input type="text" name="uname" placeholder="Username" required/></td>
<td><input type="password" name="pass" placeholder="Password" required/></td>
<td><input id="logbutton" type="submit" name="sub" value="Login"/></td>
</tr>
</table>
</form>
<p><?php echo $loginerror; ?></p>
</div>
<div class="signform">
<form id="signupform" name="form1" method="post" enctype="multipart/form-data">
<table>
<tr>
<td><input type="text" name="name" placeholder="Enter your name" required /></td>
<td rowspan="3"><div class="propic"><img id="imgid" src="images/dp.png" /></div>
<input id="imgInput" type="file" name="image" required/></td>
</tr>
<tr>
<td><input type="text" name="username" placeholder="Enter username" required pattern="[a-zA-Z0-9]{6,}" title="The username must contain minimum 6 and ONLY alphanumeric characters."/></td>
</tr>
<tr>
<td><input id="digits" type="text" name="phone" maxlength="10" placeholder="Enter your phone no." pattern=".{10}" required title="Invalid entry. Minimum 10 digits are required."/></td>
</tr>
<tr>
<td><input id="typechange" type="password" name="password" maxlength="12" placeholder="Enter password" required pattern="[a-zA-Z0-9]{5,}" title="The password must contain at least 5 and ONLY alphanumeric characters."/>
<div id="seepass"></div></td>
<td><input type="submit" id="button" name="submit" value="Sign Up"></td>
</tr>
</table>
</form>
<div id="userexist"></div>
<div style="clear: both"></div>
</div>
</div>
<div style="clear: both"></div>
</div>
<div style="font-family: calibri; text-align: center; color: black; font-size: 16px; padding: 5px 0px 5px 0px;"><a style="text-decoration: none; color: black; display: block;" href="login.php">WinkCage © 2016</a></div>
<div style="height: 7px; box-shadow: 0px 0px 1px 1px grey; background-color: white; display: block"></div>
</body>
CSS:
html, body{
height: 100%;
background-color: aquamarine;
}
#header{
height: 20%;
}
.outer{
max-width: 1024px;
margin: 0 auto;
height: 94%;
display: block;
}
.outerLeft{
float: left;
width: 320px;
height: auto;
text-align: center;
margin-top: 145px;
padding-left: 50px;
}
.outerRight{
padding-left: 50px;
float: left;
width: auto;
height: auto;
}
.loginform{
height: auto;
width: 480px;
box-shadow: 0px 0px 15px 0px grey;
border-radius: 3px;
padding: 20px 20px 20px 23px;
background-color: white;
color: red;
}
.loginform input{
width: 187px;
height: 21px;
padding-left: 5px;
}
#logbutton{
background-color: #00CC66;
color: white;
font-weight: bold;
width: 70px;
height: 28px;
cursor: pointer;
}
.signform{
margin-top: 20px;
margin-left: 0px;
height: auto;
width: 480px;
box-shadow: 0px 0px 15px 0px grey;
border-radius: 3px;
padding: 20px 20px 10px 20px;
background-color: white;
}
.signform input{
width: 250px;
height: 24px;
font-size: 20px;
padding: 5px 10px 5px 10px;
margin-bottom: 10px;
}
#button{
background-color: #0099FF;
color: white;
width: 188px !important;
height: 41px !important;
border-radius: 4px;
border: 0px solid grey;
display: block;
font-weight: bold;
margin-left: 10px;
cursor: pointer;
box-shadow: inset 0px 0px 4px grey;
text-shadow: 1px 1px 2px black;
}
.propic{
height: 100px;
width: 100px;
margin: 0 auto;
border: 4px solid white;
box-shadow: 0px 0px 1px 1px grey;
border-radius: 2px;
background-color: grey;
}
#imgInput{
width: 187px !important;
height: 22px !important;
font-size: 14px;
padding: 0px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #cccccc;
margin-left: 10px;
}
#imgid{
height: 100px;
width: 100px;
}
You need to give it a clear: both just this!
<div style="font-family: calibri;text-align: center;color: black;font-size: 16px;padding: 5px 0px 5px 0px;clear: both;"><a style="text-decoration: none; color: black; display: block;" href="login.php">WinkCage © 2016</a></div>
jsFiddle
Note: I suggest you to do not use inline-css
Not sure what you want..
Since you have an element with height 94% - I'd say you always want to see that footer (being fixed on the bottom..) and generate the scroll just for that outer element.
If that's what you want, you can just include an overflow: auto in the .outer class.
.outer {
max-width: 1024px;
margin: 0 auto;
height: 94%;
display: block;
overflow: auto;
}
Take a look here..
https://jsfiddle.net/uvqk4eeL/1/
ok so im working on a website for a friend and she is wanting a login that when they login and if the information is correct it will redirect them to that page and only members could see that page. so far this is the what i have.
<div style="text-align: center;">
<div style="box-sizing: border-box; display: inline-block; width: auto; max-width: 480px; background-color: #FFFFFF; border: 2px solid #0361A8; border- radius: 5px; box-shadow: 0px 0px 8px #0361A8; margin: 50px auto auto;">
<div style="background: #0361A8; border-radius: 5px 5px 0px 0px; padding: 15px;"><span style="font-family: verdana,arial; color: #D4D4D4; font-size: 1.00em; font-weight:bold;">Login to Members Section</span></div>
<div style="background: ; padding: 15px">
<style type="text/css" scoped="">
td { text-align:left; font-family: verdana,arial; color: #064073; font-size: 1.00em; }
input { border: 1px solid #CCCCCC; border-radius: 5px; color: #666666; display: inline-block; font-size: 1.00em; padding: 5px; width: 100%; }
input[type="button"], input[type="reset"], input[type="submit"] { height: auto; width: auto; cursor: pointer; box-shadow: 0px 0px 5px #0361A8; float: right; text-align:right; margin-top: 10px; margin-left:7px;}
table.center { margin-left:auto; margin-right:auto; }
.error { font-family: verdana,arial; color: #D41313; font-size: 1.00em; }
</style>
<form method="post" action="http://www.authpro.com/auth/deluxe/" name="aform" target="_top">
<input type="hidden" name="action" value="login">
<input type="hidden" name="hide" value="">
<table class='center'>
<tr><td>Login:</td><td><input type="text" name="login"></td></tr>
<tr><td>Password:</td><td><input type="password" name="password"></td> </tr>
<tr><td> </td><td><input type="submit" value="Login"></td></tr>
<tr><td colspan="2"> </td></tr>
<tr><td colspan="2">Lost your username or password? Find it here!</td></tr>
<tr><td colspan="2">Not member yet? Click here to register. </td></tr>
</table>
</form>
</div></div></div>
every thing is working like it should. The script that is run when you press the login but is what will redirect you