I've got a "lost property website" which shows items from a database. The form for the website is formatted correctly, but when it is clicked on the button becomes extremely large.
body {
/* apply styling to everything in body */
margin: 0;
/* use all of the page */
font-family: Helvetica, Arial, sans-serif;
/* set primary font to Helvetica, secondary to Arial, and if none are availible use a san-serif font */
background-color: #fff;
/* set background colour to white */
font-size: 18px;
/* set default font size is 18px */
}
.navigation {
/* navigation bar styling */
position: fixed;
/* attach bar to static position */
top: 0;
/* spread to full */
left: 0;
right: 0;
background-color: orange;
/* make navigation bar div orange */
z-index: 1/* place on top of all content */
}
.navigation a {
float: left;
/* move links to left */
color: #fff;
/* text colour white */
text-align: center;
/* align links centre of their boxes */
padding: 14px 16px;
/* add padding to boxes */
text-decoration: underline;
/* add underline to links for platform conventions */
position: relative;
/* move links one after the other */
}
.navigation a:hover {
/* when link is hovered over, make background lighter */
background-color: #ffc864;
}
.right a {
/* ability move links to the right side of navaigation bar div */
float: right;
}
.header {
/* title and image */
position: relative;
top: 5%;
/* add borders */
left: 5%;
right: 15%;
width: 70%;
/* define size */
padding-top: 50px;
}
.header img {
max-width: 225px;
/* max size of image */
float: left;
}
.header h1 {
padding-left: 30px;
padding-bottom: 30px;
}
.gallery {
/* image gallery div styling */
left: 5%;
width: 90%;
position: relative;
}
input {
/* input field styling */
border-radius: 5px;
border: none;
width: 100%;
font-size: 18px;
margin-bottom: 15px;
height: 30px;
}
.submit {
/* button styling */
padding-left: 0;
font-size: 18px;
height: 30px;
text-align: center;
position: relative;
}
.form {
/* form div styling */
position: relative;
width: 75%;
height: 100%;
left: 12.5%;
background-color: #d3d3d3;
padding: 25px;
margin-bottom: 50px;
}
* {
box-sizing: border-box;
}
input[type=text] {
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
padding-left: 12px;
}
input[type=file] {
border: none;
border-radius: 4px;
height: 100%;
}
input[type=submit] {
background-color: orange;
color: #fff;
padding: 12px;
border: none;
border-radius: 4px;
cursor: pointer;
height: 100%;
}
input[type=submit]:hover {
background-color: #ffa07a;
}
/* code to make gallery images scale well for all screens */
#media screen and (max-width:600px) {
input[type=submit] {
width: 100%;
margin-top: 0;
}
}
div.image {
margin: 10px;
display: inline-block;
vertical-align: middle;
}
div.image img {
width: 100%;
height: auto;
border: 1px solid #ccc;
}
#media screen and (min-width:1224px) {
div.image {
width: 300px;
}
}
#media screen and (min-width:1044px) and (max-width:1224px) {
div.image {
width: 250px;
}
}
#media screen and (min-width:845px) and (max-width:1044px) {
div.image {
width: 200px;
}
}
.image a {
/* make image links follow platform conventions */
color: inherit;
text-decoration: underline;
}
/* full screen images */
.lightbox {
/** Default lightbox to hidden */
display: none;
/** Position and style */
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
}
a {
color: white;
text-decoration: none;
}
.lightbox img {
/** Pad the lightbox image */
max-width: 90%;
max-height: 80%;
margin-top: 5vh;
}
.lightbox:target {
/** Remove default browser outline */
outline: none;
/** Unhide lightbox **/
display: block;
}
<!-- Declaration tags for the browser to know what to read, and what language -->
<!DOCTYPE html>
<html lang="en">
<!-- Back end code -->
<head>
<title>Lost Property</title>
<!-- title for website -->
<link rel="stylesheet" type="text/css" href="assets/main.css">
<!-- link to css -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- define size -->
<?php
session_start();
include("config.php"); // include configuration to connect to database
$dbconnect = mysqli_connect(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME); // connect to database
// if can't connect display error
if (mysqli_connect_errno()) {
echo "Connection failed:" . mysqli_connect_error();
exit;
}
// define variables from database to use later in PHP code
$showall_sql = "SELECT * FROM `images` ORDER BY `images`.`ID` ASC";
$showall_query = mysqli_query($dbconnect, $showall_sql);
$showall_rs = mysqli_fetch_assoc($showall_query);
$count = mysqli_num_rows($showall_query);
?>
</head>
<!-- main page content -->
<body>
<!-- navigation bar -->
<div class="navigation">
<!-- links -->
Home
Search
Upload
<div class="right">About</div>
<!-- has float:right property for to move to side -->
</div>
<!-- header -->
<div class="header">
<img src="assets/logo.jpg" alt="Logo">
<!-- image of logo, alt tags for screen readers -->
<h1>Lost Property</h1>
</div>
<?php
$sql = "SELECT * FROM lost_property";
if (!empty($_POST)) {
$name = mysqli_real_escape_string($dbconnect, htmlspecialchars($_POST['name']));
$item = mysqli_real_escape_string($dbconnect, htmlspecialchars($_POST['item']));
$sql = "SELECT * FROM lost_property WHERE name LIKE '%$name%' AND item LIKE '%$item%' ORDER BY name ASC";
}
$result = $dbconnect->query($sql);
?>
<body>
<div class="form">
<label>Search</label>
<form action="" method="POST">
<input type="text" placeholder="Type the name here" name="name">
<select name="item" class="dropdown">
<option value="" disabled selected>item:</option>
<?php
$item_sql = "SELECT * FROM `lost_property` ORDER BY item ASC ";
$item_query = mysqli_query($dbconnect, $item_sql);
$item_rs = mysqli_fetch_assoc($item_query);
do {
?>
<option value="<?php echo $item_rs['item']; ?>">
<?php echo $item_rs['item']; ?>
</option>
<?php
} while ($item_rs = mysqli_fetch_assoc($item_query));
?>
</select>
<input type="submit" value="Search" name="btn">
</div>
</form>
<div class="gallery">
<h2>Found property:</h2>
<?php
//check for results. If there are none display error
if ($count < 1) {
?>
<div class="error">
<h1>No results were found.</h1>
</div>
<?php
} //end if
else {
while ($search_rs = $result->fetch_assoc()) {
?>
<!-- display image and information from database and show in gallery -->
<div class="image">
<h3>
<?php echo $search_rs['name']; ?>
</h3>
<h3>
<?php echo $search_rs['item']; ?>
</h3>
<p>
<?php echo $search_rs['location']; ?>
</p>
</div>
<?php
} // end of do
} //end else
//if there are any display
?>
</div>
</body>
</html>
Obviously it's a bit hard to tell without the attached database, but why does the search button become really big?
Is it the PHP that is changing the size, or is it adjusting to fit something in?
You should use an Editor that shows you opened and closed tags. In your code are several mistakes that should result in several problems, this part here especially:
<body> <--- You open a second Body tag here! Only use one
<div class="form"> <--- start of your div
<label>Search</label>
<form action="" method="POST"> <--- start of your form INSIDE the div
<input type="text" placeholder="Type the name here" name="name">
<select name="item" class="dropdown">
<option value="" disabled selected>item:</option>
<?php
$item_sql = "SELECT * FROM `lost_property` ORDER BY item ASC ";
$item_query = mysqli_query($dbconnect, $item_sql);
$item_rs = mysqli_fetch_assoc($item_query);
do {
?>
<option value="<?php echo $item_rs['item']; ?>">
<?php echo $item_rs['item']; ?>
</option>
<?php
} while ($item_rs = mysqli_fetch_assoc($item_query));
?>
</select>
<input type="submit" value="Search" name="btn">
</div> <-- div closes before the form which is INSIDE the div
</form> <-- form closes after div, wrong way around!
So i highly recommend to practice a bit how to make code cleaner, so that you notice mistakes like this.
example:
<div class="main-container">
<div class="form-container">
<form>
<input type="text" placeholder="Testinput">
<input type="submit" value="search" id="submitbutton">
</form>
</div>
</div>
Basically: Avoid unecessary white-space, align opening and closing tags on the same level.
With that information you should be able to rearrange your code and fix the Button-Bug yourself.
Related
Am trying to pass five array data with a checkbox styled with css via a foreach loop.
My issue is that only the first checkbox switch button is working fine. when I try to move the switch checkbox for the
second record, it will only move/switch the check box of the first record.
I guess the issue has to be with setting the checkboxThreeInput css class to an id params as per.
id="checkboxThreeInput"
If I try setting it to a class as per, it will not work at all.
class="checkboxThreeInput"
here is the code
<!doctype html>
<html>
<head>
<style>
input[type=checkbox] {
visibility: hidden;
}
/**
* Checkbox Three
*/
.checkboxThree {
width: 80px;
height: 40px;
background: #333;
margin: 20px 60px;
border-radius: 50px;
position: relative;
}
/**
* Create the text for the On position
*/
.checkboxThree:before {
content: 'no';
position: absolute;
top: 12px;
left: 13px;
height: 2px;
color: #26ca28;
font-size: 16px;
}
/**
* Create the label for the off position
*/
.checkboxThree:after {
content: 'yes';
position: absolute;
top: 12px;
left: 44px;
height: 2px;
color: #111;
font-size: 16px;
}
/**
* Create the pill to click
*/
.checkboxThree label {
display: block;
width: 32px;
height: 22px;
border-radius: 20px;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 9px;
z-index: 1;
left: 8px;
background: yellow;
}
/**
* Create the checkbox event for the label
*/
.checkboxThree input[type=checkbox]:checked + label {
left: 40px;
background: #26ca28;
}
</style>
</head>
<body>
<div class='container'>
<?php
$array = array( 1, 2, 3, 4, 5);
foreach( $array as $id ) {
?>
<div id='tr_<?= $id ?>'>
<div class="checkboxThree">
<input type="checkbox" id="checkboxThreeInput"/>
<label for="checkboxThreeInput"></label>
<?php echo $id; ?>
</div>
</div>
<?php
}
?>
</div>
</body>
</html>
Try this. Each checkbox must have an identifier
<body>
<div class='container'>
<?php
$array = array( 1, 2, 3, 4, 5);
foreach( $array as $id ) {
?>
<div id='tr_<?= $id ?>'>
<div class="checkboxThree">
<input type="checkbox" id="checkboxThreeInput_<?php echo $id; ?>"/>
<label for="checkboxThreeInput_<?php echo $id; ?>"></label>
<?php echo $id; ?>
</div>
</div>
<?php
}
?>
</div>
</body>
I want to show this panel or modal in html / css but i cant show it because i have
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
and when i remove that link the modal will show but when it is there the modal does not show.
P.S I cannot remove that link because all of my design will be removed or will not be visible so how can i show that modal without removing that link here is my css
style
<style type="text/css">
body {
/* general styles */
padding: 30px;
font-family: 'Open Sans', sans-serif;
}
/* overlay styles, all needed */
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 10;
}
/* just some content with arbitrary styles for explanation purposes */
.modal {
width: 300px;
height: 200px;
line-height: 200px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
background-color: #f1c40f;
border-radius: 5px;
text-align: center;
z-index: 11; /* 1px higher than the overlay layer */
}
.content {
margin: 30px;
}
h1 {
font-family: 'Federo', sans-serif;
}
</style>
my div
<div class="overlay"></div>
<div class="modal" id="modal"><?php echo $row['id']; ?> <?php echo $row['additional_info']; ?></div>
This doesn't show the dialog because the modal class is also used by Bootstrap.
If you change the line <div class="modal" id="modal"> to <div class="mymodal" id="modal"> you will see that it now appears. Be sure to also update your class name in your css as well.
So I wrote a code to make 4 photos (or more) be responsive (Pinboard like) but I can't figure out how to make the photos be random.
Example: You visit the page and you see img A: B: C :D Then when you refresh the page there is a different set of images. I know there is plenty of tutorials to randomize photos but I haven't found anything with the pinboard like design that I created.
Could really use some help in understanding what code I need to add to make the photos change with each page refresh instead of always showing the same photos.
HERES MY CODE:
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* RL - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other
instead of next to each other */
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
</style>
<body>
<!-- Header -->
<div class="header">
<h1>Responsive Image Grid</h1>
<p>Testing system.</p>
</div>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<img src="/public/admin/haleyfoxforabout333.jpg" style="width:100%">
</div>
<div class="column">
<img src="/public/user/2c/04/d72477bc8b54505d2027a5966f941252.jpg"
style="width:100%">
</div>
<div class="column">
<img src="/public/album_photo/3b/04/0196544bb5fdd97b9a40e49327394756.jpg"
style="width:100%">
</div>
<div class="column">
<img src="/public/user/ca/03/8a344be65723d3d001f1b34acb5f6742.jpg"
style="width:100%">
</div>
</body>
</html>
NEW CODE after a suggestion from someone. (Still not working give an error.)
<br>
<br>
<h50><?php echo $this->translate('Be Discovered!'); ?></h50>
and connected. Meet anyone & see everything!</a></p>
<br>
<?php
$pics = [
"/public/admin/haleyfoxforabout333.jpg",
"/public/user/2c/04/d72477bc8b54505d2027a5966f941252.jpg",
"/public/user/ca/03/8a344be65723d3d001f1b34acb5f6742.jpg",
"/public/album_photo/3b/04/0196544bb5fdd97b9a40e49327394756.jpg"
];
shuffle($pics);
?>
<style>
h50 {
padding: 0 30px 8px;
width: auto;
font-size: 40px;
margin: 0 0 10px 0;
background-color: transparent;
border: none;
border-bottom: 1px solid #D2DBE8;
border-radius: 3px 3px 0 0;
display: inline-block;
}
.headerz {
text-align: center;
padding: 32px;
}
.rowz {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.columnz {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.columnz img {
margin-top: 8px;
vertical-align: middle;
}
/* RL - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.columnz {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* RL Takes the two columns stack on top of each other. */
#media screen and (max-width: 600px) {
.columnz {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
</style>
<!-- Photo Grid -->
<div class="rowz">
<?php
foreach($pics as $pic){
echo '<div class="column">';
echo '<img src="'..'" style="width:100%">';
echo '</div>';
}
?>
<?php
foreach($pics as $pic){
echo '<div class="column">';
echo '<img src="'..'" style="width:100%">';
echo '</div>';
}
?>
<?php
foreach($pics as $pic){
echo '<div class="column">';
echo '<img src="'..'" style="width:100%">';
echo '</div>';
}
?>
<?php
foreach($pics as $pic){
echo '<div class="column">';
echo '<img src="'..'" style="width:100%">';
echo '</div>';
}
?>
</div>
The shuffle() function randomizes the order of the elements in the array.
This function assigns new keys for the elements in the array. Existing keys will be removed
....
<?php
$pics = [
"/public/admin/haleyfoxforabout333.jpg",
"/public/user/2c/04/d72477bc8b54505d2027a5966f941252.jpg",
"/public/user/ca/03/8a344be65723d3d001f1b34acb5f6742.jpg",
"/public/album_photo/3b/04/0196544bb5fdd97b9a40e49327394756.jpg"
];
shuffle($pics);
?>
<body>
<!-- Header -->
<div class="header">
<h1>Responsive Image Grid</h1>
<p>Testing system.</p>
</div>
<!-- Photo Grid -->
<div class="row">
<?php
foreach($pics as $pic){
echo '<div class="column">';
echo '<img src="'..'" style="width:100%">';
echo '</div>';
}
?>
</div>
</body>
.
FULL CODE:
HERES MY CODE:
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* RL - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other
instead of next to each other */
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
</style>
<body>
<!-- Header -->
<div class="header">
<h1>Responsive Image Grid</h1>
<p>Testing system.</p>
</div>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<img src="/public/admin/haleyfoxforabout333.jpg" style="width:100%">
</div>
<div class="column">
<img src="/public/user/2c/04/d72477bc8b54505d2027a5966f941252.jpg"
style="width:100%">
</div>
<div class="column">
<img src="/public/album_photo/3b/04/0196544bb5fdd97b9a40e49327394756.jpg"
style="width:100%">
</div>
<div class="column">
<img src="/public/user/ca/03/8a344be65723d3d001f1b34acb5f6742.jpg"
style="width:100%">
</div>
</body>
</html>
NEW CODE after a suggestion from someone. (Still not working give an error.)
<br>
<br>
<h50><?php echo $this->translate('Be Discovered!'); ?></h50>
and connected. Meet anyone & see everything!</a></p>
<br>
<?php
$pics = [
"/public/admin/haleyfoxforabout333.jpg",
"/public/user/2c/04/d72477bc8b54505d2027a5966f941252.jpg",
"/public/user/ca/03/8a344be65723d3d001f1b34acb5f6742.jpg",
"/public/album_photo/3b/04/0196544bb5fdd97b9a40e49327394756.jpg"
];
shuffle($pics);
?>
<style>
h50 {
padding: 0 30px 8px;
width: auto;
font-size: 40px;
margin: 0 0 10px 0;
background-color: transparent;
border: none;
border-bottom: 1px solid #D2DBE8;
border-radius: 3px 3px 0 0;
display: inline-block;
}
.headerz {
text-align: center;
padding: 32px;
}
.rowz {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.columnz {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.columnz img {
margin-top: 8px;
vertical-align: middle;
}
/* RL - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.columnz {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* RL Takes the two columns stack on top of each other. */
#media screen and (max-width: 600px) {
.columnz {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
</style>
<!-- Photo Grid -->
<div class="rowz">
<?php
foreach($pics as $pic){
echo '<div class="column">';
echo '<img src="'.$pic.'" style="width:100%">';
echo '</div>';
}
?>
</div>
I have a website that displays a list of user accounts on the left side going down in a list that are clickable (hyperlinks) that take you to the user's profile page. Also, I have a search field (form) in the middle of the page where users can just search for someone. However, because of that search field, the usernames displayed on the left side that are aligned with this field are broken, you cannot click on them anymore. The hyperlinks that are not aligned with the search field and are under the alignment of it work. After troubleshooting, I found out that this field in my CSS code was the cause of it: position: absolute;
Taking that field out of the CSS code breaks the position of my search field in the middle of the page and it gets placed at the bottom of the page.
I don't know how to fix this problem without breaking the positioning of my content on the page.
My code:
<?php
include('init.inc.php');
$output = '';
if(isset($_POST['search'])){
$searchq = $_POST['search'];
$searchq = preg_replace("#[^0-9a-z]#i","",$searchq); //filter, can remove
$query = mysql_query("SELECT * FROM users WHERE user_first LIKE '%$searchq%' OR user_last LIKE '%$searchq%' OR user_uid LIKE '%$searchq%'");
$count = mysql_num_rows($query);
if($count == 0){
$output = 'There was no search found!';
}else{
while($row = mysql_fetch_array($query)){
$uname = $row['user_uid'];
$fname = $row['user_first'];
$lname = $row['user_last'];
$email = $row['user_email'];
$id = $row['user_id'];
$output .= '<div> '.$uname.' '.$fname.' '.$lname.' '.$email.'</div>';
}
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=""http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<section id="showcase1">
<section id="newsletter">
<div class="container">
<h1>ProjectNet Members:</h1>
</div>
</section>
<div class="container">
<div class="userList">
<?php
foreach (fetch_users() as $user){
?>
<p>
<button><a class="userList" href="profile.php?uid=<?php echo $user['id']; ?>"><?php echo $user['username']; ?></a></button>
</p>
<?php
}
?>
</div>
</div>
<div class="searchList">
<h2>Search for members</h2>
<form id="search" action="user_list.php" method="post">
<input type="text" name="search" placeholder="Search for members..." />
<input type="submit" value="Search" />
</form>
<?php print("$output");?>
</div>
</section>
</body>
</html>
CSS:
THIS IS THE CSS FOR THE SEARCH FIELD IN THE MIDDLE OF THE PAGE
.searchList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 19px Arial, Helvetica,sans-serif;
text-align: center;
line-height: 35px;
margin: auto;
margin-top: -100px;
position: absolute;
top: 45%;
width: 100%;
}
#search input[type="submit"] {
cursor: pointer;
border: none;
background: #fafafa;
color: #333;
font-weight: bold;
margin: 0 0 5px;
padding: 3px;
font-size: 15px;
font: Arial, Helvetica,sans-serif;
}
#search input[type="text"] {
width: 18%;
border: 1px solid #CCC;
background: #FFF;
margin: 0 0 5px;
padding: 4px;
}
#search input[type="submit"]:hover {
background: #e8491d;
color: #fafafa;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
CSS:
THIS IS THE CSS FOR THE LIST OF USERS ON THE LEFT SIDE OF THE PAGE
.userList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 20px Arial, Helvetica,sans-serif;
margin: auto;
}
.userList button {
background: #333;
width: 20%;
}
There isn't a whole lot of info supplied and its hard to visualize without an image but my guess would be a z-index issue.
Below you can see that the div goes from left to right(width 100%). I assume that this div is sitting on top of your userList div based on the supplied css. This means you probably cant click the hyperlinks below the searchList div.
.searchList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 19px Arial, Helvetica,sans-serif;
text-align: center;
line-height: 35px;
margin: auto;
margin-top: -100px;
position: absolute;
top: 45%;
width: 100%;
}
Try setting a z-index to the userlist div that is higher than the searchList so that you are able to click on the hyperlinks.
.userList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 20px Arial, Helvetica,sans-serif;
margin: auto;
z-index: 1000;
}
Absolute positioning is centering the searchList div in center without effecting other divs in the body. When you remove it, then the searchList div moves to the bottom because that is its location in the body.
I'm working on a custom PHP, modal login form. When I click the Login button, I receive the 404 resource not found, being my PHP file that handles the authentication.
The two files are here:
action_page.php
<?php
session_start();
$name = 'user1';
$pwd = 'home';
if(isset($_POST['submit'])){
// get vars
$username = $_POST['username'];
$password = $_POST['password'];
if ($username == $name and $password == $pwd){
redirect('http://www.mden.com');
} else {
redirect('http://www.youtube.com');
}
} else {
redirect('login.html');
}
?>
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
form {
border: 3px solid #f1f1f1;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
background-color: rgb(0,0,0,0.4);
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5px auto;
border: 1px solid #888;
width: 20%;
}
/* The Close Button */
.close {
/* Position it in the top right corner outside of the modal */
position: absolute;
right: 25px;
top: 0;
color: white;
font-size: 35px;
font-weight: bold;
}
/* Close button on hover */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
</style>
</head>
<body>
<!-- Button to open the modal login form -->
<button onclick="document.getElementById('id01').style.display='block'">Login</button>
<!-- The Modal -->
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content animate" method="post" action="/action_page.php">
<!-- No Avatar!!! -->
<!-- Login Info -->
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required><br /><br />
<label><b>Password</b></label>
<input type="text" placeholder="Enter Password" name="psw" required><br /><br />
<button name="do_login" type="submit">Login</button>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
The file path used in your form's action is correct?
Try remove the "/" from action="/action_page.php" if action_page.php stay on same directory.