I'm making a personal website and my CSS background-image doesn't seem to be working. Link to the site is http://distorts.me/new/ it seems that it doesn't find the image because it doesn't load, it is just a white area. (Sorry for the improper punctuation not very literate ) I'm using chrome.
style.css
body {
background-image: url("http://distorts.me/new/includes/background.png");
color: #C0C0C0;
}
.navbar {
margin-bottom: 0;
border-radius: 0;
}
.row.content {height: 450px}
.sidenav {
padding-top: 20px;
background-color: #808080;
height: 100%;
font-size: 20px;
}
a {
color: #C0C0C0;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #404040;
}
footer {
background-color: #555;
color: white;
padding: 15px;
}
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
index.php
<html lang="en">
<!-- George M. -->
<!-- 2/26/16 -->
<?php
include 'includes/head.php';
?>
<body oncontextmenu="return false" background="includes/background.png">
<header class="container-fluid text-center" style="background-color: #404040;">
<h1>George M. - Welcome</h1>
</header>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 sidenav" style="height: 183%">
<p>Home</p>
<p>About Me</p>
<p>Services</p>
<p>Contact</p>
</div>
<div class="col-sm-8 text-middle">
<h1>Welcome</h1>
<p>test</p>
<hr>
<h3>Test</h3>
<p>test</p>
</div>
</div>
</div>
<footer id="foot" class="container-fluid text-center">
</footer>
<script type="text/javascript">
document.getElementById('foot').innerHTML =
"<p>© " + new Date().getFullYear() + " Distorts | George M. All rights reserved. <span style='color: #808070;'>Made by George M.</span>"
</script>
</body>
</html>
head.php
<head>
<title>George M | Home</title>
<link rel="shortcut icon" href="/favicon.ico">
<meta name="author" content="Distorts">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
</head>
When the code is right, the most likely problem to be causing issues is caching. Some web hosting servers have caching preconfiguration and since you are using PHP, you can simply send PHP headers that prevent caching - add these lines at the very top of your header.php:
<?php
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?>
Another trick which can be used is timestamping / querystring - this approach basically forces the browser to reload the file since its URL is different than what it previously loaded. So naturally, we add the time variable (because time is always changing). Other developers use this method by adding a version query but that requires more maintenance.
Adding file timestamp with PHP:
<link rel="stylesheet" type="text/css" href="style.css?t=<?php echo date('YmdHis');">
Output
<link rel="stylesheet" type="text/css" href="style.css?t=20160227182425">
File version example
<link rel="stylesheet" type="text/css" href="style.css?v=2.1">
Also, keep in mind that CSS background paths are relative to the CSS file itself, not HTML document. Links in html are relative to html document, links in CSS are relative to CSS file. So the correct way to reference your image is by the following:
background-image: url("includes/background.png");
Try changing your background url to background src :
background-image: src ("http://distorts.me/new/includes/background.png");
Working fine on Chrome. Try changing your background url to:
background-image: src("/includes/background.png");
And place that image to that server rather than giving full path.
Related
This is modalpopup.php
<h1>Pop Up</h1>
<button id="openBtn">Show Pop Up</button>
<div id="overlay">
<div id="modal">
<button id="closeBtn">Close</button>
</div>
</div>
<script src="js/modalpopup.js"></script>
This is javascript.php
<!DOCTYPE html>
<html>
<head>
<title>Javascript Projects</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<nav>
<ul>
<li>Counter App</li>
<li>Random Number Generator</li>
<li>Color Generator</li>
<li>Pop Up</li>
</ul>
</nav>
<?php
if(isset($_GET['counter'])){
include('counter.php');
}if(isset($_GET['randomnumber'])){
include('randomnumber.php');
}if(isset($_GET['hexgenerator'])){
include('hexgenerator.php');
}if(isset($_GET['popup'])){
include('modalpopup.php');
}
?>
</body>
</html>
This is style.css
body{
background-color: pink;
}
#overlay{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index 1;
background-color: plum;
}
#modal{
max-width: 600px;
height: 300px;
margin: auto;
background-color: white;
position: relative;
}
modalpopup.php is successfully linked to my style.css file because, I have the body background listed as pink in the main file its included in (javascript.php)and when I click the popup item of my menu the included modalpopup.php displays with the background as pink.
HOWEVER,
I used #overlay and I set the ID's properly but, for some reason when I try and add background colors to these items nothing displays. Any ideas what may be wrong ?
EDIT
I figured it out I am using XAAMP and I cleared my cache in safari and now it is working.
Php code
i searched on the web and i didnt see anything about this it looks like no error css status is 200
css code is at the bottom.
.sagalt {
margin-top: 500px
}
<html>
<head>
<meta charset="utf-8">
<title>quantum</title>
<link rel="shortcut icon" href="logo.png" type="image/png">
<link rel="stylesheet" href="qntm.css?v=<?php echo time(); ?>">
<!--link//-->
</head>
<body>
<div>
Sign Out
</div>
</body>
</html>
Think you are trying to apply CSS to the link. Anchor tag being an inline element, margin top/bottom property alone wont have an effect in it as inline elements flow with content on the page. Use display: inline-block or display: flex or float: left as per your requirement.
.sagalt {
color: red;
margin-top: 100px;
display: inline-block;
}
<html>
<head>
<meta charset="utf-8">
<title>quantum</title>
<link rel="shortcut icon" href="logo.png" type="image/png">
<link rel="stylesheet" href="qntm.css?v=<?php echo time(); ?>">
<!--link//-->
</head>
<body>
<div>
Sign Out
</div>
</body>
</html>
I want to place my footer at the bottom of the screen, have used a div with the "wrap" id on the body of my index, but the footer does not seem to stick below it.
Please help me with this issue.
I have included my index.php, footer.php and css.php files
index.php
<?php include('config/setup.php');?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $page['title'].' | '.$site_title; ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php include('config/css.php'); ?>
<?php include('config/js.php'); ?>
</head>
<body>
<div id="wrap">
<?php include(D_TEMPLATE.'/navigation.php'); ?>
<div class="container">
<h1><?php echo $page['header'];?></h1>
<?php echo $page['body_formatted']; ?>
</div>
</div><!-- END wrap -->
<?php include(D_TEMPLATE.'/footer.php'); ?>
<div id="console-debug">
<pre>
<?php print_r($page); ?>
</pre>
</div>
</body>
</html>
footer.php
<footer id="footer">
<div class="container">
<p>This is my footer</p>
</div>
</footer><!-- END footer -->
css.php
<?php
//CSS:
?>
<!-- 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">
<!-- jQuery CSS -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
html,
body {
height=100%;
/* The html and body elements cannot have any padding or margin */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
width:100%;
height: 60px;
background-color: #f5f5f5;
}
#btn-debug {
position: absolute;
}
#console-debug{
position:absolute
}
</style>
For sticky footer you can just add this code
#footer{
position:fixed;
left:0px;
right:0px;
bottom:0px;
width:100%;
z-index:99;
min-height: ;/*According to requirement*/
background-color: ;/*set color whichever you want*/
}
You should try to set your position:fixed
So it won't move
Sorry if I sound like an idiot, but I'm relatively new to php.
Basically, I want to have a navbar that is synced across all the pages of my website.
What I have so far is this:
navbar.php
<?php
echo '<link rel="stylesheet" type="text/css" href="style.css"> -
<ul> -
<li><div id="nav"><span id="middle">Home</span></div> -
<li><div id="nav"><span id="middle">Art</span></div></li> -
<li><div id="nav"><span id="middle">Games</span></div></li> -
<li><div id="nav"><span id="middle">Wish List</span></div></li> -
<li><div id="nav"><span id="middle">Doctor Who</span></div></li> -
</ul>';
?>
index.html
<!DOCTYPE html>
<html>
<head>
<title>Colin Site</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
p {
font-size: 150%;
}
</style>
</head>
<body>
<div class="navcontain">
<?php include "nav.php"; ?>
</div>
<br>
<br>
<br>
<h2>Welcome to my website, where I do random things</h2>
</body>
</html>
style.css
#navbar {
width: 100%;
}
#nav {
background-color: #848482;
width: 110px;
height: 40px;
text-align: center;
font-size: 100%;
color: white;
}
#navcontain {
position: relative;
top: 1%;
background-color: alpha;
width: 100%;
}
When I go to my website, there's just a blank space where my navbar should be.
Thanks in advance
You can't execute PHP code in a HTML file. Look at the extension of the file where you're including the navbar.php it's .html right? It's wrong then. In order to make it works rename it to index.php.
You have <?php include "nav.php"; ?> in your HTML, but according to your question the file is named navbar.php....
(yes, and your main file has to have a php ending, as #ReynierPM wrote)
It is not possible using php in a html file, though you can use AJAX / JQuery to load the php into the webpage, heres an axample
index.html
<html>
<head>
<script src="jquery.js"></script> <!-- You can get JQuery at http://jquery.com -->
</head>
<body>
<script>
$(document).ready(function(){
$.ajaxSetup({cache:false});
$("#nav").load("nav.php");
});
</script>
<div id="nav"></div>
</body>
</html>
Pdf fuction*
This function is call from ajax after getting data from this function it's call anothe file here I am display data which is coming from data base.That file all css part in style tag using then as it is style tag prind in pdf as a text and if this all css file include in css folder then pdf is not create in proper format
public function actionInvoicespacking(){
$pdf = Yii::$app->pdf;
$modelShipment = Shipment::find()->orderBy('ship_id DESC')->one();
if(count($modelShipment) == 0) {
$shipid= 1;
} else
{
$shipid= $modelShipment->ship_id;
}
$htmlContent = file_get_contents('http://localhost/shepherdlogistics_v1.0/backend/views/shipment/invoicespackingdata.php');
$pdf->content = $htmlContent;
return $pdf->render();
}
invoicespackingdata.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Invoice</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.fontawesome.min.css">
<link rel="stylesheet" href="css/stylepdf.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
body {
font-size: 18px;
font-family: cambria;
}
.nopadd {
padding: 0px;
}
</style>
</head>
<body>
<div class="container">
<br>
<br>
<div class="">
<div class="col-lg-2 nopadd">
<img src="logopdf.png" alt="logo" width="100%">
</div>
<div class="col-lg-10">
<h1 style="font-size: 55px;font-weight: bold; padding: 23px 0px;">
SHEPHERD LOGISTICS CO. W.L.L.</h1>
</div>
</div>
</div>
</div>
As the demo states:
Any <style> tag will be skipped (you must use cssInline property for this)
If you have just a few styles to add to the pdf, you can pass it like this:
$pdf->content = $htmlContent;
$pdf->cssInline = '.class1 {color: red} .class2 {color:blue}';
But if you have alot of styles, you can also consider change the default cssFile to any file you want with the correct css. (by default, this property is #vendor/kartik-v/yii2-mpdf/assets/bootstrap.min.css