I'm not very good at website developing but as this is my graded unit and im trying to make it nice.
Im running into an issue with HTML and CSS (possibly PHP as well?) where it is not being applied when im using classes.
Things ive tried so far:
Put the CSS through w3schools error checks - Clean
Directly linking the CSS in the admin.php instead of through the seperate header - No effect
Directly applying the css is style tags (Tried inputting 'style"color:white;"' into both the thead and table tags) - No effect
I am using bottstrap for easier styling so maybe this is overpowering the CSS? My stylesheet is being called after though so this "shouldn't" be the case.
admin.php (the file i want the css to be applied to):
<?php
require 'header.php';
?>
<br><br><br>
<table class="aT">
<thead class="aTH">
<td>Member Number</td>
<td>Username</td>
<td>Forename(s)</td>
<td>Surname</td>
<td>Email</td>
<td>Date Of Birth</td>
<td>Age</td>
<td>User Type (1 = admin, 2 = Verified Seller, 3 = Unverified Seller)</td>
<td>Phone number</td>
</thead>
<?php
$result = mysqli_query($link, "SELECT userid, username, forenames, surname, email, dob, age, usergroup, phonenumber FROM members");
while($row = mysqli_fetch_array($result)) {
?>
<tbody>
<tr>
<td id="memberno" contenteditable="true"><?php echo $row['userid']?></td>
<td id="username" contenteditable="true"><?php echo $row['username']?></td>
<td id="dob" contenteditable="true"><?php echo $row['forenames']?></td>
<td id="salutation" contenteditable="true"><?php echo $row['surname']?></td>
<td id="forenames" contenteditable="true"><?php echo $row['email']?></td>
<td id="surname" contenteditable="false"><?php echo $row['dob']?></td>
<td id="email" contenteditable="false"><?php echo $row['age']?></td>
<td id="user_type" contenteditable="true"><?php echo $row['usergroup']?></td>
<td id="user_type" contenteditable="false"><?php echo $row['phonenumber']?></td>
</tr>
<?php
}
?>
</tbody>
<?php
include 'footer.php';
?>
header.php:
<!doctype html>
<html>
<?php
require 'mysqli.php';
?>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Ross's Rides</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Buy/Sell</li>
</ul>
<?php
if(!isset($_SESSION))
{
session_start();
}
if (!isset($_SESSION["admin"]) && !isset($_SESSION["user"]) && !isset($_SESSION["useru"])) {
?>
<form method="get" action="login.php" class="btn_1">
<a class="btn btn_2 navbar-btn" href="login.php">Login/Register</a>
</form>
<?php
}
else {
?>
<form method="get" action="logout.php" class="btn_1">
<a class="btn btn_2 navbar-btn" href="logout.php">Logout</a>
</form>
<?php
}
if (isset($_SESSION["admin"])) {
?>
<form method="get" action="admin.php" class="btn_1">
<a class="btn btn_2 navbar-btn" href="admin.php">Admin Panel</a>
</form>
<?php
}
?>
</div>
</nav>
</head>
stylesheet.css:
.btn_1 {
display:inline;
float: right;
}
.btn_2 {
background-color: black;
border-radius: 25px;
padding: 10px 10px;
color: white;
}
.loginBox {
padding-top: 100px;
}
.submitBtn {
background-color: black;
border-radius: 25px;
padding: 10px 25px;
color: white;
}
.cancelBtn {
background-color: black;
border-radius: 25px;
padding: 10px 25px;
color: white;
}
.registerForm {
padding-top: 40px;
}
.redText {
color: red;
}
.aT {
width: 100%;
border: 1px;
border: thick;
border-color: limegreen;
padding: 10px;
text-align: left;
background-color: black;
color: white;
}
.aTH {
height: 50px;
}
Now I am almost certain a lot of my code is not "perfect" or following "proper procedures" and if you see any of this feel free to point it out and correct me as ive said im not that good at websites and could definetly learn a thing or two. I will be removing the tags later when i can get the CSS to properly apply, until then they will stay as my sketchy fix for now.
Cheers for all the help, here is an image to show the effect of my attempts.
if you need any more info/pics/other stuff feel free to ask and ill try to get as much as possible up. the footer.php does contain an if thats any consolation so the document does have an end!
On my code view the styles are not applying
Have you verified that all cache's have been cleared? I had this issue and I was struggling for quite awhile before I realized that my host cached the files automatically, as well as cloudflare cached it, AND Chrome cached it.
Related
The below is the page where the user will enter their info and submit it to the PHP program
<!DOCTYPE html>
<html>
<head>
<title>Depreciation Calculator</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div id="content">
<h1>Enter Your info</h1>
<form action="deprecalc.php" method="post">
<div id="data">
<label>Item name</label>
<input type="text" name="item_name"/>
<label>Purchase price</label>
<input type="text" name="purchase_price"/>
</br>
<label>No. of years</label>
<input type="text" name="no_of_years"/>
</br>
<label>Salvage value</label>
<input type="text" name="salvage_value"/>
</br>
</div>
<div id="buttons">
<label> </label>
<input type="submit" value="Calculate"></br>
</div>
</form>
</div>
</body>
</html>
And this is the page the data is being submitted to. My issue is where to define the variables needed to use this formula: Depreciation = (Purchase Price – Remaining Value) / Useful Life.
<?php
$item_name = $_POST['item_name'];
$purchase_price = $_POST['purchase_price'];
$no_of_years = $_POST['no_of_years'];
$salvage_value = $_POST['salvage_value'];
$remaining_value = $purchase_price - $depreciation;
$depreciation = ($purchase_price - $remaining_value) / $no_of_years;
?>
<!DOCTYPE html>
<html>
<head>
<title>Depreciation Calculator</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div id="content">
<style>
#values {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#values td, #values th {
border: 1px solid #ddd;
padding: 8px;
}
#values tr:nth-child(even){background-color: #f2f2f2;}
#values tr:hover {background-color: #ddd;}
#values th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: navy;
color: white;
}
</style>
<body>
<h2>Item: <?php echo $item_name;?></h2></br>
<h2>Cost: <?php echo $purchase_price;?></h2></br>
<table id="values">
<tr>
<th>Year</th>
<th>Depreciation to date</th>
<th>Remaining value</th>
</tr>
<tr>
<?php
$i=1;
while ($i <= $no_of_years){
echo "<td>" . $i++ . "</td>";
}
?>
<?php
while ($remaining_value >= 0){
echo "<td>" . $depreciation . "</td>";
}
?>
<?php
while ($depreciation <= $purchase_price){
echo "<td>" . $remaining_value . "</td>";
}
?>
</tr>
</table>
</body>
</html>
</div>
</body>
</html>
I'm supposed to display it in a table format with the table heads being year, depreciation to data, and remaining value. When I run the above code, it simply outputs the year 1-5, followed by a never ending string of 0's, which I know means that it's stuck in a loop, and I've tried putting an endwhile at the end of each loop, but I then get this error:
Parse error: syntax error, unexpected token "endwhile", expecting end of file in C:\xampp\htdocs\deprecalc.php on line 68
Hey i made a layout for a website in a file.html
I got it working, but when i changed the file to a .php, non of the css code i have made worked.
Body {
margin: 0px;
background-color: rgba(230, 230, 230, 1);
font-size: 100%;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
background-color: RGBA(66, 161, 244, 1);
}
header{
height:10%;
}
footer{
height:2%;
text-align: center;
}
#Logo{
position: relative;
width: 50%;
background-color: black;
display: inline-block;
height:100%;
}
#Search{
float: right;
position: relative;
width: 20%;
height: 50%;
display: inline-block;
margin: 0px;
}
.Search{
width: 80%;
height: 100%;
}
.SearchButton{
float: right;
width: 19%;
height: 100%;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
<html>
<head>
<title>Unnamed Project</title>
<link rel="stylesheet" type="text/css" href="Forside.css">
<link rel="stylesheet" type="text/css" href="Standart.css">
<meta charset="utf-8">
</head>
<body>
<header>
<img src="Icon.png" id="Logo" href="Forside.php"></img>
<form action="Forside.php" id="search" method="post">
<input type="text" name="Parameters" class="Search"></input>
<input type="submit" value="Søg" class="SearchButton"></input>
</form>
</header>
<nav>
<ul>
<li><a>Katagorier</a></li>
</ul>
</nav>
<article>
<div id='Produkt2'>
<div id='Navn'>
$row[Navn]
</div>
<div id='Produktnr'>
$row[AutoID]
</div>
<div id='Billedpris'>
<div id='Billed'>
<img src='Billeder/$row[Billed]'></img>
</div>
<div id='Pris'>
<a class='pris'>$row[Pris],-</a>
<div id='Kurv'>
<form action='PutiKurv.php' method='post'>
<input type='hidden' name='antal' value='1'>
<input type='hidden' name='ProduktID' value='$row[AutoID]'>
<input type='submit' value='Læg i kurv:'></input>
</form>
</div>
</div>
</div>
<div id='Info'>
$row[Info]
<div id='mere'>
<form action='$row[Hjemmeside]'>
<input type='submit' value='Mere info'></input>
</form>
</div>
</div>
<hr>
</div>"
</article>
<footer>Copyright © W3Schools.com</footer>
</body>
</html>
It should look like this, but when i load the css is gone.
please help
The problem is a caching issue. CSS can be a little strange with caching, and while the classic combination CTRL + F5 works for images, it doesn't work for CSS. The better solution to dealing with caching in CSS is to hold down SHIFT while clicking on the refresh symbol.
Obviously, you can include a backslash in the filepath for the CSS reference, or append a version number, such as: <link rel="stylesheet" type="text/css" href="style.css?v2 />.
This version number doesn't 'mean' anything inherently, but can be useful for denoting updates to the CSS, and importantly will be considered a different file by the browser (forcing it to re-load the CSS).
You can also force the browser to refresh the CSS automatically every time the page is loaded with PHP, by appending a timestamp within the link to the CSS file, with something like:
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
Keep in mind that CSS can be 'costly', so once you have finished development, you probably want to allow visitors to cache by removing the timestamp in a production environment :)
Hope this helps! :)
When a string is specified in double quotes or with heredoc, variables are parsed within it.
You are using single quotes instead of double quotes. Use double quotes if you want the variables to be parsed.
In here: <form action='$row[Hjemmeside]'> which means variable parsing is not working. Change to <form action="<?php echo $row[Hjemmeside]; ?>">
Also in here: <input type='hidden' name='ProduktID' value='$row[AutoID]'>. Change to: <input type='hidden' name='ProduktID' value="<?php echo $row[AutoID]; ?>">
And here: <img src='Billeder/$row[Billed]'></img>. Change to: <img src="Billeder/<?php echo $row[Billed]; ?>"></img>
Also, you can go to the Developer mode in your web browser and do the "Empty cache and hard reload" option to load the new style files. Consider using file versioning. For example:
<link rel="stylesheet" type="text/css" href="Forside.css?v=1.1">
<link rel="stylesheet" type="text/css" href="Standart.css?v=1.1">
I have this php file where I want to retrieve data from database and show in a tabular format.
<html>
<head>
<title>Admin</title>
<link rel="stylesheet" type="text/css" href="adminPanel.css"/>
</head>
<body>
<div class="header">
<h1>Admin</h1>
</div>
<div class="center">
<?php
include "db_connection.php";
$sql = "SELECT * FROM appointments;";
$result = mysqli_query($db,$sql);
If(mysqli_query($db,$sql) == TRUE){
?>
<table>
<th>Name</th>
<th>Address</th>
<th>Phone</th>
<th>License</th>
<th>Engine</th>
<th>Appointment Date</th>
<th>Preferred Mechanic</th>
<?php
while($row = mysqli_fetch_assoc($result)){
?>
<td><?php echo $row['Name'];?></td></br>
<td><?php echo $row['Address'];?></td>
<td><?php echo $row['Phone'];?></td>
<td><?php echo $row['Car_license_No'];?></td>
<td><?php echo $row['Car_Engine_No'];?></td>
<td><?php echo $row['Date'];?></td>
<td><?php echo $row['Mechanic'];?></td>
<?php
}
?>
</table>
<?php
}
?>
</div>
<div class="footer">
<p id="lastMod">
<script language="Javascript">
document.write("Last modified on " + document.lastModified + " ");
</script>
</p>
</div>
</body>
</html>
But the problem is I can`t change the style of data showing in the table. The .footer, .center, .header these are showing up with the perfect style. But styles of html elements that are written within the php blocks are not working, such as , , .
Here is my style sheet
.header{
background-color: black;
color: DC143C;
height: 150px;
margin-bottom: 0px;
font-family: "Impact"
}
.center{
background-image: url(background.jpg);
height: 400px;
margin-top: 0px;
margin-bottom: 0px;
}
.footer{
background-color: black;
font-family: "Impact";
color: DC143C;
margin-top: 82px;
height: 95px;
}
th, td{
color: white;
}
#lastMod{
margin-top: 0px;
padding: 5px;
}
Searched a lot but havn`t found any relevant answer. Thanks in advance.
You should apply the classes to cells then you could style it.
<td class="name"><?php echo $row['Name'];?></td></br>
...
<td class="mechanic"><?php echo $row['Mechanic'];?></td>
<style>
td.name {
background-color: #0f0;
}
....
td.mechanic {
background-color: #f00;
}
</style>
you didn't added any class in your php you should add class in your table like
<table class="mytable">
and style it by pointing with parent such as
<style>
.mytable th { color:#fff; }
</style>
here is sample image
<!DOCTYPE html>
<html class="bg-black">
<head>
<meta charset="UTF-8">
<title><?php if(isset($title)) echo $title.' | '; ?> Sales agent management software (SAMS) </title>
<style>
body{
font-size: 9px;
margin: 20px;
}
th,td,p,div,table,h3{margin:0;padding:0}
#page { margin: 20px; }
.header{
border-bottom: 1px solid #dddddd;
text-align: center;
position: fixed; top: 0;
}
.footer { position: fixed; bottom: 0px; text-align: center }
.pagenum:before { content: counter(page); }
</style>
</head>
<body>
<div class="header">
<h2><?php echo get_option('company_name'); ?> Catalog</h2>
</div>
<br /><br />
<div class="footer">Page: <span class="pagenum"></span>, creation time : <?php echo date('l jS \of F Y h:i:s A') ?>, create by: <?php echo user_full_name(singleDbTableRow(loggedInUserData()['user_id'])); ?></div>
<br />
<div class="box-body">
<?php
$usd = get_option('lkr_per_usd', 134);
?>
<?php
$result = array_chunk($products->result_array(), 3);
foreach($result as $products){ ?>
<table style="width:100% style="page-break-after:always;" >
<tr>
<?php
foreach($products as $productArray){
$product = (object) $productArray;
echo '<td>';
?>
<div style="width: 100%; height: 210px; border: 1px solid #dddddd; margin: 10px; padding: 5px;">
<div class="box-header">
<p class="box-title"><FONT SIZE=12><?php echo $product->product_name; ?></FONT></p>
</div>
<div style="height: 80px; text-align: center;">
<?php echo '<img src="'.'uploads/'. $product->photo.'" class="img-responsive" style="height:80px !important; width: 150px !important" />'; ?>
</div>
<div style="clear: both"></div>
<table class="table table-responsive">
<tr>
<th><FONT SIZE=12>ID</FONT></th>
<td><FONT SIZE=14><?php echo $product->product_id; ?></FONT></td>
</tr>
<tr>
<th><FONT SIZE=12>LKR</FONT></th>
<td><FONT SIZE=14><?php $lkr = get_selling_price($product);
echo number_format(round($lkr, get_option('round_precision')) ); ?></FONT>
</td>
</tr>
<tr>
<th> <FONT SIZE=12>US $</FONT></th>
<td><FONT SIZE=14><?php echo number_format(round(lkr_to_usd($lkr), get_option('round_precision')) ); ?></FONT></td>
</tr>
</table>
</div>
</td>
<?php } ?>
</tr>
<?php } ?>
</table>
</div><!-- /.box-body -->
</body>
</body>
</html>
when i try to generate pdf it's always coming like this. i added my generate pdf code above .
2 nd page is not coming like 1st page.. i searched and found other dompdf solution for other peoples problem. but my problem is on 2nd page it's not coming as 1stpage.
There's some buggy behavior here on the part of dompdf. For some reason styling the DIV containing your product info with width: 100% is breaking the layout when the table row is paged. If you remove that styling from the DIV then the document should render as expected. The default DIV layout is full-width so you can leave the width styling on the DIV out
I have looked but the answers that people have given didn't help my problem. Rather confusion.
I am creating a small project for my website and i am trying to convert it to php for the pages and easier maint.
The way i want it set up is like how i have it now. Soloentertainment.org But this is all html and each page is it own Html page and if i need to edit or add to the nav bar or anywhere else i have to go to each html and change it. That is a big no no. So trying to convert it to php but the problem i have encountered, which is weird is that i have it highlight what page you are on now. But for the php, Soloentertainment.org/index.php, (i don't have all links working so the projects page and bout leads to the html links) but the home should be highlighted like in the original home page.
Code for the index.php:
<body bgcolor="#000000" id="home">
<div align="center">
<table class="contentTable" >
<tbody>
<tr>
<td colspan="0" border="0" height="50px" align="center">
<?php include("message.php"); ?>
</td>
</tr>
<tr>
<td colspan="0" border="0" height="125px" align="center">
<?php include("header.php"); ?>
</td>
</tr>
<tr>
<?php include("navbar.php"); ?>
</tr>
<?php include("home.php");?>
</tbody>
</table>
</div>
</body>
Code for the Navbar.php:
<td id="navbar">
<ul>
<li onclick="location.href='http://www.soloentertainment.org/index.php';" class="home" title="Home">Home</li>
<li class="projects" title="Projects">Projects</li>
<li class="about" title="About">About</li>
<li>Contact</li>
</ul>
</td>
The original index.html:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico">
<title>Solo Entertainment</title>
</head>
<style>
.contentTable {
width: 795px;
border-left: 10px;
border-left-color: #b7ad6f;
border-right: 10px;
border-right-color: #b7ad6f;
margin: 0px;
padding: 0px;
}
.header {
background-color; #000
background-repeat: no-repeat;
background-position: right;
}
#navbar {
width:100%;
height:30px;
background-color:#000;
}
#navbar ul {
width:50%;
margin:0 auto 0 auto;
}
#navbar ul li {
float:left;
color: #FFF;
padding:0 20px 0 20px;
border:1px solid #FFF;
height:30px;
list-style:none;
display:block;
line-height:30px;
text-align:center;
cursor:pointer;
}
#navbar ul li:hover {
background-color:#CCC;
color: #000;
}
#home #menu .home, #projects #menu .projects {
background-color:#FFF;
color: #111
}
</style>
<body bgcolor="#000000" id="home">
<div align="center" id="menu">
<table class="contentTable">
<tbody>
<tr>
<td colspan="2" border="0" height="55px" align="center">
<font color="#FF0000" size="+2">This site is still being built. Please be Patient</font>
</td>
</tr>
<tr>
<td colspan="2" class="header" align="left" border="0" height="125px">
<img src="images/solo.png" width="785" height="112" alt="Title" title="Solo Enertainment" border="0">
</td>
</tr>
<tr>
<td id="navbar">
<ul>
<li onclick="location.href='http://www.soloentertainment.org';" class="home" title="Home">Home</li>
<li onclick="location.href='http://www.soloentertainment.org/projects';" class="projects" title="Projects">Projects</li>
<li onclick="location.href='http://www.soloentertainment.org/about';" class="about" title="About">About</li>
<li>Contact</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2" class="header" align="center" border="0" height="100px">
<font color="#FFFFFF" size=""> Welcome to Solo Entertainment, One Man One Show.</font>
</td>
</tr>
<tr>
<td colspan="2" class="header" align="Center" border="0">
<img src="./images/kyleandsteve1280.jpg" width="307" height="245" />
<br />
<font color="#FFFFFF">Kyle and Steve Save the world.
<br />
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Now the i don't get why Home is highlighted in the html and not for the php?
Your css that make the highlight looks like this:
#home #menu .home, #projects #menu .projects {
background-color: #FFFFFF;
color: #111111;
}
On your PHP file, the button with .home class is under an element with a #home id but there's no element with #menu id.
This is the part on your HTML:
<body bgcolor="#000000" id="home">
<div align="center" id="menu">
This is the part on your PHP:
<body bgcolor="#000000" id="home">
<div align="center">