I have had a problem with creating a if statement in order to display a default profile picture in case that the user hasn't uploaded their own profile picture. I have tried many examples online yet none of them seemed to have worked on my certain code and didn't reply to working, overall. I deleted my attempts to fixing the problem and gave the original code. Here's the current code I have:
<?php
session_start();
if (!isset($_SESSION['username'])) {
$_SESSION['msg'] = "You must log in first";
header('location: login.php');
}
if (isset($_GET['logout'])) {
session_destroy();
unset($_SESSION['username']);
header("location: login.php");
}
$username = $_SESSION['username'];
$file = "extra/" . $username . ".png";
?>
<html>
<title> Home Page </title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<header>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Downloads</li>
<li>Chat</li>
<li>Profile</li>
<li class="logout">Logout</li>
</ul>
</nav>
</div>
</header>
<body>
<div class="profileIMG">
<img src=<?php echo $file; ?> width="100" height="100">
</div>
<div class="profileNAME">
<<?php echo $username ?>
</div>
</body>
<footer>
<div class="status">Currently logged in as <?php echo $username ?></div>
</footer>
</html>
CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 13%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
font-size: 20px;
font-family: arial;
overflow: hidden;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
li a:target {
background-color: #4CAF50;
color: white;
}
li button {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li button.active {
background-color: #4CAF50;
color: white;
}
li button:hover:not(.active) {
background-color: #555;
color: white;
}
body {
background-image: url(extra/background.png);
margin: 0;
overflow: hidden;
}
h5 {
color: green;
margin-left: 6%;
font-family: arial;
font-size: 15px;
}
input[type=text] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 15px;
}
#player {
width: 200px;
height: 50px;
position: relative;
margin-left: 24px;
top: 18px;
}
#player i {
position: absolute;
margin-top: -6px;
color: #666;
}
#player i.fa-volume-down {
margin-left: -8px;
}
#player i.fa-volume-up {
margin-right: -8px;
right: 0;
}
#volume {
position: absolute;
left: 24px;
margin: 0 auto;
height: 5px;
width: 150px;
background: #555;
border-radius: 15px;
}
#volume .ui-slider-range-min {
height: 5px;
width: 300px;
position: absolute;
background: #2ecc71;
border: none;
border-radius: 10px;
outline: none;
}
#volume .ui-slider-handle {
width: 20px;
height: 20px;
border-radius: 20px;
background: #FFF;
position: absolute;
margin-left: -8px;
margin-top: -8px;
cursor: pointer;
outline: none;
z-index: 1;
}
.logStatus {
position: absolute;
bottom: 0;
}
The CSS is not needed but rather there to make viewing more pleasing. Also, the folder extra/ contains the images and the name of the default photo is defaultProfile.png.
Make this simple change at the top of your script where you are initialising your $file variable,
$file = 'extra/' . $username . '.png';
if (!file_exists($file))
$file = 'path-to-default-image';
To be fair, if you wanted to keep your code 'logical', you can flip the above check, so it sets $file to the default image location first and then if the user's image exists then switch to that:
$file = 'path-to-default-image';
if (file_exists('extra/' . $username . '.png'))
$file = 'extra/' . $username . '.png';
Reading Material
file_exists
Related
I have a table called admin tickets. I have this situation were one of these mails, which are on the left of the screen is clicked. Then I want to fetch subject/text, to this mail.
For example I'm clicking qweqweqwe#wp.pl, and it gives me 123123123123123.
The table looks like this:
For now the page looks like this, because I'm iterating over the whole table to the end. This looks good. The only change I want to make is as I said, I want to click the mail on the left, and get subject/text of this mail.
How can I achieve it?
Html+php:
<?php
require_once '../../services/LoggedInUserService.php';
require_once '../../services/LoggedInAdminService.php';
require_once '../../db/connect.php';
$connect = new mysqli($host, $db_user, $db_password, $db_name);
?>
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="../../css-images/style-admintickets.css">
</head>
<body>
<header>
<div class="row">
<ul id="logo"><img src="../../css-images/dingdog-logo.png"></ul>
<ul class="main-nav">
<li style="padding-left:10px">TICKETS</li>
<li style="padding-left:10px" id="sign">LOG OUT</li>
</ul>
</div>
<section>
<article>
<p id="profilesign">Tickets:</p>
<?php
$result = $connect->query("SELECT emailLogin,subject,text FROM tickets");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$emailLogin = $row['emailLogin'];
$subject = $row['subject']; ?>
<label> <input readonly id="fi" style="margin-top: 50px;" type="text" placeholder="Example"
name="custom" value="<?php echo $emailLogin; ?>"></label><br>
<div class="container" style='position:absolute;left:0px; top:0px;'>
<h1 id="avatar">Title:</h1>
<div class="title" style='position:absolute;left:0px; top:0px;'>
<h1 id="tytul" style='position:absolute;left:0px; top:0px;'><?php echo $subject; ?></h1>
</div>
<h1 id="subject">Subject:</h1>
<textarea readonly id="subjectContainer"
style='margin-top: 100px;margin-left: 150px;position:absolute;left:0; top:0;font-size:30px; color:red ;height: 264px;
width: 683px;' rows="5" cols="10"><?php echo $row['text']; ?></textarea>
</div>
<?php }
} ?>
</article>
</section>
</header>
<footer>
<img src="../../social/instagram.png"/>
<img src="../../social/twitter-white-logo.png"/>
<img src="../../social/facebook.png"/>
</footer>
</body>
</html>
Css:
*
{
margin: 0;
padding: 0;
}
header
{
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
height: 1080px;
width: auto;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img{
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
margin-right: 0px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo
{
margin-top: 10px;
float: left;
}
#sign a
{
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#profilesign
{
margin-top: 200px;
margin-left: 80px;
font: Bold 57px/46px Georgia;
font-weight: bold;
color: black;
}
article input
{
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 120;
border-style: none;
padding: 5px;
width: 240px;
height: 39px;
background-color: black;
}
#fi
{
font: Bold 25px/12px Arial;
letter-spacing: 0;
color: white;
background-color: black;
margin-left: 161px;
}
.container {
margin-top: 300px;
height: 447px;
width: 1028px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border-radius: 20px;
margin-left: 480px;
}
.title {
margin-top: 35px;
width: 686px;
height: 37px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 145px;
}
#avatar
{
font: Bold 25px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:50px;
margin-left: 50px;
}
#tytul
{
font: Bold 20px/24px Arial;
letter-spacing: 0;
color: #000000;
margin-top: 8px;
margin-left: 25px;
}
#subject
{
font: Bold 25px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:50px;
margin-left: 50px;
}
.subjectContainer
{
margin-top: 100px;
height: 264px;
width: 683px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 170px;
border-radius: 20px;
margin-top: 300px;
}
#subjectTitle
{
text-align: left;
font: Regular 20px/24px Arial;
letter-spacing: 0;
color: #000000;
padding-left: 5px;
}
#textare{
height: 600px;
width: 683px;
}
#media only screen and (max-device-width: 500px){
body {
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 70%);
background-size:100% 3000px;
width: auto;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
margin-right: 20px;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 31px/15px Arial;
padding: 5px;
}
#logo img
{
margin-left: 350px;
text-align: center;
width: 500px;
}
#profilesign
{
margin-top: 350px;
font-size: 90px;
margin-left: 360px;
width: 900px;
}
#tytul
{
font: Bold 40px/24px Arial;
letter-spacing: 0;
color: #000000;
margin-top: 20px;
margin-left: 25px;
}
#subjectText
{
font-size: 40px;
}
#fi
{
width: 500px;
margin-top: 500px;
font: Bold 45px/12px Arial;
letter-spacing: 0;
color: white;
background-color: black;
margin-left: 401px;
}
.container {
margin-top: 1000px;
height: 847px;
width: 1228px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border-radius: 20px;
margin-left: 20px;
}
.subjectContainer
{
margin-top: 150px;
height: 564px;
width: 883px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 185px;
border-radius: 20px;
}
#avatar
{
font: Bold 55px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:80px;
margin-left: 40px;
}
#subject
{
font: Bold 45px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:80px;
margin-left: 5px;
}
.title {
margin-top: 55px;
width: 686px;
height: 67px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 185px;
}
}
Hope This will help you
<section>
<article>
<p id="profilesign">Tickets:</p>
<?php
$result = $connect->query("SELECT emailLogin,subject,text FROM tickets");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$emailLogin = $row['emailLogin'];
echo '<form>
<label> <input id="fi" style="margin-top: 50px;" type="submit" placeholder="Example"
name="custom" value="'.$emailLogin.'"></label><br>
</form>';
}
}?>
<?php
if(isset($_GET['custom']))
{
$text = $_GET['custom'];
$result2 = $connect->query("SELECT emailLogin,subject,text FROM tickets WHERE emailLogin = '".$text."' ");
if ($result2->num_rows > 0) {
while ($row = $result2->fetch_assoc()) {
echo ' <div class="container" style="position:absolute;left:0px; top:0px;">
<h1 id="avatar">Title:</h1>
<div class="title" style="position:absolute;left:0px; top:0px;">
<h1 id="tytul" style="position:absolute;left:0px; top:0px;">'.$subject.'</h1>
</div>
<h1 id="subject">Subject:</h1>
<textarea readonly id="subjectContainer"
style="margin-top: 100px;margin-left: 150px;position:absolute;left:0; top:0;font-size:30px; color:red ;height: 264px;
width: 683px;" rows="5" cols="10">'.$row['text'].'</textarea>
</div>';
}
}
}
?>
</article>
</section>
I would probably use Ajax for this, and then get the information that way. So when you click one of the mails on the left, then you make a Ajax call to another .php, like this.
Lets say the mail is this image.
echo'<img class="MAILyouWantToAttach" data-id = "'.$MAILyouWantToAttach.'" src = "../text.png">';
The Ajax success respons has to change the textareas content by its value.
$(document).on("click", ".Unflagging", function(){
var text= $(this).data("id");
$.ajax({
method: "post",
url: "AnotherFile.php",
data: { text: text},
success: function(data) {
$("#myTextarea").val(data);
},
error: function(data) {
alert("Error occurs!")
}
});
});
Then the other php file you want something like this, the echo is to print the text in the success area of the Ajax in the other .php.
$receiver = $_POST["text"];
$result = $connect->query("SELECT emailLogin,subject,text FROM tickets WHERE emailLogin= $receiver ");
while ($row = $result->fetch_assoc()) {
echo $row['text'];
}
This is just a guide, but i hope it helps you on your way to success.
The button and text fields on my login page are unresponsive / I am unable to click or interact with them. It worked fine yesterday and is linked to a PHP database. I have no idea what code I changed but it was possibly CSS that has stopped it working. Any advice would be great as I am lost.
I have tried editing CSS but to avail.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Maoine in Eirinn (MIE) Wild Atlantic Gaeltacht Properties</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="container">
<?php include("includes/header.html");?>
<?php include("includes/nav.html");?>
<div id="content">
<?php
if (empty($_SESSION))
session_start();
if (isset($_SESSION['errors'])) {
echo "<div class='form-errors'>";
foreach($_SESSION['errors'] as $error)
{
echo "<p>";
echo $error;
echo "</p>";
}
echo "</div>";
}
unset($_SESSION['errors']);
?>
<div id="login">
<h3> Login </h3>
<form action="login_action.php" method="POST">
<p>
Username: <input type="text" name="adminname" required="required">
</p><p>
Password: <input type="password" name="password" required="required">
</p><p>
<input type="submit" value="Login">
</p>
</form>
</div>
</div>
<?php include("includes/footer.html");?>
</div>
</body>
</html>
body{background-color: #EEEEEE; }
#container{margin: auto;
width: 100%;
background-color: #EEEEEE;
border: 10px solid #EEEEEE;
}
#header{
background-color: #449966;
height: 110px;
margin-top: 38px;
}
#nav{background-color: #000000;
clear: left;
}
#moira{
float:right;
padding-right: 50px;
position: relative;
margin-left: 50px;
}
#martin{
float:right;
padding-right: 50px;
position: relative;
margin-left: 50px;
}
#openinghours{`
width: 30%;
float:left;
margin-left: 100px;}
#contactus{width: 50%;
float:left;
margin-bottom: 200px;}
#content{background-color: #EEEEEE;
padding: 50px;
min-height: 500px;
text-align: center;
}
#content a {background-color: #449966; color: white; text-decoration:none; padding:5px;}
#content a:hover {background-color: #878787; color: white;}
#footer{background-color: #449966;
height: 50px;
padding: 10px;
display: flex;
margin-top: 200px;
bottom: 0;
width: 100%;
position: fixed;
}
#comments {width: 70%; float: left;}
.container{
position: relative;
border-radius: 8px;
width: 90%;
height: 500px;
overflow: hidden;
}
#login{z-index: 100;}
#logo {float:left;}
#copyright {float:left;}
#footer ul{ text-align: center;
width: 50%;
margin: auto;}
#footer a{ color:#449966; }
#socialMedia{float:right; width: 150px; display: flex;}
#sitename{text-align: center;
width: 100%;}
#languageimage img{
border: 1px solid #ddd;
border-radius: 50%;
float:right;
display: flex;
vertical-align: top;}
table td {padding: 10px;}
table {width: 100%}
table tr:nth-child(1) {
background-color: #449966;
}
table tr {
background-color:#FFFFFF;
}
#displayproperties{width: 75%;}
#addtestimonial{width: 25%; margin-left: 50px; float: right;}
#addtestimonial table {border: 0px;}
#addtestimonial table tr td {padding: 0px; border: 0px;}
#addtestimonial table tr {background-color: #c6e1e0; border: 0px;}
.show {display:block;}
#commentform {
font-family: Arial;
width: auto;
}
label { float:left;
width: 50px;
clear: left;
text-align: left;
padding-right: 15px;
margin-top: 10px;
}
input, textarea {margin-top: 10px; }
#mysubmit { margin-left:65px;
padding-bottom: 10px;
}
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #449966;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
#youtubewaw{margin-bottom: 200px;}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #449966;
color: white;
}
.dropdown-content a:hover {
background-color: #449966;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media only screen and (max-width: 1200px) {
#openinghours{float:none;}
#addtestimonial{float:none;}
#media only screen and (max-width: 768px) {
body{font-size:90%;}
#displayproducts td:nth-child(1){display:none;}
#commentform{width: auto; font-size: 80%;}
#mysubmit{margin-left: 0;}
#openinghours{float:none;}
td:nth-of-type(4){display:none;}
#content{ padding: 0px;}}
#media screen and (max-width: 768px) {
#sitename{display:none;}
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 768px) {
#sitename{display:none;}
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
I noticed you have an accidental ` character.
#openinghours{`
width: 30%;
float:left;
margin-left: 100px;}
Also you've got some id called #mysubmit but your submit input doesn't use that ID.
I removed the below and everything works again. I don't understand why but I am fairly new to this
.container{
position: relative;
I am setting up an ID card printing software in PHP both for landscape and portrait mode. The problem is with the print() command it always takes the standard page sizes A4, A3... Because of this it prints the id in a specific section of the card.
Can anyone help or recommend something? Perhaps there is another way to print it without print preview in chrome?
<style>
#page {
/*size: A5;
margin: 5px;*/
width: 53.98mm;
height: 85.60mm;
margin: 0px;
}
#media print {
html, body {
/*width: 210mm;
height: 297mm;*/
/*width: 218mm;
height: 340mm;*/
}
}
#printablediv {
width: 53.98mm;
height: 85.60mm;
}
.idcardreport {
font-family: arial;
-webkit-print-color-adjust: exact;
}
/*IDcard Front Part Css Code*/
.idcardreport-frontend{
margin: 2px;
float: left;
border: 1px solid #000;
padding: 10px;
width: 260px;
text-align: center;
height:370px;
background-size: 100% 100% !important;
}
.logo img{
width: 50px;
height: 50px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
.pick img{
width: 60px;
height: 80px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
.signe img{
width: 50px;
height: 50px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
h3 {
font-size: 14px;
color: #1A2229;
text-align: center;
}
h2 {
font-size: 10px;
color: #1A2229;
text-align: center;
}
h1 {
font-size: 18px;
color: #1A2229;
text-align: center;
}
p {
text-align: left;
font-size: 12px;
margin-bottom: 0px;
margin-top: 1px;
color: #1A2229;
}
.vertical{
writing-mode:tb-rl;
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform:rotate(180deg);
transform: rotate(180deg);
white-space:nowrap;
display:block;
bottom:0;
}
</style>
<style>
#media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0px;
/*right: -400px;*/
top: 0;
}
}
button.btn.btn-dark {
padding: 10px;
position: relative;
top: -390px;
}
</style>
<button type="button" class="btn btn-dark" onclick="window.print()"><i class="fa fa-print"></i> Print</button>
<div class="wrapper" id="section-to-print"></div> //add ID on the section u want to print
This question already has an answer here:
Content appearing behind fixed header
(1 answer)
Closed 5 years ago.
In my project I use headers that are included in the webpage via php's include function. Then adding the page content I noticed that the code written in the page itself isn't added after the header but behind it.
here's the sample page's code:
<?php
require_once '../WebServices/functions.php';
sessionManager();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../style.css">
<title>DevLancer - Developer jobs for freelancers</title>
</head>
<body>
<?php
if (isset($_SESSION["USER_ID"])) {
require_once '../includes/header_signed-in.php';
} else {
require_once '../includes/header.php';
}
?>
<form class="create-roject">
<input type="text" placeholder="project name"><br>
<textarea></textarea>
</form>
<script type="text/javascript" src="/scripts.js"></script>
</body>
</html>
and here's the header file:
<header class="header-full">
<img class="logo" alt="logo" src="/Media/devlancer_vertical.png">
<div class="header-content">
<nav class="header-top">
<ul class="left-nav">
<li>
Post A Project
</li>
<li>
Find work
</li>
</ul>
<ul class="right-nav">
<li>
Become a member
</li>
<li>
Already a member? Log In
</li>
</ul>
</nav>
<nav class="header-bottom">
<ul class="left-nav">
<li>
<a>FAQ</a>
</li>
<li>
<a>Community</a>
</li>
<li>
<a>Blog</a>
</li>
<li>
<a>About Us</a>
</li>
</ul>
<ul class="right-nav">
<li>
<a class="header-contactus">Contact Us</a>
</li>
<li class="header-social">
<!--add social media links here-->
</li>
</ul>
</nav>
</div>
</header>
<?php
require_once '../includes/frmLogin.php';
require_once '../includes/frmRegister.php';
?>
and here's the styling of the header (scss):
.header-full {
width: 100%;
position: fixed;
top: 0px;
height: 128px;
left: 0px;
box-shadow: 0 0 4px 0 rgba(0,0,0,.08), 0 2px 4px 0 rgba(0,0,0,.12);
.logo {
position: absolute;
display: inline;
margin: 0px 50px;
height:128px;
width: 128px;
background-color: red;
}
.header-content {
display: inline-block;
position: absolute;
left: 229px;
border-left: solid 1px #ececec;
top: 0px;
width: calc(100% - 230px);
height: 128px;
.header-top {
display: block;
width: 100%;
height:87px;
border-bottom: solid 1px #ececec;
.nav {
top:0;
margin: 0;
padding: 0;
height: 87px;
list-style-type: none;
padding-left: 40px;
li {
position: relative;
top: -32px;
display: inline;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
margin-left: 20px;
margin-right: 20px;
height: 87px;
input[type="search"] {
position: relative;
padding: 10px;
border-style: solid;
border-color: #0fa20f;
border-width: 3px;
border-radius: 10px;
font-size: 16px;
font-family: sans-serif;
top:-5px;
}
img {
position: relative;
top: 0;
display: inline;
padding: 0;
height: 87px;
border-radius: 50px;
}
img:hover {
cursor:pointer;
}
a:link {
text-decoration: none;
color: black;
animation-name: green2black;
animation-duration: .5s;
}
a:visited {
text-decoration: none;
color: black;
animation-name: green2black;
animation-duration: .5s;
}
a:hover {
text-decoration: none;
color: #0fa20f;
animation-name: black2green;
animation-duration: .5s;
}
a:active {
text-decoration: none;
color: black;
animation-name: green2black;
animation-duration: .5s;
}
}
}
.left-nav {
display: inline;
float:left;
vertical-align: middle;
list-style-type: none;
margin: 0;
li {
position: relative;
top: 32px;
bottom: 32px;
display: inline;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
margin-left: 20px;
margin-right: 20px;
a:link {
text-decoration: none;
color: black;
animation-name: green2black;
animation-duration: .5s;
}
a:visited {
text-decoration: none;
color: black;
animation-name: green2black;
animation-duration: .5s;
}
a:hover {
text-decoration: none;
color: #0fa20f;
animation-name: black2green;
animation-duration: .5s;
}
a:active {
text-decoration: none;
color: black;
animation-name: green2black;
animation-duration: .5s;
}
}
}
.right-nav {
display: inline;
float:right;
padding-right: 40px;
vertical-align: middle;
list-style-type: none;
margin: 0;
li {
padding: 10px;
border-style: solid;
border-color: #0fa20f;
border-radius: 15px;
position: relative;
top: 32px;
bottom: 32px;
display: inline;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
animation-name: border-black2green;
animation-duration: .5s;
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: none;
color: #0fa20f;
}
a:active {
text-decoration: none;
color: black;
}
}
li:hover {
padding: 10px;
border-style: solid;
border-color: black;
border-radius: 15px;
position: relative;
top: 32px;
bottom: 32px;
display: inline;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
animation-name: border-green2black;
animation-duration: .5s;
a:link {
text-decoration: none;
color: #0fa20f;
animation-name: black2green;
animation-duration: .5s;
}
a:visited {
text-decoration: none;
color: #0fa20f;
animation-name: black2green;
animation-duration: .5s;
}
a:hover {
text-decoration: none;
color: #0fa20f;
animation-name: black2green;
animation-duration: .5s;
}
a:active {
text-decoration: none;
color: #0fa20f;
animation-name: black2green;
animation-duration: .5s;
}
}
}
}
.header-bottom {
display: block;
width: 100%;
height: 41px;
.left-nav {
display: inline;
float: left;
margin: 0;
li {
top: 11px;
bottom: 11px;
position: relative;
display: inline;
font-family: sans-serif;
font-size: 16px;
font-weight: bold;
margin-left: 20px;
margin-right: 10px;
}
}
.right-nav {
display: inline;
float: right;
margin: 0;
padding-right: 40px;
padding-left: 0;
li {
top: 11px;
bottom: 11px;
position: relative;
display: inline;
font-family:sans-serif;
font-size: 16px;
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
}
}
}
}
}
I checked everything including z-index and searched the web for similar cases. please help!
found the error: as the header set to fixed it is being removed from the page flow. just added "margin-top: 128px" and everything is fixed. also discovered that it's a duplicate of this question.
I am fetching data images from database and wish to place maximum 3 images in a single row and these images also have hover effect on them which is working fine
problem that i am facing is that if i am using this code to display static images then it is working fine but if i fetch the data from database then it is not displaying properly. i want to display images in this form
1st_image 2nd_image 3rd_image
4th_image 5th_image 6th_image
7th_image .. and so on
but i am getting images in this form
1st_image
2nd_image
3rd_image
4th_image
5th_image
6th_image
The code that i have is
code of my front page is
<?php
$sql = "SELECT * FROM category";
$result = mysqli_query($con, $sql);
if (mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{
$catname=$row["catname"];
$catdesc=$row["catdesc"];
$catpic=$row["catpic"];
$id=$row["id"];
?>
<div id="effect-2" class="effects clearfix">
<div class="img">
<img src="<? echo $catpic; ?>" alt="">
<div class="overlay">
content
<a class="close-overlay hidden">x</a>
</div>
</div>
</div>
<?}
}?>
code on css page is
nav ul {
list-style-type: none;
margin: 0 0 30px 0;
padding: 0;
text-align: center;
}
nav ul li {
display: inline-block;
margin-bottom: 4px;
}
nav ul li a {
display: block;
padding: 5px 20px;
color: #fff;
background-color: #32c896;
}
nav ul li a:hover {
color: #fff;
background-color: #238b68;
}
nav ul li a.active {
color: #fff;
background-color: #238b68;
}
.effects {
padding-left: 15px;
}
.effects .img {
position: relative;
float: left;
margin-bottom: 5px;
width: 25%;
overflow: hidden;
}
.effects .img:nth-child(n) {
margin-right: 5px;
}
.effects .img:first-child {
margin-left: -15px;
}
.effects .img:last-child {
margin-right: 0;
}
.effects .img img {
display: block;
margin: 0;
padding: 0;
max-width: 100%;
height: auto;
}
.overlay {
display: block;
position: absolute;
z-index: 20;
background: rgba(0, 0, 0, 0.8);
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
a.close-overlay {
display: block;
position: absolute;
top: 0;
right: 0;
z-index: 100;
width: 45px;
height: 45px;
font-size: 20px;
font-weight: 700;
color: #fff;
line-height: 45px;
text-align: center;
background-color: #000;
cursor: pointer;
}
a.close-overlay.hidden {
display: none;
}
a.expand {
display: block;
position: absolute;
z-index: 100;
width: 60px;
height: 60px;
border: solid 5px #fff;
text-align: center;
color: #fff;
line-height: 50px;
font-weight: 700;
font-size: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
}
#effect-2 .overlay {
top: 0;
left: 0;
right: 0;
width: 100%;
height: 0;
}
#effect-2 .overlay a.expand {
left: 0;
right: 0;
top: 50%;
margin: -30px auto 0 auto;
}
#effect-2 .img.hover .overlay {
height: 100%;
}
can anyone tell me how to do so
You should use unique ids in your html. I recommend to always use classes instead of id. You can do something like this in your CSS
div[id^="tocolor-"] {
/* some css rules */
}
div[id^="tocolor-"] .overlay {
/* some css rules */
}
And in your html you can add an id using database table id like this
<div id="effect-<?php echo $id; ?>" class="effects clearfix">
Why not use bootstrap and use col-xs-4 class...which will make sure you always have 3 columns
<div id="effect-2" class="col-xs-4">
<div class="img">
<img src="<? echo $catpic; ?>" alt="">
<div class="overlay"> content
<a class="close-overlay hidden">x</a>
</div>
</div>
</div>