I am facing troubles with sessions codes
here is login code:
<?php
/**
* #author Mina Wilson
* #copyright 2012
* // EPCI Pharma Survey | Rights Reserved
*/
// Inialize session
session_start();
// Check, if user is already login, then jump to secured page
if (isset($_SESSION['name'])) {
header('Location: login_process.php');
}
?>
<?php $login="login_process.php" ?>
<!DOCTYPE html>
<html>
<head>
<title>EPCI Pharma Survey</title>
<style>
html, body
{
height: 100%;
}
body
{
font: 12px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;
margin: 0;
background-color: #d9dee2;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebeef2), to(#d9dee2));
background-image: -webkit-linear-gradient(top, #ebeef2, #d9dee2);
background-image: -moz-linear-gradient(top, #ebeef2, #d9dee2);
background-image: -ms-linear-gradient(top, #ebeef2, #d9dee2);
background-image: -o-linear-gradient(top, #ebeef2, #d9dee2);
background-image: linear-gradient(top, #ebeef2, #d9dee2);
}
/*--------------------*/
#login
{
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background-image: -webkit-linear-gradient(top, #fff, #eee);
background-image: -moz-linear-gradient(top, #fff, #eee);
background-image: -ms-linear-gradient(top, #fff, #eee);
background-image: -o-linear-gradient(top, #fff, #eee);
background-image: linear-gradient(top, #fff, #eee);
height: 240px;
width: 400px;
margin: -150px 0 0 -230px;
padding: 30px;
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow:
0 0 2px rgba(0, 0, 0, 0.2),
0 1px 1px rgba(0, 0, 0, .2),
0 3px 0 #fff,
0 4px 0 rgba(0, 0, 0, .2),
0 6px 0 #fff,
0 7px 0 rgba(0, 0, 0, .2);
-moz-box-shadow:
0 0 2px rgba(0, 0, 0, 0.2),
1px 1px 0 rgba(0, 0, 0, .1),
3px 3px 0 rgba(255, 255, 255, 1),
4px 4px 0 rgba(0, 0, 0, .1),
6px 6px 0 rgba(255, 255, 255, 1),
7px 7px 0 rgba(0, 0, 0, .1);
box-shadow:
0 0 2px rgba(0, 0, 0, 0.2),
0 1px 1px rgba(0, 0, 0, .2),
0 3px 0 #fff,
0 4px 0 rgba(0, 0, 0, .2),
0 6px 0 #fff,
0 7px 0 rgba(0, 0, 0, .2);
}
#login:before
{
content: '';
position: absolute;
z-index: -1;
border: 1px dashed #ccc;
top: 5px;
bottom: 5px;
left: 5px;
right: 5px;
-moz-box-shadow: 0 0 0 1px #fff;
-webkit-box-shadow: 0 0 0 1px #fff;
box-shadow: 0 0 0 1px #fff;
}
/*--------------------*/
h1
{
text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
text-transform: uppercase;
text-align: center;
color: #666;
margin: 0 0 30px 0;
letter-spacing: 4px;
font: normal 26px/1 Verdana, Helvetica;
position: relative;
}
h1:after, h1:before
{
background-color: #777;
content: "";
height: 1px;
position: absolute;
top: 15px;
width: 120px;
}
h1:after
{
background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
background-image: -webkit-linear-gradient(left, #777, #fff);
background-image: -moz-linear-gradient(left, #777, #fff);
background-image: -ms-linear-gradient(left, #777, #fff);
background-image: -o-linear-gradient(left, #777, #fff);
background-image: linear-gradient(left, #777, #fff);
right: 0;
}
h1:before
{
background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
background-image: -webkit-linear-gradient(right, #777, #fff);
background-image: -moz-linear-gradient(right, #777, #fff);
background-image: -ms-linear-gradient(right, #777, #fff);
background-image: -o-linear-gradient(right, #777, #fff);
background-image: linear-gradient(right, #777, #fff);
left: 0;
}
/*--------------------*/
fieldset
{
border: 0;
padding: 0;
margin: 0;
}
/*--------------------*/
#inputs input
{
background: #f1f1f1 url(http://www.red-team-design.com/wp-content/uploads/2011/09/login-sprite.png) no-repeat;
padding: 15px 15px 15px 30px;
margin: 0 0 10px 0;
width: 353px; /* 353 + 2 + 45 = 400 */
border: 1px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
}
#username
{
background-position: 5px -2px !important;
}
#password
{
background-position: 5px -52px !important;
}
#inputs input:focus
{
background-color: #fff;
border-color: #e8c291;
outline: none;
-moz-box-shadow: 0 0 0 1px #e8c291 inset;
-webkit-box-shadow: 0 0 0 1px #e8c291 inset;
box-shadow: 0 0 0 1px #e8c291 inset;
}
/*--------------------*/
#actions
{
margin: 25px 0 0 0;
}
#submit
{
background-color: #ffb94b;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fddb6f), to(#ffb94b));
background-image: -webkit-linear-gradient(top, #fddb6f, #ffb94b);
background-image: -moz-linear-gradient(top, #fddb6f, #ffb94b);
background-image: -ms-linear-gradient(top, #fddb6f, #ffb94b);
background-image: -o-linear-gradient(top, #fddb6f, #ffb94b);
background-image: linear-gradient(top, #fddb6f, #ffb94b);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border-width: 1px;
border-style: solid;
border-color: #d69e31 #e3a037 #d5982d #e3a037;
float: left;
height: 35px;
padding: 0;
width: 120px;
cursor: pointer;
font: bold 15px Arial, Helvetica;
color: #8f5a0a;
}
#submit:hover,#submit:focus
{
background-color: #fddb6f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffb94b), to(#fddb6f));
background-image: -webkit-linear-gradient(top, #ffb94b, #fddb6f);
background-image: -moz-linear-gradient(top, #ffb94b, #fddb6f);
background-image: -ms-linear-gradient(top, #ffb94b, #fddb6f);
background-image: -o-linear-gradient(top, #ffb94b, #fddb6f);
background-image: linear-gradient(top, #ffb94b, #fddb6f);
}
#submit:active
{
outline: none;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#submit::-moz-focus-inner
{
border: none;
}
#actions a
{
color: #3151A2;
float: right;
line-height: 35px;
margin-left: 10px;
}
/*--------------------*/
#back
{
display: block;
text-align: center;
position: relative;
top: 60px;
color: #999;
}
</style>
</head>
<body>
<form action="<?php echo $login; ?>" class="input" method="post" id="login">
<h1>EPCI Pharma Login</h1>
<fieldset id="inputs">
<input id="Name" name="name" type="text" placeholder="Name" autofocus required>
<input id="Password" name="password" type="password" placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Log in">
Forgot your password?Register
</fieldset>
Back to article...
</form>
</body>
</html>
and here is login_process.php
<?php
session_start();
$host="localhost"; // Host name
$username="ebarea_epic"; // Mysql username
$password="..."; // Mysql password
$db_name="ebarea_epic"; // Database name
$tbl_name="medicalrep"; // Table name
// Connect to server and select databse.
mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");
// username and password sent from form
$name=$_POST['name'];
$password=$_POST['password'];
// To protect MySQL injection (more detail about MySQL injection)
$name = stripslashes($name);
$password = stripslashes($password);
$job_title= stripslashes ($job_title);
$name = mysql_real_escape_string($name);
$password = mysql_real_escape_string($password);
$sql="SELECT * FROM $tbl_name WHERE name='$name' and password='$password'";
$result=mysql_query($sql);
$num_results = mysql_num_rows($result);
$array = mysql_fetch_array($result);
$_SESSION['name']=$array['name'];
$_SESSION['password']=$array['password'];
// Mysql_num_row is counting table row
$count=mysql_num_rows($result);
// If result matched $username and $password, table row must be 1 row
if($count==1){
$_SESSION['name']=$_POST['name'];
$_SESSION['password']=$_POST['password'];
if ($array['job_title']=="user")
{ header ("location: userpage.php"); }
else if ($array['job_title']=="admin")
{ header ("location: adminpage.php"); }
}
else if ($name=="ahmedkamal8989#Epci" && $password=="epcisurvey2012#ahmed")
{ header ("location: adminpage.php"); }
else {
echo "Wrong user or password";
}
?>
if the user and password are wrong, it shows " Wrong user and password ", by refresh the login form again it redirects me to login_process.php with message " Wrong user or password "
I've tried to change the echo to header and the location of the login form, but it caused a redirect loop
Now what's the problem!
You should be redirecting after every form post.
In this case, in login_process.php, instead of echoing "Wrong password" you should be setting a session variable something like:
$_SESSION['message'] = "Wrong password";
Then redirect them back to the login page like this:
header("Location:/login.php", TRUE, 303);
On your login.php page, you should have something like this:
<?php echo $_SESSION['message']; unset($_SESSION['message']); ?>
Let me start with the important things in your PHP file
// username and password sent from form
$name=$_POST['name']; //Save the post in $name
$password=$_POST['password']; //Save the post in $password
$sql="SELECT * FROM $tbl_name WHERE name='$name' and password='$password'";
$result=mysql_query($sql);
$num_results = mysql_num_rows($result);
$array = mysql_fetch_array($result);
$_SESSION['name']=$array['name']; //OK you save the name in SESSION without knowing if the user has submitted the right login information
$_SESSION['password']=$array['password']; //OK you save the password in SESSION without knowing if the user has submitted the right login information
// Mysql_num_row is counting table row
$count=mysql_num_rows($result); //count always has to be 1 else failed login information
if($count==1){
$_SESSION['name']=$_POST['name']; //WHAT!?! override the SESSION with the post? without escaping?
$_SESSION['password']=$_POST['password']; //Same here!?!?!
//Now you decide the job_title
if ($array['job_title']=="user")
{ header ("location: userpage.php"); }
else if ($array['job_title']=="admin")
{ header ("location: adminpage.php"); }
}
else if ($name=="ahmedkamal8989#Epci" && $password=="epcisurvey2012#ahmed")
{ header ("location: adminpage.php"); }
else {
echo "Wrong user or password";
}
?>
So i made this code above like this
<?php
session_start();
$host="localhost"; // Host name
$username="ebarea_epic"; // Mysql username
$password="..."; // Mysql password
$db_name="ebarea_epic"; // Database name
$tbl_name="medicalrep"; // Table name
// Connect to server and select databse.
mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");
// username and password sent from form
$name=mysql_real_escape_string($_POST['name']);
$password=mysql_real_escape_string($_POST['password']);
$sql="SELECT `job_title` FROM $tbl_name WHERE name='$name' and password='$password' LIMIT 1";
$result = mysql_query($sql);
$num_results = mysql_num_rows($result);
if($num_results ==1)
{
$_SESSION['name']=$name;
$_SESSION['password']=$password;
$_SESSION['job_title']=$result[0];
switch($result[0])
{
case 'user':
$direct = 'userpage';
break;
case 'admin':
$direct = 'adminpage';
break;
default:
if ($name=="ahmedkamal8989#Epci" && $password=="epcisurvey2012#ahmed")
{
$direct = 'adminpage';
}
else
{
echo 'Wrong user or password';
die();
}
break;
}
header('location: '.$direct.'.php');
die();
?>
I didnt test this, but i hope you can fixed the bugs yourself ;)
Related
I am using a search box to show the result from the database using jquery ajax function to show the result. The result showing correctly but a link is not working.
The <a link is not working
Script
$("#searchid").click(function() {
$('#results').find('li').remove();
$.ajax({
url: '<?php echo base_url()?>Home/search1',
type: 'POST',
dataType: "json",
//data: {},
success: function(response) {
//$('#results').html(data);
for (i = 0; i < response.length; i++) {
$("#results").append("<li><a href='" + response[i].name + "'>" + response[i].name + "</a></li>");
}
},
error: function() {
alert("Fail");
}
});
return false;
});
$("#searchid").keyup(function() {
var searchid = $(this).val();
$('#results').find('li').remove();
//var dataString = 'search='+ searchid;
if (searchid != '') {
//alert("hello");
$.ajax({
url: '<?php echo base_url()?>Home/search1',
type: 'POST',
dataType: "json",
data: {
searchid: searchid
},
success: function(response) {
//$('#results').html(data);
for (i = 0; i < response.length; i++) {
$("#results").append("<li><a href='" + response[i].name + "'>" + response[i].name + "</a></li>");
}
},
error: function() {
alert("Fail");
}
});
}
return false;
});
< /script>
CSS
body {
background: #f7f7f7;
color: #404040;
font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 20px;
}
a {
color: #1e7ad3;
}
a:hover {
text-decoration: underline
}
.main {
margin-top: 50px
}
input {
font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
color: #555860;
}
#search {
position: relative;
margin: 0 auto;
}
#search input {
width: 100%;
border-width: 1px;
border-style: solid;
border-color: #a8acbc #babdcc #c0c3d2;
border-radius: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}
#search input:focus {
outline: none;
border-color: #66b1ee;
-webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}
#search input:focus + #results {
display: block
}
#search #results {
display: none;
position: absolute;
top: 65px;
left: 0;
right: 0;
z-index: 10;
padding: 0;
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #cbcfe2 #c8cee7 #c4c7d7;
border-radius: 3px;
background-color: #fdfdfd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
background-image: linear-gradient(top, #fdfdfd, #eceef4);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
#search #results li {
display: block
}
#search #results li:first-child {
margin-top: -1px
}
#search #results li:first-child:before,
#search #results li:first-child:after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -5px;
border: 5px outset transparent;
}
#search #results li:first-child:before {
border-bottom: 5px solid #c4c7d7;
top: -11px;
}
#search #results li:first-child:after {
border-bottom: 5px solid #fdfdfd;
top: -10px;
}
#search #results li:first-child:hover:before,
#search #results li:first-child:hover:after {
display: none
}
#search #results li:last-child {
margin-bottom: -1px
}
#search #results a {
display: block;
position: relative;
margin: 0 -1px;
padding: 6px 40px 6px 10px;
color: #808394;
font-weight: 500;
text-shadow: 0 1px #fff;
border: 1px solid transparent;
border-radius: 3px;
}
#search #results a span {
font-weight: 200
}
#search #results a:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -9px;
background: url("http://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat;
}
#search #results a:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border-color: #2380dd #2179d5 #1a60aa;
background-color: #338cdf;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
background-image: linear-gradient(top, #59aaf4, #338cdf);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
:-moz-placeholder {
color: #a7aabc;
font-weight: 200;
}
::-webkit-input-placeholder {
color: #a7aabc;
font-weight: 200;
}
.lt-ie9 #search input {
line-height: 26px
}
HTML
<form id="search" method="post" action="index.html">
<input type="text" name="q" id="searchid" class="form-control" placeholder="Search for event, hotel, restaurant, job ... " />
<ul id="results">
</ul>
</form>
Perhaps you are adding the name instead of the URL as the href attribute?
$("#results").append("<li><a href='" + response[i].name + "'>" + response[i].name + "</a></li>");
I have a profile page and under my photo i have a like button with a counter and i want when i hit like, the text for like button to be setted with "unlike" but the counter to stay there with all like's that profile page have from all the users & when i hit unlike to take my like back.
I'm begginer and i messed-up with the code, so please help, i will apreciate,thanks!
This is what i have so far: likes.js
$(document).ready(function(){
$(document).on('click', '.like', function(){
if($(this).attr('title') == 'Like'){
$that = $(this);
$.post('action.php', {id:$(this).attr('id'), action:'like'},function(){
$that.text('Unlike');
$that.attr('title','Unlike');
});
}else{
if($(this).attr('title') == 'Unlike'){
$that = $(this);
$.post('action.php', {id:$(this).attr('id'), action:'unlike'},function(){
$that.text('Like');
$that.attr('title','Like');
});
}
}
});
});
Php count process file:
<?php
require_once "config.php";
$id=$user->filter->id; //User id
$sql=$dbh->prepare("SELECT * FROM likes WHERE id=?");
$sql->execute(array($id));
if($sql->rowCount()==1){
echo '<div class='btn btn-warning like' id="'.$id.'" title="Unlike" style='margin-top: -6px; title="Like"'> Like <span class='like-count'>0</span></div>';
}else{
echo '<div class='btn btn-warning like' title="Like" style='margin-top: -6px;'> Like <span class='like-count'>0</span></div>';
}
?>
action.php file:
<?php
require_once "config.php";
$id=$user->filter->id;
$action=$_POST['action'];
if ($action=='like'){
$sql=$dbh->prepare("SELECT * FROM likes WHERE id=?");
$sql->execute(array($id));
$matches=$sql->rowCount();
if($matches==0){
$sql=$dbh->prepare("INSERT INTO likes (id) VALUES(?)");
$sql->execute(array($id));
$sql=$dbh->prepare("UPDATE likes SET likes=likes+1 WHERE id=?");
$sql->execute(array($id));
}else{
die("There is No profile With That ID");
}
}
if ($action=='unlike'){
$sql = $dbh->prepare("SELECT 1 FROM `likes` WHERE id=?");
$sql->execute(array($id));
$matches = $sql->rowCount();
if ($matches != 0){
$sql=$dbh->prepare("UPDATE likes SET likes=likes-1 WHERE id=?");
$sql->execute(array($id));
}
}
?>
.like-count {
background-color: black;
padding: 2px 12px 2px;
margin-left: 2px;
border-bottom: 1px solid;
color:white;
}
.btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0px;
font-size: 14px;
line-height: 20px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
background-image: -o-linear-gradient(top,#fff,#e6e6e6);
background-image: linear-gradient(to bottom,#fff,#e6e6e6);
background-repeat: repeat-x;
border: 1px solid #ccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
margin-bottom: 10px;
}
.btn-warning {
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #faa732;
background-image: -moz-linear-gradient(top,#fbb450,#f89406);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fbb450),to(#f89406));
background-image: -webkit-linear-gradient(top,#fbb450,#f89406);
background-image: -o-linear-gradient(top,#fbb450,#f89406);
background-image: linear-gradient(to bottom,#fbb450,#f89406);
background-repeat: repeat-x;
border-color: #f89406 #f89406 #ad6704;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450',endColorstr='#fff89406',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
<div class='btn btn-warning like' style='margin-top: -6px;'> Like <span class='like-count'>0</span></div>
I am trying to create a login and registration form..when I created them without any styling it worked perfectly..later I enhanced those pages by adding responsive css and html styling..In this design when the user enters the site he'll see something like the login and registration are side by side one is login link and other is register link.when clicked on login link the background changes to white and link is activated..same for other..i used the concept of radio buttons for this..
In this design Iam facing 2 problems..
1)when i click on the green background of register link the colour
jus shifts but the link is not responding..In order for it to
respond i have to click the text(register)..I want the link to work
jus by clicking the background..I knw I can simply use buttons but
Iam wondering of there's some other solution...
the registration and login form wont even respond ..they just stay idle when i enter the data..initially it worked..but after including this login template with it..it stopped responding..I tried to find out error but i couldnt
please someone help me solving these problems..
Here's the code for everything
login.php
<html>
<head>
<title>Login Form</title>
<style>
a:link {
color: black;
}
a:visited {
color: black;
}</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<?php
if (!isset($_POST['submit'])){
?>
<h1 class="register-title">Welcome</h1>
<form action="<?=$_SERVER['PHP_SELF']?>" method="post" class="register">
<div class="register-switch">
<input type="radio" name="type" value="L" id="login" class="register-switch-input" checked>
<label for="login" class="register-switch-label">Login</label>
<input type="radio" name="type" value="R" id="Register" class="register-switch-input">
<label for="Register" class="register-switch-label">Register</label>
</div>
<input type="text" name="username" class="register-input" placeholder="User Name">
<input type="password" name="password"class="register-input" placeholder="Password">
<input type="submit" name="submit" value="Login" class="register-button">
</form>
<?php
} else {
require_once("db_const.php");
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
# check connection
if ($mysqli->connect_errno) {
echo "<p>MySQL error no {$mysqli->connect_errno} : {$mysqli->connect_error}</p>";
exit();
}
$username = $_POST['username'];
$password = $_POST['password'];
$sql = "SELECT * from users WHERE username LIKE '{$username}' AND password LIKE '{$password}' LIMIT 1";
$result = $mysqli->query($sql);
if (!$result->num_rows == 1) {
echo "<p>Invalid username/password combination</p>";
} else {
echo "<p>Logged in successfully</p>";
// do stuffs
}
}
?>
</body>
</html>
register.php
<!DOCTYPE html>
<head>
<title>Registration Form</title>
<link rel="stylesheet" href="css/style.css">
<style>
a:link {
color: black;
}
a:visited {
color: black;
}</style>
</head>
<body>
<?php
require_once("db_const.php");
if (!isset($_POST['submit'])) {
?>
<h1 class="register-title">Welcome</h1>
<form class="register">
<div class="register-switch">
<input type="radio" name="type" value="L" id="login" class="register-switch-input">
<label for="login" class="register-switch-label">Login</label>
<input type="radio" name="type" value="R" id="Register" class="register-switch-input" checked>
<label for="Register" class="register-switch-label">Register</label>
</div>
<input type="text" name="username" class="register-input" placeholder="User Name">
<input type="password" name="password" class="register-input" placeholder="Password">
<input type="text" name="first_name" class="register-input" placeholder="First Name">
<input type="text" name="last_name" class="register-input" placeholder="Last Name">
<input type="email" name="email" class="register-input" placeholder="Email Address">
<input type="submit" name="submit" value="Register" class="register-button">
</form>
<?php
} else {
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
# check connection
if ($mysqli->connect_errno) {
echo "<p>MySQL error no {$mysqli->connect_errno} : {$mysqli->connect_error}</p>";
exit();
}
# prepare data for insertion
$username = $_POST['username'];
$password = $_POST['password'];
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$email = $_POST['email'];
# check if username and email exist else insert
$exists = 0;
$result = $mysqli->query("SELECT username from users WHERE username = '{$username}' LIMIT 1");
if ($result->num_rows == 1) {
$exists = 1;
$result = $mysqli->query("SELECT email from users WHERE email = '{$email}' LIMIT 1");
if ($result->num_rows == 1) $exists = 2;
} else {
$result = $mysqli->query("SELECT email from users WHERE email = '{$email}' LIMIT 1");
if ($result->num_rows == 1) $exists = 3;
}
if ($exists == 1) echo "<p>Username already exists!</p>";
else if ($exists == 2) echo "<p>Username and Email already exists!</p>";
else if ($exists == 3) echo "<p>Email already exists!</p>";
else {
$sql = "INSERT INTO `users` (`id`, `username`, `password`, `first_name`, `last_name`, `email`)
VALUES (NULL, '{$username}', '{$password}', '{$first_name}', '{$last_name}', '{$email}')";
if ($mysqli->query($sql)) {
//echo "New Record has id ".$mysqli->insert_id;
echo "<p>Registered successfully!</p>";
} else {
echo "<p>MySQL error no {$mysqli->errno} : {$mysqli->error}</p>";
exit();
}
}
}
?>
</body>
</html>
db_const.php
<?php
# mysql db constants DB_HOST, DB_USER, DB_PASS, DB_NAME
const DB_HOST = 'localhost';
const DB_USER = 'root';
const DB_PASS = '';
const DB_NAME = 'php_mysql_login_system';
?>
style.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #404040;
background: #2d4259;
}
.register-title {
width: 270px;
line-height: 43px;
margin: 50px auto 20px;
font-size: 19px;
font-weight: 500;
color: white;
color: rgba(255, 255, 255, 0.95);
text-align: center;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
background: #d7604b;
border-radius: 3px;
background-image: -webkit-linear-gradient(top, #dc745e, #d45742);
background-image: -moz-linear-gradient(top, #dc745e, #d45742);
background-image: -o-linear-gradient(top, #dc745e, #d45742);
background-image: linear-gradient(to bottom, #dc745e, #d45742);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.register {
margin: 0 auto;
width: 230px;
padding: 20px;
background: #f4f4f4;
border-radius: 3px;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
}
input {
font-family: inherit;
font-size: inherit;
color: inherit;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.register-input {
display: block;
width: 100%;
height: 38px;
margin-top: 2px;
font-weight: 500;
background: none;
border: 0;
border-bottom: 1px solid #d8d8d8;
}
.register-input:focus {
border-color: #1e9ce6;
outline: 0;
}
.register-button {
display: block;
width: 100%;
height: 42px;
margin-top: 25px;
font-size: 16px;
font-weight: bold;
color: #494d59;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
background: #fcfcfc;
border: 1px solid;
border-color: #d8d8d8 #d1d1d1 #c3c3c3;
border-radius: 2px;
cursor: pointer;
background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);
background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);
background-image: -o-linear-gradient(top, #fefefe, #eeeeee);
background-image: linear-gradient(to bottom, #fefefe, #eeeeee);
-webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
}
.register-button:active {
background: #eee;
border-color: #c3c3c3 #d1d1d1 #d8d8d8;
background-image: -webkit-linear-gradient(top, #eeeeee, #fcfcfc);
background-image: -moz-linear-gradient(top, #eeeeee, #fcfcfc);
background-image: -o-linear-gradient(top, #eeeeee, #fcfcfc);
background-image: linear-gradient(to bottom, #eeeeee, #fcfcfc);
-webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.03);
box-shadow: inset 0 1px rgba(0, 0, 0, 0.03);
}
.register-button:focus {
outline: 0;
}
.register-switch {
height: 32px;
margin-bottom: 15px;
padding: 4px;
background: #6db244;
border-radius: 2px;
background-image: -webkit-linear-gradient(top, #60a83a, #7dbe52);
background-image: -moz-linear-gradient(top, #60a83a, #7dbe52);
background-image: -o-linear-gradient(top, #60a83a, #7dbe52);
background-image: linear-gradient(to bottom, #60a83a, #7dbe52);
-webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);
box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);
}
.register-switch-input {
display: none;
}
.register-switch-label {
float: left;
width: 50%;
line-height: 32px;
color: white;
text-align: center;
text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.register-switch-input:checked + .register-switch-label {
font-weight: 500;
color: #434248;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
background: white;
border-radius: 2px;
background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);
background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);
background-image: -o-linear-gradient(top, #fefefe, #eeeeee);
background-image: linear-gradient(to bottom, #fefefe, #eeeeee);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);
}
:-moz-placeholder {
color: #aaa;
font-weight: 300;
}
::-moz-placeholder {
color: #aaa;
font-weight: 300;
opacity: 1;
}
::-webkit-input-placeholder {
color: #aaa;
font-weight: 300;
}
:-ms-input-placeholder {
color: #aaa;
font-weight: 300;
}
::-moz-focus-inner {
border: 0;
padding: 0;
}
probably, you should be facing problem with registration form, as the form tag is wrong
< form class="register" >
should be
< form method="post" action="" class="register" >
My divs keep shifting when I resize the page can someone help me with this?
html/php (php for login and page getter)
my html body part with some php for login in and something with the page
<div class="menu">
<img src="logo.png" style=" position: relative; margin-right: 38%">
<ul class="dropdown">
<li><a href="?page=Home" <?php if ($page == 'Home') { ?> id="a-active" <?php } ?> >Home</a>
<ul class="sub_menu">
<li>News</li>
<li>Servers</li>
</ul>
</li>
<li><a href="?page=Forum" <?php if ($page == 'Forum') { ?> id="a-active" <?php } ?> >Forum</a>
<ul class="sub_menu">
<li>Common</li>
<li>Information</li>
<li>Griefs & Player reports</li>
<li>
Unbans
</li>
</ul>
</li>
<li><a href="?page=Information" <?php if ($page == 'Information') { ?> id="a-active" <?php } ?> >Information</a>
<ul class="sub_menu">
<li>
Rules
</li>
<li>
Staff
</li>
<li>
Servers
<ul>
<li>Survival</li>
<li>Games</li>
</ul>
</li>
</ul>
</li>
<li><a href="?page=Topscores" <?php if ($page == 'Topscores') { ?> id="a-active" <?php } ?> > Topscores</a>
<ul class="sub_menu">
<li>Playtime</li>
<li>Kills</li>
<li>Game wins</li>
</ul>
</li>
<li><a href="?page=Donations" <?php if ($page == 'Donations') { ?> id="a-active" <?php } ?> >Donation</a>
</li>
</ul>
<div class="content">
<?php
if ($page == 'Forum') {
include 'forum/index.html';
} elseif ($page == 'Information') {
include 'information/index.html';
} elseif ($page == 'Topscores') {
include 'topscores/index.html';
} elseif ($page == 'Donations') {
include 'donations/index.html';
} elseif ($page == 'Home') {
include 'home/index.html';
} else {
include '404/index.html';
}
?>
</div>
<div class="contentmirror1">
<?php
if (isset($_SESSION['username'])) {
?>
<form width="110px" id="form1" name="form1" method="post" action="logout.php">
<table width="100px" border="0" align="center">
<tr>
<td colspan="2">Welcome</td>
</tr>
<tr>
<td><input readonly type="text" name="name" style="border:none; background-color: transparent;" value="<?php echo htmlspecialchars($_SESSION['username']); ?>"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="button" id="button" value="Logout" /></td>
</tr>
</table>
</form>
<?php
} else {
?>
<form width="110px" id="form1" name="form1" method="post" action="login.php">
<table width="100px" border="0" align="center">
<tr>
<td colspan="2">Login</td>
</tr>
<tr>
<td>Username:</td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" id="password" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="button" id="button" value="Login" /></td>
</tr>
</table>
</form>
<?php
}
?>
</div>
<div class="contentmirror" style="Clear: Both;">
spambox/online shizzle
</div>
</div>
my css
.head{
height: 115px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
background: rgb(200,200,200);
z-index: -999;
}
html {
background: url('background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu{
display: inline-block;
position: absolute;
padding: 2%;
text-align: center;
width: 86%;
left: 0px;
top: 0px;
font-family: arial;
z-index: 0;
}
.menu::after {
padding-top: 56.25%; /* percentage of containing block _width_ */
display: block;
content: '';
}
.content{
float: left;
margin-top: 5%;
width: 60%;
max-width: 60%;
padding: 1%;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.contentmirror{
float: right;
margin-top: -3%;
margin-right: 5%;
max-width: 26%;
width: 26%;
padding: 1%;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.contentmirror1{
float: right;
margin-top: -25%;
margin-right: 8%;
max-width: 26%;
width: 26%;
padding: 1%;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.sidepanelright{
float: right;
}
.main{
text-align: center;
font-family: arial;
font-size: 24px;
}
.pics {
width: 70%;
max-height: 100%;
margin: 0px auto;
}
.pic {
display: none;
background-color: transparent;
border: none;
width: 100%;
max-height: 100%;
}
.menu a{
color: black;
background-color: white;
padding: 5px 10px;
margin: 0px 5px;
border-radius: 10px;
text-decoration: none;
-moz-box-shadow: 0px 0px 20px 0px #4E4E4E;
-webkit-box-shadow: 0px 0px 20px 0px #4E4E4E;
box-shadow: 0px 0px 20px 0px #4E4E4E;
z-index: 0;
}
.menu a:hover{
padding: 7px 12px;
-moz-box-shadow: 0px 0px 30px 0px white;
-webkit-box-shadow: 0px 0px 30px 0px white;
box-shadow: 0px 0px 30px 0px white;
}
#logo{
float: left;
top: -90px;
position: relative;
margin: 5px 0px 0px 5px;
width: 15%;
max-height: 100%;
z-index: 1;
}
.btn:hover, .btn:focus {
color: #333333;
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
color: #333333;
background-color: #e6e6e6;
}
.btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
#btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
#btn:hover, #btn:focus, #btn:active, #btn.active, #btn.disabled, #btn[disabled] {
color: #333333;
background-color: #e6e6e6;
}
#btn:hover, #btn:focus {
color: #333333;
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
#a-active{
color: black;
background-color: #DDDDDD;
padding: 5px 10px;
margin: 0px 5px;
border-radius: 10px;
text-decoration: none;
-moz-box-shadow: 0px 0px 20px 0px #4E4E4E;
-webkit-box-shadow: 0px 0px 20px 0px #4E4E4E;
box-shadow: 0px 0px 20px 0px #4E4E4E;
z-index: 0;
}
#a-active:hover{
background-color: white;
padding: 7px 12px;
-moz-box-shadow: 0px 0px 30px 0px white;
-webkit-box-shadow: 0px 0px 30px 0px white;
box-shadow: 0px 0px 30px 0px white;
}
* { margin: 0; padding: 0; }
body { font: 14px Helvetica, Sans-Serif; }
#page-wrap { width: 800px; margin: 25px auto; }
a { text-decoration: none; }
ul { list-style: none;}
p { margin: 15px 0; }
/*
LEVEL ONE
*/
.drops{
margin-left: 30%;
}
ul.dropdown { position: relative; margin-left: 37%; margin-top: 2%;}
ul.dropdown li { font-weight: bold; float: left; zoom: 1; }
ul.dropdown a:hover { }
ul.dropdown a:active { }
ul.dropdown li a { display: block; padding: 4px 8px; border-right: 1px solid #333;
}
ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover { color: black; position: relative; }
ul.dropdown li.hover a { color: black; }
/*
LEVEL TWO
*/
ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li { font-weight: normal; float: none; }
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; }
/*
LEVEL THREE
*/
ul.dropdown ul ul { left: 100%; top: 0; }
ul.dropdown li:hover > ul { visibility: visible; }
when I resize the window the divs shifts to the left or down. is there a way to set those divs on one position where they do not shift positions just stay there?
I pretty much didn't understand your code, but made this fiddle to make you understand how to fix the divs.
I would suggest you to avoid float for divs and do something like:
.fix{
/* this is parent div */
display:inline-block ;
white-space:nowrap;
}
.fxchld{
/* these are child divs */
width:50px;
display:inline-block ;
height:50px;
border:1px solid #000;
}
idea is to use display:inline-block ; instead of floats so that they remain fixed to their position
else
you'll have to give large parent div width so that child divs won't wrap
Fiddle will help you understand my point!!
In my php below i have a forgot password thing and it echo's a form depending on certain conditions how would i style this with my css? because i do not want the forms showing up without any styling
I have tried and tried to figure out what to do but there has been nothing. i even tried thinking about making this into a few serate pages but got confused and lost
<?php
require("core/dbc.php");
if(isset($_GET['code']))
{
$get_username = $_GET['username'];
$get_code = $_GET['code'];
$query = mysql_query("SELECT * FROM users WHERE username='$get_username'");
while($row = mysql_fetch_assoc($query))
{
$db_code = $row['passreset'];
$db_username = $row['username'];
}
if($get_username == $db_username && $get_code == $db_code)
{
echo "
<form action='pass_reset_complete.php?code=$get_code' method='POST'>
Enter A New Password<br><input type='password' name='newpass'><br>
Re-Enter Your New Password<br><input type='password' name='newpass1'><p>
<input type='hidden' name='username' value='$db_username'>
<input type='submit' value='Update Password'>
</form>
";
}
}
if(!isset($_GET['code']))
{
echo "
<form action='forgot_pass.php' method='POST'>
Enter Your Username<br><input type='text' name='username'><p>
Enter your email<br><input type='text' name='email'><p>
<input type='submit' value='Submit' name='submit'>
</form>
";
if(isset($_POST['submit']))
{
$username = $_POST['username'];
$email = $_POST['email'];
$query = mysql_query("SELECT * FROM users WHERE username='$username'");
$numrow = mysql_num_rows($query);
if($numrow!=0)
{
while($row = mysql_fetch_assoc($query))
{
$db_email = $row['email'];
}
if($email == $db_email)
{
$code = rand(10000,1000000);
$to = $db_email;
$subject = "Password Reset";
$body = "
This is a automated email. PLEASE DO NOT REPLY TO THIS MESSAGE
Click the link below or paste it into your browser
http://localhost:8080/signup-project/signup-project/registration%20and%20login/forgot_pass.php?code=$code&username=$username
";
mysql_query("UPDATE users SET passreset='$code' WHERE username='$username'");
mail($to,$subject,$body);
echo "Check Your Email For Your New Password";
}
else
{
echo "the email is incorrect";
}
}
else
{
echo "that username does not exist";
}
}
}
?>
Ok i am confused because a lot of people are saying different ways so let me try this i am going to put my css file code then i am going to paste my log in form code (where i have this css working'
this is the code from my .css file
body {
line-height: 1.4;
background-color: #666;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
}
.hidden {
display: none;
}
a,
a:active,
a:focus
a:visited {
color: #1B9BE0 ;
text-decoration: none;
}
a:hover {
text-decoration: underline
}
/* Structure */
#wrap {
width: 960px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
-webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
}
#head {
text-align: center;
}
.form-wrap {
width: 600px;
margin: 0 auto;
}
.content {
overflow: hidden;
}
.user-controls {
float: right;
}
.logged-in-user{
float: right;
margin-left: 140px;
}
.logged-in-user p {
margin: 0;
}
/* Form Elements */
fieldset {
border: 0;
padding: 0;
}
.form-el {
margin: 10px 0;
}
.btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
input[type="text"],
input[type="number"],
input[type="password"],
textarea {
background-color: #fff;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear .2s,box-shadow linear .2s;
-moz-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
transition: border linear .2s,box-shadow linear .2s;
padding: 8px 4px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 270px;
font-size: 18px;
}
input[type="text"]:hover,
input[type="number"] :hover,
input[type="password"]:hover {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted 9;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
input[type="submit"] {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #006dcc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-repeat: repeat-x;
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
Now this is my login form that has the css on it
<html>
<head>
<meta charset="utf-8">
<title>Log-In</title>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'/>
<link href="../css/core.css" rel="stylesheet" />
</head>
<body>
<div id="wrap">
<div id="head">
<h1>Login to the Assignment Upload System</h1>
</div>
<div class="content">
<form action="core/authenticate.php" method="POST">
<div class="form-wrap">
<fieldset>
<legend class="hidden">Login</legend>
<div class="form-el">
<label class="hidden" for="username">User name</label>
<input id="username" type="text" name="username" placeholder="Enter Your Username..."><br />
</div>
<div class="form-el">
<label class="hidden" for="password">Password</label>
<input id="password" type="password" name="password" placeholder="Enter Your Password..."><br />
Forgot Password?
</div>
<input class="btn" type="submit" value="Login">
</fieldset>
</div>
</form>
</div>
<?php if(isset($_GET["feedback"])){echo $_GET["feedback"];} ?>
</div>
</body>
</html>
Now i want my echo form in my php to look exactly like this page so how would i do this? because i am getting really confused with what people are saying
an easy way is to include bootstrap:
include this in the <head>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" media="screen" />
then in all your inputs add class="form-control"
for example:
<input type="text" class="form-control" />
Just make sure you include your CSS file in the HTML file you are generating with your PHP Code.
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
give the form a class name like this:
echo "
<form action='pass_reset_complete.php?code=$get_code' method='POST' class='first_form'>
Enter A New Password...etc
then add style tag but out of the PHP codes:
<style>
.first_form{
background:#ccc;
width:300px;
border:solid #000 1px;
}
</style>
and you can styling input tags in the form like this:
<style>
.first_form{
background:#ccc;
width:300px;
border:solid #000 1px;
}
.first_form > input[type=password]{
width:250px;
color:#fff;
background:#333;
}
.first_form > input[type=submit]{
width:70px;
border:none;
}
</style>