Website images recently disappeared - php

I have a php file, and I am fairly novice at website development, but I've been helping a friend out. On the site we had some images that have been there for months, and recently they disappeared. I know the path to the images is still correct, and nothing with the coding has changed. Any ideas on why this could be broken? The pictures were in the div class = "graphicbuttons_cont"
$poli_more = do_shortcode('[pl_modal title="Buy & Sell" type="tab_links" label="<img class=\'\' title=\'Buy & Sell\' src=\'/wp-content/uploads/2013/02/buysell_icon.png\' /><br /><span>Buy & Sell</span>"]{27}[/pl_modal]');
$feed_back = do_shortcode('[pl_modal title="Feedback" type="tab_links" label="<img class=\'\' title=\'Feedback\' src=\'/wp-content/uploads/2013/02/feedback_icon.png\' /><br /><span>Feedback</span>"][gravityform id=4 title=false ajax=true field_values=\'store_page_id={28}\'][/pl_modal]');
$email_list = do_shortcode('[pl_modal title="email list" label="<img class=\'\' title=\'email list\' src=\'/wp-content/uploads/2013/02/email_icon.png\' /><br /><span>email list</span>"][gravityform id=1 title=false][/pl_modal]');
$desc_template = '<div id="header_container">' .
'<h1 style="text-transform: uppercase;" class="entry-title">' .
'Game on {0}' .
'</h1>' .
'</div>' .
'<div class="store_banner_class">' .
'<img style="height: 145px; width: 100%;" src="{33}" class="banner_img" />' .
'</div>' .
'<div class="graphicbuttons_area">' .
'<div class="graphicbuttons_cont">' .
$poli_more.
'</div>' .
'<div class="graphicbuttons_cont">' .
'<a href="https://maps.google.com/maps?saddr={25}&daddr={26}" target="_blank">
<img title="Directions" src="/wp-content/uploads/2013/02/getdirection_icon.png" /><br /><span>Directions</span>
</a>' .
'</div>' .
'<div class="graphicbuttons_cont">' .
'<a title="Follow " href="{29}" target="_blank">
<img title="Follow" src="/wp-content/uploads/2013/02/fblikeus_icon.png" /><br /><span>Follow </span>
</a>' .
'</div>' .
'<div class="graphicbuttons_cont">' .
$email_list.
'</div>' .
'<div class="graphicbuttons_cont">' .
'<a title="Review " href="{30}" target="_blank">
<img title="Review" src="/wp-content/uploads/2013/02/gplus_icon.png" /><br /><span>Review </span>
</a>' .
'</div>' .
'<div class="graphicbuttons_cont">' .
$feed_back.
'</div>' .
'</div>' .
Here's the style.css page,
#main_container {
padding: 30px;
background: #f1f1ef;
margin-top: -15px;
margin-bottom: 20px;
}
#store_image_container {
float: left;
width: 33%;
}
#gen_info_container {
float: left;
width: 61%;
margin-left: 60px;
}
#header_container h1 {
text-transform: uppercase;
float: left;
line-height: 32px;
font-size: 24px;
color: #ffffff;
padding-left: 10px;
}
#header_container {
background-color: #474647;
padding: 5px;
height: 32px;
margin-top: 20px;
}
#store_image_container img {
margin-bottom: 20px;
}
#data_gen_info {
margin-bottom: 22px;
clear: both;
}
#label_gen_info, .social-icon a {
font-size: 12px;
color: #37a8ab;
}
#label_notefrmowner {
font-size: 22px;
color: #B98BBF;
}
#data_notefrmowner {
margin-bottom: 30px;
}
#data_gen_info div table, #data_notefrmowner div table {
border: 0px;
}
#data_gen_info div table tr td, #data_notefrmowner div table tr td {
border: 0px;
}
#map_slideout {
display: none;
height: 410px;
}
#menu_cont {
float: right;
margin-right: 20px;
line-height: 32px;
}
#slider_button {
z-index: 1035;
height: 20px;
}
#click_btn {
background: url("viewstorelocator.png") no-repeat scroll 0 0 transparent;
padding: 0 196px 30px 0;
position: absolute;
right: 15px;
top: 0;
}
.tab_links, .tab_links:hover {
color: #ffffff;
margin: 0 10px 0 10px;
font-size: 12px;
text-transform: uppercase;
background-color: transparent;
text-shadow: 0 0 0 transparent; display: inline-block;
}
#sl_div img {
max-width: none;
}
#directionurl {
background: #37A8AB;
color: #ffffff;
box-shadow: none;
text-shadow: none;
border: 0px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 4px 10px;
font-size: 12px;
}
.social-icon {
float: left;
margin-right: 10px;
width: 31%;
}
.social-icon a {
color: #37A8AB;
}
.social-icon span {
display: inline-block;
width: 100%;
text-transform: uppercase;
}
.social-icon .social-icon-inner {
height: 130px;
}
.store_banner_class{
width: 100%;
overflow: hidden;
}
.banner_img{
height: 330px;
width: 100%;
}
.graphicbuttons_area{
background: none repeat scroll 0 0 #F1F1EF;
padding: 20px 0px;
text-align: center;
}
.graphicbuttons_cont{
display: inline-block;
margin: 0 15px;
}
.graphicbuttons_cont span{
color: #37A8AB;
font-family: "Montserrat";
font-size: 14px;
text-transform: uppercase;

This has nothing to do with your CSS and everything to do with your image locations...your urls in your php code are /wp-content/uploads/2013/02/fblikeus_icon.png and the url being printed in your live site are /portugal/wp-content/uploads/2013/02/fblikeus_icon.png
I would suggest figuring out why there is a discrepancy there. When I take /portugal/ out of your paths in Chrome's dev tools...your images show up fine.

Related

keeps adding margin after every sql result

I have a big problem and i hope someone can help me,
i created a platform where admin's can respond to tickets but when a ticket is recieved it automaticly generates margin-top of the results body. So when a new ticket is recieved it addes more margin. I've added screenshots to make it more understandable. Sorry for the messy code :o i always optimize & make it more secure when i approach the final stage :)
Ticket total overview
`
<?php
//starten van sessie
session_start();
//declaratie van sessie variabelen
$status = $_SESSION['account_status'];
if(!isset($_SESSION['username']))
{
header("Location: ../index.php");
}else {
if ($status == '1'){
//admin waarde ophalen
require('../procces_files/admin_waarde_ophalen.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>-</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../css/style.scss" rel="stylesheet" type="text/css"/>
<header class="header">
Support
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li> Open tickets</li>
<?php if($admin2 == 1) { ?><li>Gesloten tickets</li><?php }
if($admin2 == 0) { ?><li>Ticket aanmaken</li><?php }
if($admin2 == 0) { ?><li>FAQ</li><?php }?>
<li>Uitloggen</li>
</ul>
</header>
<body>
<div id="lichaam2">
<img id="flexa-logo3" src="../img/flexa.png" alt="flexamedia logo"/>
<?php
//if user is a 'admin'
if($admin2 == 1) {
//retrieving tickets 'telefonie'
?><section id="cat-container"><div id="telefonie"><?php
//file voor overzicht tickets alle gebruikers
require('../procces_files/ticket_overzicht_telefonie.php');
?></div><?php
//retrieving tickets 'website-onderhoud'
?><div id="website"><?php
//file voor overzicht tickets alle gebruikers
require('../procces_files/ticket_overzicht_website.php');
?></div><?php
//retrieving tickets 'ICT-helpdesk'
?><div id="ict"><?php
//file voor overzicht tickets alle gebruikers
require('../procces_files/ticket_overzicht_ict.php');
?></div></section><?php
}
//if user is a 'normal user'
if($admin2 == 0) {
?><div id="blok-container2"><?php
//file voor overzicht tickets per gebruiker
require('../procces_files/ticket_overzicht_per_gebruiker.php');
?></div><?php
}
?>
</div>
</body>
</html>
<?php }else {
header('location: ../procces_files/account_niet_geactiveerd.php');
}} ?>
require code for ticket retrieving 'telefonie'
<?php
//checkt of een ticket recent is verwijderd, zoja? laat dan tekst zien
if (!isset($_SESSION['message'])){
$_SESSION['message'] = ' ';
};
if ($_SESSION['message'] == 'Ticket verwijderd') {
?><script>alert('U heeft de ticket verwijderd');</script> <?php
$_SESSION['message'] = ' ';
}
//database configuratie file
require('dbconfig.php');
//admin waarde ophalen
require('../procces_files/admin_waarde_ophalen.php');
//beveiliging dat voorkomt dat 'geen admin' gebruikers dit bestand kunnen uitvoeren en tickets kunnen verwijderen
if ($admin2 == '1') {
$username = $_SESSION['username'];
//verwerking ophalen tickets per gebruiker en voor elke afdeling
$showTicketsQuery = "SELECT * FROM tickets order by id DESC";
$result = mysqli_query($mysqli, $showTicketsQuery) or die(mysqli_error($result));
?>
<h1>Telefonie</h1>
<table>
<div class='ticket'><tr><th><b>Ticket NR</b></th><th><b>Naam:</b></th><th><b>Onderwerp</b></th><th><b>Debiteur</b></th><th><b>Acties</b></th></tr>
<?php
while($row = mysqli_fetch_array($result))
{
if ($row['status'] == '0'){
if ($row['afdeling'] == 'Telefonie'){
//een table met ticket resultaten
echo "<tr><td>" . $row['id'] . "</td>" . "<td>" . $row['naam'] . "</td><td>" . $row['onderwerp'] . "</td><td>" . $row['maker'] . "</td><td>" . '<a class="naarticket" onclick="test" href="../procces_files/ticket_verwijder_procces.php?del=' . $row['id'] . '">del</a>' . '<br><a class="naarticket" href="../procces_files/ticket_overley.php?view=' . $row['id'] . '"' . ';>inzien</a>' . '<br><a class="naarticket" href="../procces_files/ticket_status_update.php?sluit=' . $row['id'] . '"' . ';>sluit</a>' . "</td></tr><BR><BR></div>";
}
}}
?>
</table>
<?php
}else {
echo '<h2 style="color:red;">ACCES DENIED <br>Deze site is beveiligd tegen dit soort dingen :)</h2>';
}
?>
retrieving tickets 'website
<?php
//checkt of een ticket recent is verwijderd, zoja? laat dan tekst zien
if (!isset($_SESSION['message'])){
$_SESSION['message'] = ' ';
};
if ($_SESSION['message'] == 'Ticket verwijderd') {
?><script>alert('U heeft de ticket verwijderd');</script> <?php
$_SESSION['message'] = ' ';
}
//database configuratie file
require('dbconfig.php');
//admin waarde ophalen
require('../procces_files/admin_waarde_ophalen.php');
//beveiliging dat voorkomt dat 'geen admin' gebruikers dit bestand kunnen uitvoeren en tickets kunnen verwijderen
if ($admin2 == '1') {
$username = $_SESSION['username'];
//verwerking ophalen tickets per gebruiker en voor elke afdeling
$showTicketsQuery = "SELECT * FROM tickets order by id DESC";
$result = mysqli_query($mysqli, $showTicketsQuery) or die(mysqli_error($result));
?>
<h1>Website Onderhoud</h1>
<table>
<div class='ticket'><tr><th><b>Ticket NR</b></th><th><b>Naam:</b></th><th><b>Onderwerp</b></th><th><b>Debiteur</b></th><th><b>Acties</b></th></tr>
<?php
while($row = mysqli_fetch_array($result))
{
if ($row['status'] == '0'){
if ($row['afdeling'] == 'Website-onderhoud'){
//een table met ticket resultaten
echo "<tr><td>" . $row['id'] . "</td>" . "<td>" . $row['naam'] . "</td><td>" . $row['onderwerp'] . "</td><td>" . $row['maker'] . "</td><td>" . '<a class="naarticket" onclick="test" href="../procces_files/ticket_verwijder_procces.php?del=' . $row['id'] . '">del</a>' . '<br><a class="naarticket" href="../procces_files/ticket_overley.php?view=' . $row['id'] . '"' . ';>inzien</a>' . '<br><a class="naarticket" href="../procces_files/ticket_status_update.php?sluit=' . $row['id'] . '"' . ';>sluit</a>' . "</td></tr><BR><BR></div>";
}
}}
?>
</table>
<?php
}else {
echo '<h2 style="color:red;">ACCES DENIED <br>Deze site is beveiligd tegen dit soort dingen :)</h2>';
}
?>
Retrieving tickets 'ict'
<?php
//checkt of een ticket recent is verwijderd, zoja? laat dan tekst zien
if (!isset($_SESSION['message'])){
$_SESSION['message'] = ' ';
};
if ($_SESSION['message'] == 'Ticket verwijderd') {
?><script>alert('U heeft de ticket verwijderd');</script> <?php
$_SESSION['message'] = ' ';
}
//database configuratie file
require('dbconfig.php');
//admin waarde ophalen
require('../procces_files/admin_waarde_ophalen.php');
//beveiliging dat voorkomt dat 'geen admin' gebruikers dit bestand kunnen uitvoeren en tickets kunnen verwijderen
if ($admin2 == '1') {
$username = $_SESSION['username'];
//verwerking ophalen tickets per gebruiker en voor elke afdeling
$showTicketsQuery = "SELECT * FROM tickets order by id DESC";
$result = mysqli_query($mysqli, $showTicketsQuery) or die(mysqli_error($result));
?>
<h1>ICT-Helpdesk</h1>
<table>
<div class='ticket'><tr><th><b>Ticket NR</b></th><th><b>Naam:</b></th><th><b>Onderwerp</b></th><th><b>Debiteur</b></th><th><b>Acties</b></th></tr>
<?php
while($row = mysqli_fetch_array($result))
{
if ($row['status'] == '0'){
if ($row['afdeling'] == 'ICT-Helpdesk'){
//een table met ticket resultaten
echo "<tr><td>" . $row['id'] . "</td>" . "<td>" . $row['naam'] . "</td><td>" . $row['onderwerp'] . "</td><td>" . $row['maker'] . "</td><td>" . '<a class="naarticket" onclick="test" href="../procces_files/ticket_verwijder_procces.php?del=' . $row['id'] . '">del</a>' . '<br><a class="naarticket" href="../procces_files/ticket_overley.php?view=' . $row['id'] . '"' . ';>inzien</a>' . '<br><a class="naarticket" href="../procces_files/ticket_status_update.php?sluit=' . $row['id'] . '"' . ';>sluit</a>' . "</td></tr><BR><BR></div>";
}
}}
?>
</table>
<?php
}else {
echo '<h2 style="color:red;">ACCES DENIED <br>Deze site is beveiligd tegen dit soort dingen :)</h2>';
}
?>
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#1,300&display=swap');
* {
font-family: 'Open Sans', sans-serif;
text-decoration: none;
overflow: none;
}
#media only screen and (max-width: 767px) {
body {
background-color: #2d3e56;
}
#blok-container2 {
background-color: #2d3e56;
position: absolute;
margin-top: 300px;
width: 90%;
min-height: 400px;
color: white;
margin-left: 20px;
}
.naarticket {
color: white;
}
#blok-container-aanmaakform {
background-color: #2d3e56;
margin-top: 560px;
width: 100%;
}
#blok-container-overview {
background-color: #2d3e56;
margin-top: 720px;
width: 100%;
color: white;
}
#blok-container-faq {
background-color: #2d3e56;
margin-top: 180px;
width: 100%;
color: white;
text-align: center;
}
#blok-container-admin-tickets {
background-color: #2d3e56;
position: absolute;
margin-top: 120px;
width: 90%;
min-height: 400px;
color: white;
}
.textfield {
width: 90%;
height: 200px;
margin-left: 10px;
background-color:#2d3e56 ;
border-right: none;
border-left: none;
border-top: none;
border-bottom: solid grey 1px;
color: white;
padding: 10px;
font-size: 24px;
}
.verwerkknoppen {
margin-top: 5px;
color: white;
}
#flex-container {
display: flex;
border-bottom: solid grey 1px;
margin-bottom: 5px;
padding-bottom: 5px;
}
#bijlageinfo {
float: right;
overflow:scroll;
height:85px;
}
#ticketinfos {
width: 320px;
}
form {
margin-top: 50px;
}
#overview-reply-textarea {
width: 90%;
height: 50px;
margin-left: 10px;
background-color:#2d3e56 ;
border-right: none;
border-left: none;
border-top: none;
border-bottom: solid grey 1px;
color: white;
padding: 10px;
font-size: 24px;
}
#berichten {
overflow:scroll; height:300px;
}
.velden {
width: 90%;
margin-left: 10px;
background-color:#2d3e56 ;
border-right: none;
border-left: none;
border-top: none;
border-bottom: solid grey 1px;
color: white;
padding: 10px;
font-size: 24px;
}
#blok-container {
width: 350px;
}
#blok-container-register {
width: 350px;
margin-top: -40px;
}
#flexa-logo {
width: 150px;
justify-content: center;
justify-self: center;
}
#flexa-logo-reg {
width: 150px;
justify-content: center;
justify-self: center;
margin-top: 200px;
}
#flexa-logo3 {
display: none;
}
#lichaam {
margin-left: 20px;
margin-right: 20px;
display: flex;
flex-direction: column;
height: 500px;
align-items: center;
justify-content: center;
}
#lichaam2 {
margin-left: 10px;
margin-right: 10px;
display: flex;
flex-direction: column;
height: 30px;
align-items: center;
justify-content: center;
}
.voorwaarde-tekst {
color: white;
}
.voorwaarde-link {
color: white;
text-decoration-line: underline !important;
}
.submitknop {
background-color: grey;
color: white;
width: 140px;
height: 50px;
border: none;
font-size: 20px;
margin-left: 100px;
margin-top: 2px;
}
.aanmeldtekst {
color: white;
text-align: center;
}
#register {
color: white;
text-decoration-line: underline !important;
}
table, th, td {
border-right: none;
border-left: none;
border-top: none;
border-bottom: solid grey 1px;
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
#tabel {
margin-left: 10px;
margin-right: 10px;
top: 0;
bottom: 0;
}
//deactivatie scrollbars
#ticket2::-webkit-scrollbar { width: 0 !important }
#berichten::-webkit-scrollbar { width: 0 !important }
}
#media only screen and (min-width: 768px) {
body {
background-color: #2d3e56;
}
#alletickers {
position: absolute;
margin-top: 400px;
}
#blok-container2 {
background-color: #2d3e56;
position: absolute;
margin-top: 270px;
width: 90%;
height: 100px;
color: white;
justify-content: center;
justify-self: center;
display: flex;
}
.naarticket {
color: white;
}
#blok-container-aanmaakform {
background-color: #2d3e56;
margin-top: 560px;
width: 100%;
}
#blok-container-overview {
background-color: #2d3e56;
margin-top: 1100px;
width: 100%;
color: white;
}
#blok-container-faq {
background-color: #2d3e56;
margin-top: 180px;
width: 100%;
color: white;
text-align: center;
}
#blok-container-admin-tickets {
background-color: #2d3e56;
position: absolute;
margin-top: 820px;
width: 90%;
// overflow:scroll;
min-height: 400px;
color: white;
}
#cat-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: 'item1 item2 item3';
margin-top: 450px;
z-index: 70;
}
#telefonie {
grid-area: item1;
}
#website {
grid-area: item2;
}
#ict {
grid-area: item3;
}
grid-area: alletickets;
.textfield {
width: 97.5%;
height: 200px;
margin-left: 10px;
background-color:#2d3e56 ;
border-right: none;
border-left: none;
border-top: none;
border-bottom: solid grey 1px;
color: white;
padding: 10px;
font-size: 24px;
}
.verwerkknoppen {
margin-top: 5px;
color: white;
}
#flex-container {
display: flex;
border-bottom: solid grey 1px;
margin-bottom: 5px;
padding-bottom: 5px;
}
#bijlageinfo {
float: right;
margin-left: 100px;
overflow:scroll;
height:85px;
min-width: 400px;
}
form {
margin-top: 50px;
}
#overview-reply-textarea {
width: 90%;
height: 50px;
margin-left: 10px;
background-color:#2d3e56 ;
border-right: none;
border-left: none;
border-top: none;
border-bottom: solid grey 1px;
color: white;
padding: 10px;
font-size: 24px;
}
#berichten {
overflow:scroll; height:700px;
}
.velden {
width: 97.5%;
margin-left: 10px;
background-color:#2d3e56 ;
border-right: none;
border-left: none;
border-top: none;
border-bottom: solid grey 1px;
color: white;
padding: 10px;
font-size: 24px;
}
#blok-container {
width: 350px;
}
#blok-container-register {
width: 350px;
margin-top: -40px;
}
#flexa-logo {
width: 150px;
justify-content: center;
justify-self: center;
}
#flexa-logo-reg {
width: 150px;
justify-content: center;
justify-self: center;
margin-top: 200px;
}
#flexa-logo3 {
display: none;
}
#lichaam {
margin-left: 20px;
margin-right: 20px;
display: flex;
flex-direction: column;
height: 500px;
align-items: center;
justify-content: center;
}
#lichaam2 {
margin-left: 10px;
margin-right: 10px;
display: flex;
flex-direction: column;
height: 30px;
align-items: center;
justify-content: center;
}
.voorwaarde-tekst {
color: white;
}
.voorwaarde-link {
color: white;
text-decoration-line: underline !important;
}
.submitknop {
background-color: grey;
color: white;
width: 140px;
height: 50px;
border: none;
font-size: 20px;
margin-left: 100px;
margin-top: 2px;
}
.aanmeldtekst {
color: white;
text-align: center;
}
#register {
color: white;
text-decoration-line: underline !important;
}
table, th, td {
border-right: none;
border-left: none;
border-top: none;
border-bottom: solid grey 1px;
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
#tabel {
margin-left: 10px;
margin-right: 10px;
}
/*deactivatie van scrollbar*/
#ticket2::-webkit-scrollbar { width: 0 !important }
#berichten::-webkit-scrollbar { width: 0 !important }
}
//css voor mobile + desktop menu
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
Here's the application in a screenshot,
as you can see in the first screenshot we haven't recieved a new ticket yet
click for the screenshot
in the next screenshot we have recieved a ticket and it creates automatically margin on top..
click for the screenshot
and again after recieving another ticket, it generated more margin on top
Click for the screenshot
The invalid HTML you are creating is causing your problem here.
This isn’t an actual margin in a CSS sense - it is those br element you placed in a position where they are not allowed.
Your code, reduced to the necessary bits, is basically
<table>
<div class='ticket'><tr><th>foobar</th></tr><BR><BR></div>
<div class='ticket'><tr><th>foobar</th></tr><BR><BR></div>
<div class='ticket'><tr><th>foobar</th></tr><BR><BR></div>
</table>
If you use your browser’s element inspector to see what DOM it has created based on that, you will likely see something like the following (this is from Chrome, but other HTML5 compatible browsers should handle this pretty much the same):
<div class="ticket"></div>
<br>
<br>
<div class="ticket"></div>
<br>
<br>
<div class="ticket"></div>
<br>
<br>
<table>
<tbody>
<tr><th>foobar</th></tr>
<tr><th>foobar</th></tr>
<tr><th>foobar</th></tr>
</tbody>
</table>
So, you need to fix your broken HTML here.
Something to consider.
Have you check you html rendered for php error ?
You can do that with Firefox / Chrome / Opera / Safari "Inspect Element" and search for 'php error'
Sometimes my page rendered out of align because I have php error rendered within HTML page

Id card printing 85.60mm X 53.98mm

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

PHP default profile picture setting

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

Checkbox that expands inside Wordpress Loop

I have created my own style for my Wordpress loop, which displays images for the 10 most recent post in a Bootstrap scaffold.
Each image has a label you can click to expand information. However, no matter which checkbox you click, it will only open and close the first post in the loop.
I have tried assigning li and child li values to the css and moving the checkbox label further into the loop. Nothing helped as of yet. I'm sure this has something to do with the fact that, since it's in the loop, I can't assign each checkbox to a specific post. There is only one [for="check"]
Is this checkbox idea feasible?
HTML:
<li class="<?php echo $span; ?>">
<?php
echo '<div class="postexpander"><label for="check"><div class="postarrow"> <p>Expand Info <span class="glyphicon glyphicon-plus"></span></p></div></label>';
echo '<input id="check" type="checkbox">';
echo '<div class="posttext" onclick="posttext:hover">';
echo '<p class="posthead">';
echo '<a href="' . get_permalink( $thumbnail->ID ) . '" title="' . esc_attr( $thumbnail->post_title ) . '">';
the_title();
echo '</a>';
echo '</p><p class="postdate">';
the_date('F jS, Y');
echo '</p><p class="postcontent">';
$content = get_the_content();
$trimmed_content = wp_trim_words( $content, 15,"...".'<p class="readmore"> Read More' );
echo $trimmed_content;
echo '</p>';
echo '</div></div>';
if(has_post_thumbnail()) {
$image_src = the_post_thumbnail( 'custom-size', array( 'class' => "postimage" ) );
echo '<a href="' . get_permalink( $thumbnail->ID ) . '" title="' . esc_attr( $thumbnail->post_title ) . '">';
echo '</a>';}?>
</li>
<?php
//End the post loop
endwhile; else:
?>
CSS:
.postroll .col-md-6 img {
max-height:400px;
min-width: 200px;
margin: -5px 0px -5px 0px;
}
.postroll .col-md-3 img {
max-height:200px;
min-width: 100px;
}
.col-md-6 {
padding: 0px !important;
}
.row {
clear: both;}
.postimage {
text-decoration: none;
opacity:.5;
width: 100%;
height: auto;
padding: 5px 0 5px 0;
filter: grayscale(50%);
}
.postexpander {
opacity:1;
position: absolute;
width: 100%;
height: 100%;
text-align: right;
z-index: 5;
}
.postexpander:hover ~ .postimage {
opacity: 1;
filter: grayscale(0%);
webkit-box-shadow: 0px 0px 76px -16px rgba(34,35,36,1);
-moz-box-shadow: 0px 0px 76px -16px rgba(34,35,36,1);
box-shadow: 0px 0px 76px -16px rgba(34,35,36,1);
}
.posttext {
opacity:0;
width: 0px;
height: 100%;
margin-left: 100%;
top:0;
overflow:hidden;
position: absolute;
background:rgba(255,255,255,0.95); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
zoom: 1;
z-index: 1;
}
.postroll input {
display: none;
}
.postarrow {
font-size: 12px;
text-align: center;
padding: 5px;
width: 40px;
height: 100%;
text-align: right;
margin-left: 90%;
background-color: rgba(51, 68, 122, 1);
border-left: 3px solid #13EBC7;
float: right;
display:block;
}
.postarrow p{
color:white;
font-size: 100%;
width: 120px;
height:20px;
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
-ms-transform-origin: 50% 270%; /* IE 9 */
-webkit-transform-origin: 50% 270%; /* Chrome, Safari, Opera */
transform-origin: 50% 270%;
}
.postroll label:hover .postarrow {
background: #3498db;
}
input:checked + .posttext {
opacity:1;
width:100%;
margin-left:0%;
}
.posthead {
color: #0587F2;
font-size: 200%;
font-weight: bolder;
float:left;
text-align:right;
margin-top: -2px;
padding: 5px;
width: 60%;
height: 100%;
vertical-align: top;
display: block;
overflow: hidden;
border-right: 3px solid #13EBC7;
z-index:2;
}
.postdate{
color:#5C5C5C;
float: right;
font-style: italic;
text-align: left;
width: 40%;
height: 30%;
vertical-align: top;
padding: 10px 25px 10px 5px;
}
.postcontent{
margin-top: -20px;
padding: 10px 25px 10px 5px;
float: right;
color:#8A8A8A;
text-align: left;
width: 40%;
height: 70%;
}
.readmore {
visibility: hidden;
float: right;
text-align: right;
vertical-align: text-bottom;
vertical-align: bottom;
}
.postarrow, .posttext, .posthead, .postimage, .readmore,
.postroll input, input:checked + .posttext, input .posttext, .postarrow, label:hover .postarrow
{
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
In the image you can see that, even though I click on the info tab (light blue on hover) it expands the text on the post above it:
http://bit.ly/1CYkYjd
Okay, I figured it out! So so so simple.
Instead of:
<label for="check">
<input id="check" type="checkbox">
I had to use:
<label for="'.get_the_ID().'">
<input id="'.get_the_ID().'" type="checkbox">
That way, like I was thinking earlier, each post's checkbox is given an individual value and they can all operate simultaneously.

Time line trouble

I need to do time-line as time-line on facebook, each div under another div.
For blocks I have : -float: left, display: inline-block; but can't remove free space.
<div class="wrap">
<input type="hidden" id="tp" value="<?php echo $tp; ?>" />
<?php
$i=0;
foreach($memes as $key=>$val){
$i++;
if($i!=1){
echo "<br clear='all' />";
echo "<br clear='all' />";
}else{
echo "<br clear='all' />";
}
echo "<h1 class='fd_date' alt='".$key."'>".(($res = dt_diff($key)) ? $res : (($dt = explode("-", $key)) ? $res : ""))." ".getDay($key)."</h1>";
echo "<br clear='all' />";
echo "<div class='memescont'>";
for($cnt=0;$cnt<count($val);$cnt++){
if($cnt%2==0){
echo"
<div class='fd_meme' rel='".$val[$cnt]['id']."' >
<h1 class='title'>".$val[$cnt]['tit']."</h1>
<img width='465px' alt='".trim("Комиксы, мемы - ").$val[$cnt]['tit']."' src='".base_url()."upload/".$val[$cnt]['src']."' />
<div class='social'>
<div class='likes'>Понравилось:</div>
<div class='shared'>Поделиться:</div>
</div>
</div>
";
}else{
echo"
<div class='fd_meme' rel='".$val[$cnt]['id']."' >
<h1 class='title'>".$val[$cnt]['tit']."</h1>
<img width='465px' alt='".trim("Комиксы, мемы -").$val[$cnt]['tit']."' src='".base_url()."upload/".$val[$cnt]['src']."' />
<div class='social'>
<div class='likes'>Понравилось:</div>
<div class='shared'>Поделиться:</div>
</div>
</div>
";
}
}
echo "</div>";
}
?>
<br clear="all" />
</div>
css :
.content {
height: 100%;
overflow: auto;
position: absolute;
width: 100%;
z-index: 3;
}
.head {
display: inline-block;
width: 100%;
z-index: 2;
}
.wraphead {
margin: 5% auto;
left: 0;
right: 0;
clear: both;
display: block;
margin: 0 auto;
width: 1280px;
height: 64px;
background: url(../i/header.png) 0 0 no-repeat;); position: fixed; top: 0; z-index: 2;
}
#logo { width: 145px; height: 38px; background: url(../i/logo.png) 0 0 no-repeat; float:left; margin: 11px 0;}
.links { height: 60px; float: left; margin-left: 115px;}
.links a { float: left; color: #fff; font-size: 14px; font-family: Verdana, Geneva, sans-serif; margin: 17px 90px 23px 0; }
.links a:hover {cursor: pointer;}
.langs {float: left; width: 62px; height: 20px; border: 1px solid #dedede; border-radius: 1px; margin: 17px 0 23px; }
.langs .lang { margin-left: 8px; width: 10px; height: 8px; margin-top: 6px; margin-bottom: 6px; display: inline-block;}
.lang.ru {background: url(../i/ru.png) 0 0 no-repeat;}
.langs span { font-size: 10px; font-family: Verdana, Geneva, sans-serif; font-style: normal; color: #ffffff; float: right; display: inline-block; margin-top: -18px; margin-right: 22px;}
em.lang_select{ width: 5px; height: 3px; background: url(../i/lang_select.png) 0 0 no-repeat; display: inline-block; float: right; margin-top: -11px; margin-right: 10px}
em.lang_select:hover {cursor: pointer; }
.wrap {width: 980px; display: block; margin: 0 auto;}
.memes {width: 100%; display: inline-block;}
.memes .wrap { background: #fff; z-index: -1; -moz-box-shadow: 0 0 3px rgba(0,0,0,0.5); /* Для Firefox */
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.5); /*Для Safari и Chrome */
box-shadow: 0 0 3px rgba(0,0,0,0.5); /* Параметры тени */ }
.lft { width: 465px; display: inline-block; padding: 10px 0; }
h1.title{ font-size: 20px; color: #000; font-family: Arial, Helvetica, sans-serif; max-width: 460px; display: inline-block; float: left; font-weight: lighter; text-align: left; margin: 4px 0;}
.martop40 { margin-top: 30px; }
.rgt { width: 465px; float:left; display: inline-block; margin: 0 11px; padding-right: 13px; border-right: 2px solid #999999; }
h1.fd_date{ color: #626262; font-size: 16px; font-family: Verdana, Geneva, sans-serif; text-align: center; font-weight: lighter; bottom: 0;}
.line {width: 2px; display: inline-block; position: absolute; margin-left: 2px; background: url(../i/line.png) 0 0 repeat-y; z-index: 0; min-height: 100%; height: auto;}
.memescont {margin: -10px 0;}
.social { height: 80px; width: 469px; background: url(../i/social_bg.png) 0 0 no-repeat; }
.rgt img, .lft img {border: 1px solid #999;}
.fd_meme { width: 465px; float: left; margin: 0 12px; display: inline-block;}
.right { width: 490px; float: left; }
.left { width: 490px; float: right; }
.likes, .shared {font-family: Verdana, Geneva, sans-serif; font-size: 14px; color: #272727; padding-top: 12px; padding-left: 10px; display: inline-block; width: 202px; height:60px;}
pic: http://picshare.ru/view/97355/rand.png.html
ps. Sorry for my bad english.
It sounds like you are looking for the jQuery masonry plugin. See here
This is what it will look like

Categories