The admin login form for the website I'm building isn't working in chrome, but it works fine in IE. What could be causing this? I found one other question on here about a similar issue, but its answers didn't work for me.
Preview: http://a.emutek.net/site/admin/
HTML:
<div id="body">
<div class="divhead" id="adminhead">Login to website management:</div>
<div id="adminlogin">
<form name="adminlogon" action="login.do.php" method="post">
<table border="0">
<tr>
<td>
Username:
</td>
<td>
<input type="text" name="user">
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<input type="password" name="pwd">
</td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
</div>
</div>
CSS:
#body {
z-index: -1;
position: relative;
top: -6px;
padding: 7px;
background-color: white;
border-radius: 6px;
}
.divhead{
background-color: #111;
color: #CCC;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
padding: 3px;
margin-bottom: 5px;
border-radius: 6px;
}
#head{
border-radius: 6px;
margin-bottom: -10px;
padding: 5px;
background-image:url('../img/bg_header.png');
}
#adminlogin{
margin-left: 40%;
z-index: 10;
}
#adminhead{
margin-top: 20px;
margin-bottom: 10px;
width: 700px;
margin-right: auto;
margin-left: auto;
padding-left: 20px;
}
remove the position: relative; in #body it will work
you can see the cursor its in chrome also tested in firefox and safari
Instead of positioning #body to get it below #nav, you should position #nav to be above #body.
#body{
position: relative;
z-index: -1;
...
}
#nav{
position: relative;
z-index: 1;
}
You need to change your z index css in the body from -1 to something positive
body {
z-index: 1111;
}
Related
Please help me, i am having a tough time with a box shadow, i've been looking for some time now and didn't find a solution
https://jsfiddle.net/4xqavefz/ .input1 / .input2 / .input3
Above is the whole code, in css you are looking for the .input1 ,.input2, and .input3
I am trying to make the box shadow to be seen through the input like below image
image
You could keep the shadow as it is (it falls outside the element) and add in the rest of the coloring with a background-image which is a linear-gradient.
This snippet puts that background-image displaced by 12px (=14px minus a border width).
#font-face {
font-family: futuraptbook;
src: url(../fonts/futuraptbook.ttf);
}
#font-face {
font-family: futuraptdemi;
src: url(../fonts/futuraptbook.ttf);
}
body {
background: black;
}
.block {
display: block;
}
.center {
margin-left: auto;
margin-right: auto;
}
.logo {
width: 185;
height: 161;
}
.p1 {
color: white;
font-size: 24px;
text-align: center;
width: 620px;
height: 63px;
line-height: 32px;
font-family: futuraptbook;
margin-bottom: 100px;
}
.th1 {
color: white;
font-size: 32px;
line-height: 43px;
font-family: futuraptdemi;
padding-bottom: 30px;
}
.age {
font-size: 15px;
text-align: left;
line-height: 20px;
font-family: futuraptdemi;
color: white;
letter-spacing: 1.5px;
}
td input[class^='input'],
td input[class^=" input"] {
width: 176px;
height: 60px;
border: 2px solid #FFFFFF;
background: rgba(0, 0, 0, 0);
background-image: linear-gradient(#54B3A1, #54B3A1);
background-position: 12px 12px;
background-repeat: no-repeat;
box-shadow: 14px 14px 0px 0px #54B3A1;
margin-right: 40px;
color: white;
font-size: 18px;
font-family: futuraptbook;
text-align: center;
}
td input[class^='input']:focus,
td input[class^=" input"] {
box-shadow: 0px 0px 0px 0px black;
width: 218px;
margin-right: -1px;
margin-left: -1px;
border-radius: 0px;
background-image: linear-gradient(transparent, transparent);
}
td input[class^='input']:valid,
td input[class^=" input"] {
box-shadow: 14px 14px 0px 0px #54B3A1;
background-image: linear-gradient(#54B3A1, #54B3A1);
background-position: 12px 12px;
background-repeat: no-repeat;
width: 218px;
margin-right: -1px;
margin-left: -1px;
border-radius: 0px;
}
.btn {
border-radius: 27px;
background: #D94016;
width: 300px;
height: 50px;
margin-top: 50px;
}
.ftr {
position: relative;
text-align: center;
width: 100%;
margin-top: 100px;
margin-bottom: 40px;
}
.under {
text-decoration: none;
position: relative;
}
.under:after {
position: absolute;
content: '';
height: 1px;
bottom: -4px;
width: 75%;
background: #54B3A1;
left: 0px;
}
.logo:hover {
cursor: pointer;
}
.cookiesdiv {
border: 1px solid white;
padding: 10px;
bottom: 0px;
width: 942px;
}
.pcook {
width: 95%;
font-size: 15px;
text-align: left;
color: white;
font-family: futuraptbook;
}
.ckbtn1 {
border-radius: 27px;
background: #54B3A1;
width: 72px;
height: 27px;
color: white;
font-family: futuraptdemi;
font-size: 13px;
}
.ckbtn2 {
border: 1px solid white;
border-radius: 27px;
background: black;
width: 134px;
height: 27px;
color: white;
font-family: futuraptdemi;
font-size: 13px;
}
<html>
<head>
<link rel="stylesheet" href="css/agev.css">
</head>
<body>
<img src="images/viennalogo.png" class="logo center block">
<div>
<p class="p1 center">Welcome! In order to continue your visit on Vienna distribution, you must be of legal drinking age.</p>
</div>
<table class="center">
<tr>
<th colspan="3" class="th1">WHEN WER<span class="under">E Y</span>OU BORN</th>
</tr>
<tr>
<td><label class="age" for="day">DAY (DD)</label></td>
<td><label class="age" for="month">MONTH (MM)</label></td>
<td><label class="age" for="year">YEAR (YYYY)</label></td>
</tr>
<tr>
<td><input type="text" class="input1" name="day" required></td>
<td><input type="text" class="input2" name="month" required></td>
<td><input type="text" class="input3" name="year" required></td>
</tr>
<tr>
<td colspan="3"><button class="btn center block">I AM OF LEGAL DRINKING AGE</button></td>
</tr>
</table>
<footer class="ftr">
<img src="images/facebooklogo.png">
<img src="images/instalogo.png">
<img src="images/twitterlogo.png">
</footer>
<div class="cookiesdiv center">
<table>
<tr>
<td>
<p class="pcook">We use cookies on our website to give you the most relevant experience. By clicking “Accept”, you consent to the use of ALL cookies. Alternatively, you may click “Cookie Settings” to provide a controlled consent.</p>
</td>
<td>
<button class="ckbtn1">ACCEPT</button>
</td>
<td>
<button class="ckbtn2">COOKIE SETTINGS</button>
</td>
</tr>
</table>
</div>
</body>
</html>
Note - to prevent having to repeat the settings for each of the 3 inputs the snippet instead selects by the class beginning with 'input'. You will want to refine that if there is more structure added later to be sure of getting the right elements.
I noted that there was no validation in the sense of making sure that the numbers typed were both numbers and of the right length, but appreciate this is a different question.
The issue is that box-shadow wraps around an element, so you cant use box-shadow here instead you should use an absolute div like in the below example
<td>
<input type="text" class="input1" name="day" required>
<div style="
position: absolute;
width: 80%;
height: 100%;
background: #54b3a1;
top: 16px;
left: 16px;
z-index: 22;
">
</div>
</td>
working example https://jsfiddle.net/ahforcuw/1/
I have tried using float, overflow, clear and yet still my html form continues floating right. My intended outcome is for the html form to remain in portrait on my mobile device when I go to fill out the form.
This is the current code for my html form:
<form name = "CommentsForm" action ="Actionpage.php" onsubmit="return
validateForm()" method="post">
<u class = "FormHeading">Send Comment</u><br>
<br>
First Name:<br>
<input type="text" name="firstname">
<br>
<div style = "position: relative; top: 4px; left: 01px;">
Last Name:<br>
<input type="text" name="lastname">
</div>
<br>
<div style = "position: relative; top: -13px; left: 1px;">
Email:<br>
<input type="text" name="email">
</div>
<br>
<div style = "position: relative; top: -24px; left:03px;">
<label for="comment"> Comment:</label></div>
<textarea id="comment" name="comment" placeholder="Type commment
here" style="height: 69px;">
</textarea>
<br>
<br>
<input type="submit" name ="submit" value="Send" >
</form>
This is the css for the html form on my mobile website:
form
{
border: 10px solid #D3D3D3;
border-radius: 4px;
background: #D3D3D3;
width: 176px;
height: 319px;
position: absolute;
top: 620px;
left: 91px;
font-family: "Arial", "Times New Roman", "Sans Serif";
font-style: normal;
text-decoration: none;
float: none;
}
.FormHeading
{
text-decoration: underline;
font-weight: bold;
position: relative;
left: 29px;
}
input[type=text]
{
width: 168px;
float: none;
}
input[type=text]:focus
{
float: none;
}
textarea
{
resize: none;
box-sizing: border-box;
position: relative;
top: -23px;
left: 01px;
width: 173px;
float: none;
}
input[type=submit]
{
background-color: #ADD8E6;
position: relative;
top: -44px;
left: 119px;
text-align: center;
}
Please note I have a HTC desire 626 and I am designing my mobile website with this in mind.
I am sharing a pen with a posible solution:
Your positions where fixed, so I made them flexible using percentages.
Let me know if its ok.
Click for Solution at codepen
form {
padding: 10px;
border-radius: 4px;
background: #d3d3d3;
width: 176px;
transform: translateX(-50%);
height: 319px;
position: absolute;
bottom: 0;
left: 50%;
font-family: "Arial", "Times New Roman", "Sans Serif";
font-style: normal;
text-decoration: none;
}
.FormHeading {
text-decoration: underline;
font-weight: bold;
position: relative;
left: 29px;
}
input[type="text"] {
width: 168px;
float: none;
}
input[type="text"]:focus {
float: none;
}
textarea {
resize: none;
box-sizing: border-box;
position: relative;
top: -23px;
left: 1px;
width: 173px;
float: none;
}
input[type="submit"] {
background-color: #add8e6;
position: relative;
top: -44px;
left: 119px;
text-align: center;
}
input[type=submit]
{
background-color: #ADD8E6;
position: relative;
top: -44px;
left: 119px;
text-align: center;
}
<form name="CommentsForm" action="Actionpage.php" onsubmit="return validateForm()" method="post">
<u class="FormHeading">Send Comment</u><br>
<br> First Name:<br>
<input type="text" name="firstname">
<br>
<div style="position: relative; top: 4px; left: 01px;">
Last Name:<br>
<input type="text" name="lastname">
</div>
<br>
<div style="position: relative; top: -13px; left: 1px;">
Email:<br>
<input type="text" name="email">
</div>
<br>
<div style="position: relative; top: -24px; left:03px;">
<label for="comment"> Comment:</label></div>
<textarea id="comment" name="comment" placeholder="Type commment here" style="height: 69px;"></textarea>
<br>
<br>
<input type="submit" name="submit" value="Send">
</form>
use your form properties like this:
form { border: 10px solid #D3D3D3; border-radius: 4px; background: #D3D3D3; width: 176px; height: 319px; position: relative; margin: 0 auto; font-family: "Arial", "Times New Roman", "Sans Serif"; font-style: normal; text-decoration: none; }
I have removed your float and made position relative and added margin: 0 auto;
I guess you are trying to keep the form in the middle of the screen? If yes, then this will work.
I can't solve this problem: If I click this button then it will appear like a pop up. How can I link to another html?
This is the out put html which is to be generated:
<html>
<body>
<fronm action="output.html" method="get">
first name:<input type="text" name:"first name"><br>
last name:<input type="text" name:"last name"><br>
moblieno:<input type="number" name:"mobileno"><br>
email:<input type ="email" name:"email"><br>
age:<input type="number" name:"age"><br>
school:<input type="text" name:"school"><br>
class:<input type="numeber/text" name:"class"><br>
<input type ="submit" value="submit">
</from>
</body>
</html>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
REGISTRATION FROM:
</title>
<style>
p1.position_left {
position: relative;
top: 20px;
down: 30px;
}
p2.position_right {
position: relative;
top: 45px;
right: -65px;
}
</style>
</head>
<body>
<table height: "200px" border: "3">
<tr>
<td colspan="3" style="background-color:#3152A5;" height="0" width="1350">
<p1 style="color:white" class="pos_left" class="thicker"><b> <FONT SIZE=8 face="fantasy">registration</FONT></b>
</p1>
</td>
</tr>
<p style="font-style:italic" "color:black" if you are willing to fillup the registration from pls click below />
<tr>
<td>
<p2>
<from method="get" action="output.html">
<button type="submit">continue</button>
</from>
<p>thanks for submission</p>
</p2>
</tr>
</td>
</body>
</html>
The button then I will pop up the sign up a from. How can I make this possible?
here is the pure css pop up
<style>
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
</style>
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
What I would like is to have a column of labels, and to the right a column of text boxes approximately a few tabs apart and all aligned on (their respective) margins.
So far I have this. However when I resize the screen my text boxes move. How can I make them fixed?
This is the CSS:
#layout {
background-color: #f5fffa;
width: 600px;
padding: 20px;
border: 5px solid black;
margin: 0 auto;
color: black;
font-family: arial;
font-size: 15px;
font-weight: bold;
}
#zero {
text-align: center;
}
#one {
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:4px solid #18ab29;
border-width: 4px;
background-color: #44c767;
color:#ffffff;
padding-left: 9em;
padding-right: 9em;
}
.myform {
width:40px;
text-align: left;
position: absolute;
right: 800px;
height: 1.5em;
}
This is the HTML:
<div id="layout">
<h1 id="zero">Title</h1>
<form id="one">
<br>
<label>input one:</label>
<input type="text" class="myform" value="0" /><br><br>
<label>input two:</label>
<input type="text" class="myform" value="0" /></br>
</br>
</form>
</div>
EDIT:
I've figured it out:
Add this:
#one label {
display: inline-block;
width: 270px;
}
And take away:
position: absolute;
right: 800px;
from
.myform {
width:40px;
text-align: left;
position: absolute;
right: 800px;
height: 1.5em;
}
try to give the label a width:
label {
width: 100px;
}
#layout {
background-color: #f5fffa;
width: 600px;
padding: 20px;
border: 5px solid black;
margin: 0 auto;
color: black;
font-family: arial;
font-size: 15px;
font-weight: bold;
}
#zero {
text-align: center;
}
#one {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
border: 4px solid #18ab29;
border-width: 4px;
background-color: #44c767;
color: #ffffff;
height: 1.5em;
}
.myform {
text-align: left;
position: absolute;
right: 800px;
}
.leftCol {
float: left;
width: 50%
}
.rightCol {
float: right;
width: 50%
}
<div id="layout">
<h1 id="zero">Title</h1>
<form id="one">
<div class="leftCol">
<label>input one:</label>
<input type="text" value="0" />
</div>
<div class="rightCol">
<label>input two:</label>
<input type="text" value="0" />
</div>
</form>
</div>
I removed the position:absolute from the inputs (because in my screen they where way of, that's why you should use it if nothing else works) and then added a margin-right on the form labels. demo;
Relevant CSS
#one label{
margin-right:10px;
}
Update
I've added a fixed width to ammend for the possibility of labels with differente text lengths, here it is:
#one label{
display:inline-block;
margin-right:10px;
width:150px;
}
You should change width:150px to whatever you want it to be :)
Hope it helps!
I'm trying to make this login page show/format correctly on every browser so far it only shows how I want it to work on IE9 on other browsers firefox/chrome the form section is on the left side and not in the middle. (The Username, Password, Pub key, and the log in button all have to be in the middle of the page and not move when the browser is re-sized.)
Can someone look at it and see what I'm doing wrong ?
Thanks for any help...
Here is the HTML CODE:
<script type="text/javascript">
// Return true if unable to open a new window
function popup_blocked() {
var popup = window.open('','_blank','toolbar=no,scrollbars=no','width=0,height=0');
if (!popup) {
return true;
} else {
popup.close();
return false;
}
}
if(popup_blocked()) {
alert('This page requires that you enabled popups in order to process and display content properly.');
} else {
//alert('POPUPS ARE ALLOWED! THANK YOU!');
}
</script>
<html><head><title>Login Page</title>
<style type="text/css">
.auto-style2 {
margin-right: 261px;
}
</style>
<style type="text/css">
.style1 {
vertical-align: top;
}
.auto-style4 {
text-align: center;
}
</style>
</head>
<style type="text/css">
* { margin: 0; padding: 0; }
body { font-family: Georgia, serif; background: url(login-page-bg.jpg) top center no-repeat #c4c4c4; color: #3a3a3a; }
.clear { clear: both; }
form { width: 406px; margin: 170px auto 0; }
legend { display: none; }
fieldset { border: 0; }
label { width: 115px; text-align: right; float: left; margin: 0 10px 0 0; padding: 9px 0 0 0; font-size: 16px; }
input { width: 220px; display: block; padding: 4px; margin: 0 0 10px 0; font-size: 18px;
color: #3a3a3a; font-family: Georgia, serif;}
input[type=checkbox]{ width: 20px; margin: 0; display: inline-block; }
.button { background: url(button-bg.png) repeat-x top center; border: 1px solid #999;
-moz-border-radius: 5px; padding: 5px; color: black; font-weight: bold;
-webkit-border-radius: 5px; font-size: 13px; width: 70px; }
.button:hover { background: white; color: black; }
.auto-style5 {
text-decoration: none;
}
.auto-style6 {
color: #3A3A3A;
}
.auto-style7 {
font-size: x-small;
}
</style>
<BODY onload="resetSession();setFocus(document.frmLogin.login);" style="margin-top: 150">
<table width=100%>
<form action="login_page.asp" method="post" name="frmLogin" class="auto-style2" style="width: 100%">
<div class="auto-style4" style="position: absolute; width: 100%; height: 174px; z-index: 1; left: 308px; top: 169px">
<input type="hidden" name="action" value="validate_login">
<table border="0" align="center">
<tr>
<td align="right">Username </td>
<td>
<input type="text" name="login" style="height: 34px">
</td>
</tr>
<tr>
<td align="right">Password </td>
<td><input name="password" style="height: 34px" type="password">
</td>
</tr>
<tr>
<td align="right">Pub Key </td>
<td><input name="pasword" style="height: 34px" type="password">
</td>
</tr>
<tr>
<td align="right">
</td>
<td>
<!--<input type="submit" VALUE="Login">-->
<input type="submit" style="margin: 0px 0 0 149px;" class="button" name="commit" value="Log in">
</td>
</tr>
</table>
</div>
</form></table>
<p class="auto-style4"><br><br>All Login Attempts are Logged.<br>
<br>
<span class="auto-style7">(11/16/2012 16:12)</span></p>
</body></html>
Your HTML is invalid (which is asking for trouble) and you have no Doctype so browsers will enter Quirks mode (which is inconsistent between browsers and intentionally buggy for compatibility with sites that were written when buggy browsers were the norm).
Add a Doctype
Perform automated QA
Also, avoid layout tables and use CSS for form layout.