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
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.
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
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
I am trying to make a web application in PHP and I have designed my initial index.php with a login page with other header and footer design.
I want to keep the header and footer design throughout the pages and just want to change the included .phpfile as per the user redirection.
Please see the snippets below.
P.S. it is not complete code and it is work in progress.
session_start();
ob_start();
header('Content-Type: text/html; charset=utf-8');
header('Cache-Control: private');
require_once ('lib/php/connection.php');
require_once ('lib/php/global.php');
require_once ('lib/php/session.php');
require_once ('lib/php/function.php');
$aController = array_values( array_diff( explode('/', $_SERVER['REQUEST_URI']), explode('/', $_SERVER['SCRIPT_NAME'])));
if (isset($aController[0])) {
switch (strtolower($aController[0])) {
/*case 'login';
$setPage = 'dir_login/index.php';
$setTitle = 'Login';
break;*/
case 'forgot-password';
$setPage = 'dir_content/forgotPassword.php';
$setTitle = 'Forgot your password';
break;
default:
$setPage = 'dir_content/error.php';
$setTitle = '404 Error';
break;
}
} else {
//for all the default cases
$setPage = 'dir_login/index.php';
$setTitle = 'Login';
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
echo '<title>';
if (isset($setTitle)) {
echo $setTitle;
echo ' - ';
}
echo D_COMPANY_NAME;
echo '</title>';
if (defined ('D_PROJECT_TITLE')) {
echo '<meta name="project-title" lang="en" content="'.htmlspecialchars(D_PROJECT_TITLE, ENT_QUOTES).'" />';
}
if (defined ('D_PROJECT_DESCRIPTION')) {
echo '<meta name="project-description" lang="en" content="'.htmlspecialchars(D_PROJECT_DESCRIPTION, ENT_QUOTES).'" />';
}
echo '<meta name="publisher" content="'.htmlspecialchars(D_COMPANY_OWNER, ENT_QUOTES).'" />';;
echo '<meta name="copyright" content="'.htmlspecialchars(D_COMPANY_NAME, ENT_QUOTES).'" />';
?>
<meta name="author" content="Saurabh Gupta, IT System Developer # Somex Automation Ltd." />
<meta name="language" content="english" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-script-type" content="text/javascript" />
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" type="text/css" media="screen" href="lib/css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="lib/css/custom.css"/>
<script language="JavaScript" type="text/javascript" src="lib/js/modernizr.custom.18450.js"></script>
<script language="JavaScript" type="text/javascript" src="lib/js/cookie.js" ></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.2.min.js" ></script>
<script language="JavaScript" type="text/javascript" >
<!-- Google Tag, Hotjar Tag -->
</script>
</head>
<body>
<?php
$aBgImages = array(
'signup_bg.png'
);
?>
<div id="header"<?php echo ((!isset($aController[0]) || (strpos($aController[0], '?') !== false)) ? ' class="front" style="background-image: url(gfx/'.getRandomImage($aBgImages).'"' : ''); ?>>
<div id="top">
<div id="nav">
<?php
echo '<div id="logo-position">';
echo ' <img src="gfx/logo.png" style="margin-left: 10%; margin-top: 2%; padding-bottom: 20px;" />';
echo '» Home';
echo '</div>';
?>
<div class="clearfix"></div>
</div>
</div>
</div>
<div id="wrapper" <?php echo ((!isset($aController[0]) || (strpos($aController[0], '?') !== false)) ? ' class="front"' : ''); ?>>
<?php
include ($setPage);
?>
</div>
<div class="clearfix"></div>
<div id="footer">
<div class="clearfix"></div>
<div id="copyright">
<span>
<div="footer-back">
Phone: +353 (0) 26 65770 Email: automation#somexautomation.ie<br />
Fax: +353 (0) 26 65780 ©<?php echo date('Y').' '. D_COMPANY_NAME; ?> - Reg No. 584538<br />
</div>
</span>
</div>
</div>
</body>
</html>
My dir_login->index.php is populated on the index.php as a start page.
<?php
/**
* Created by PhpStorm.
* User: sgupta
* Date: 28/09/2017
* Time: 15:46
*/
$pageName = 'dir_login/index.php';
$pageLink = '/';
if (isset($_SESSION['sEmployeeID'])) {
header('Location: /');
exit();
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$aErrorClass = ' class="text-error"';
$aError = array();
if (!isset($_POST['employeeID']) || trim($_POST['employeeID']) == '') {
$aError['employeeID'] = 'Please type in your Employee ID';
}
if (!isset($_POST['password']) || trim($_POST['employeeID'])) {
$aError['password'] = 'Please type in your password';
} elseif (!isset($_POST['password']) || (strlen($_POST['password']) < 5)) {
$aError['password'] = 'This password is wrong';
}
if (count($aError) == 0) {
$sQueryLogin = "
SELECT employeeID, name, rate, payRate. password, level, email, type
FROM tblemployees
WHERE employeeID = ? AND
password = ?
";
if ($stmtLogin = $mysqli->prepare($sQueryLogin)) {
$sEmployeeID = $_POST['employeeID'];
$sPassword = $_POST['password'];
$stmtLogin->bind_param('ss', $sEmployeeID, $sPassword);
if ($stmtLogin->execute() === false) {
trigger_error('stmtLogin execution failed '.$stmtLogin->error, E_USER_ERROR);
}
$stmtLogin->store_result();
$numLogin = $stmtLogin->num_rows;
$stmtLogin->bind_result($employeeID, $name, $rate, $payRate, $password, $level, $email, $type);
$stmtLogin->fetch();
if ($numLogin == 1) {
}
}
}
}
//echo 'This Page';
?>
<h1>Log in your Somex Timesheets account</h1>
<form action="<?php echo $pageLink; ?>" method="post" enctype="multipart/form-data" name="loginForm" class="shadow">
<?php echo (isset($sLoginError) ? '<h2 class="text-error">'.$sLoginError.'<h2>' : ''); ?>
<ul>
<li>
<label for="employeeID" <?php echo (isset($aError['employeeID'])? $aErrorClass : ''); ?>>Your Employee ID</label>
<input type="text" name="employeeID" id="employeeID" value="<?php (isset($_POST['employeeID']) ? htmlspecialchars($_POST['employeeID'], ENT_QUOTES) : ''); ?>" />
<?php echo (isset($aError['employeeID']) ? '<div class="info-line">'.$aError['employeeID'].'</div>' : ''); ?>
</li>
<li>
<label for="password"<?php echo (isset($aError['password']) ? $aErrorClass : ''); ?>>Your password</label>
<input type="password" name="password" id="password" />
<div class="info-line"><?php echo (isset($aError['password']) ? $aError['password'].'<br />' : ''); ?>I forgot my password</div>
</li>
</ul>
<div class="clearfix"></div>
<input name="send" type="submit" class="button" value="» Log in"/>
<div class="clearfix"></div>
</form>
The initial page works fine but when I switch to other pages like forgetpassword.phpor error.php, the page gets populated with the code but design is not maintained.
Regardless the undefined links are populating with the design.
The default case in the switch statement is working as per I want but not the other pages.
CSS:
body {
font-size: 12pt;
font-family: Verdana, Geneva, sans-serif;
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
h1, h2, h3, label, input, textarea, #nav, .button, #footer, .item, .availability, #place .desc {
font-family: Arial, Helvetica, sans-serif;
}
.button {
padding: 0 20px;
background-color: #ff6801;
font-size: 1.1em;
color: #fff;
text-align: center;
line-height: 40px;
text-decoration: none;
display: block;
border: 0;
border-radius: 10px;
}
.button:hover {
background-color: #ff1700;
}
.button.fright {
margin-left: 20px;
}
.fright {
float: right !important;
}
.button.fright {
margin-left: 20px;
float: right;
margin-right: 18%;
margin-top:60px;
}
#wrapper.front {
padding: 100px 0;
}
#footer {
margin-top: 60px;
text-align: center;
padding: 40px 0;
font-size: large;
background: url(/gfx/signup_bg.png);
background-repeat: no-repeat;
background-size: 100%;
height: 50px;
}
#header {
background: url(/gfx/signup_bg.png);
background-repeat: no-repeat;
background-size: 100%;
}
.shadow {
/*
box-shadow: 0 0 7px 2px rgba(0,0,0,.35);
-webkit-box-shadow: 0 0 7px 2px rgba(0,0,0,.35);
-moz-box-shadow: 0 0 7px 2px rgba(0,0,0,.35);
*/
border: 1px solid #D6D6D6;
}
.text-error, .error {
color: #e84b31;
}
.text-success, .success {
color: #2aa00b;
}
input[type="text"]:disabled, select:disabled {
/*border: 1px solid transparent !important;
background: transparent;*/
cursor: not-allowed;
}
input[type="text"]:disabled:hover, select:disabled:hover {
border: 1px solid #e84b31;
}
input[type="text"], input[type="password"], input[type="file"], textarea {
width: 400px;
}
input[type="text"], input[type="password"], input[type="file"], textarea, select {
font-size: 1em;
border: 1px solid #000;
padding: 10px;
}
select {
padding: 8px 8px 9px !important;
float: left;
}
input[type="checkbox"], input[type="radio"] {
margin: 15px 15px 15px 340px;
float: left;
}
input[type="checkbox"] + label, input[type="radio"] + label {
float: left;
width: 450px !important;
text-align: left;
}
input[type="text"]:hover, input[type="password"]:hover, input[type="file"]:hover, textarea:hover, select:hover,
input[type="text"]:focus, input[type="password"]:focus, input[type="file"]:focus, textarea:focus, select:focus,
input[type="text"]:active, input[type="password"]:active, input[type="file"]:active, textarea:active, select:active {
border: 1px solid #00CC66;
}
input[type="text"], input[type="password"], textarea {
cursor: text;
}
input[type="submit"] {
padding: 0 30px;
cursor: pointer;
}
form {
background-color: #f5f6f6;
border: 1px solid #f1f3f3;
}
form {
border: 0;
padding: 30px;
}
.front form {
width: 920px;
}
.intro {
margin: 40px 0;
text-align: center;
font-size: 1.25em;
}
.front form h1 {
margin: 40px 0 20px !important;
}
form h2 {
margin-bottom: 60px;
}
.front .column h2 {
background: #6db7da url(/gfx/arc-small.png) no-repeat center top;
text-align: center;
display: block;
padding: 30px 20px 20px;
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;
}
#search h2 {
color: #053c71;
}
#search h2, #search h3 {
margin-bottom: 10px;
}
form ul li {
vertical-align: middle;
margin: 0 30px 30px 0;
}
.front form ul li {
float: left;
margin: 0 30px 30px 0;
}
.front form ul li:last-child {
margin-right: 0;
}
form li.header {
padding: 40px 0 0 340px;
border-top: 1px solid #D6D6D6;
margin: 40px 0 0 !important;
}
form li.header.no-line {
border-top: 0;
padding-top: 0;
}
form input[type="submit"] {
text-align: center;
width: 100%;
}
form .info-line {
font-size: 0.9em;
padding: 10px 0 10px 340px;
line-height: 150%;
}
.front form .info-line {
padding: 10px 0 0 0 !important;
width: auto;
margin-right: 0;
}
h1 {
font-size: 1.6em;
margin-bottom: 40px;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.2em;
}
h1 + h2, h1 + h3 {
margin-top: -20px;
}
p {
line-height: 200%;
font-size: 1em;
font-family: Verdana, Geneva, sans-serif;
margin: 20px 0;
}
p.warning {
background-color: #f9f99b;
padding: 10px 20px;
}
ul.warning {
line-height: 200%;
font-size: 0.9em;
display: block;
background-color: #f9f99b;
padding: 20px 30px;
list-style: square inside;
margin: 20px 0;
}
ul.warning li.header {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
}
#nav ul {
list-style: none;
display: inline-block;
padding: 0;
overflow: hidden;
margin: 16px 0;
}
#nav ul li {
float: left;
}
strong {
font-weight: bold;
}
i {
font-style: italic;
}
.front p {
margin: 0;
}
#wrapper {
width: 980px;
margin: 0 auto;
padding: 20px 0 100px;
}
#wrapper.front {
padding: 100px 0;
}
label {
display: block;
font-size: 1.1em;
float: left;
width: 300px;
text-align: right;
margin-right: 40px;
line-height: 40px;
}
.front label {
float: none;
width: auto;
text-align: left;
margin-right: 0;
}
.front form h1 {
margin: 40px 0 20px !important;
}
form h2 {
margin-bottom: 60px;
}
form ul li {
vertical-align: middle;
margin: 0 30px 30px 0;
}
.front form ul li {
float: left;
margin: 0 30px 30px 0;
}
.front form ul li:last-child {
margin-right: 0;
}
#menu ul {
list-style: none;
margin: 0;
display: inline-block;
padding: 0;
overflow: hidden;
}
#menu ul li {
float: left;
}
.filter ul {
padding: 20px;
border-top: 1px solid #3cb3e7;
}
.filter ul li {
margin: 0 0 8px 0;
display: block;
}
#booking ul {
padding: 20px;
border-top: 1px solid #62a903;
}
#booking ul li {
margin: 0 0 8px 0;
display: block;
}
#booking ul li.availability {
padding-top: 15px;
line-height: 140%;
font-size: 1.2em;
text-align: center;
}
#booking ul li.dates {
font-size: 0.8em;
text-align: center;
}
#booking ul li.subtotal-price, .subtotal-price {
padding-top: 10px;
line-height: 140%;
font-weight: bold;
}
#booking ul li.total-price, .total-price {
padding-top: 10px;
line-height: 140%;
font-size: 1.3em;
font-weight: bold;
}
#booking ul li span {
display: block;
float: right;
}
#message-reply ul li {
margin: 0 0 30px 0;
display: block;
}
.filter ul li.item {
font-weight: bold;
padding-bottom: 10px;
line-height: 140%;
}
form li.header {
padding: 40px 0 0 340px;
border-top: 1px solid #D6D6D6;
margin: 40px 0 0 !important;
}
form li.header.no-line {
border-top: 0;
padding-top: 0;
}
form input[type="submit"] {
text-align: center;
width: 100%;
}
form .info-line {
font-size: 0.9em;
padding: 10px 0 10px 340px;
line-height: 150%;
}
.front form .info-line {
padding: 10px 0 0 0 !important;
width: auto;
margin-right: 0;
}
Apologies for my English.
Need help
Added Screenshots: index.php, forgotpassword.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.