I am developing my first PHP webapp on localhost. I am unable to refer to files in my sub-directories. For example, from any page of my project, if I have to call the following page, the image doesn't appear.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Page is Under Construction</title>
</head>
<body>
<style>
.imgcontainer {
text-align: center;
margin: 10px 0 5px 0;
position: center;
}
</style>
<div class="imgcontainer" style="padding:0px;">
<img src="/myProjectRootFolder/images/under-construction.png" alt=""/>
</div>
</body>
</html>
The error message on Console is
UnderConstruction.php:25 GET http://localhost/myProjectRootFolder/images/under-construction.png 404 (Not Found)
could be you need a relative path
<img src="./myProjectRootFolder/images/under-construction.png" alt=""/>
or
<img src="./images/under-construction.png" alt=""/>
and be sure of your real image and pathnames ..
if your url for invoke the page is
/myProjectRootFolder/summary/salessummary.php
you should use the relative path
<img src="../images/under-construction.png" alt=""/>
then you should use
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.
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>
I am trying to create a splash page in WordPress (which I have done), but the video I would like to play isn't being located by the browser.
This works when not in WordPress. But once inside WordPress, it's not. Here's my code:
<?php
/*
Template Name: Splash
*/
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Iron Triangle Films Splash Page</title>
<link rel="stylesheet" href="css/styles.">
<style>
.mainContent{
width: 50%;
margin-left: 250px;
}
</style>
</head>
<body>
<div class="mainContent">
<video id="my_video" height="500" width="700" autoplay>
<source src="<?php echo get_bloginfo('template_directory');?> itf.mp4" type="video/mp4">
<source src="<?php echo get_bloginfo('template_directory');?> itf.ogv" type="video/ogg">
<p>Your browser does not support HTML5 video.</p>
</video>
<p style="text-align: center;">This site is currently under development and will be back online shortly.</p>
</div><!--End Main Content div-->
</body>
</html>
The following line of code in the video source:
<?php echo get_bloginfo('template_directory');?>
Was suggested by someone, but this did not work.
The site is www.irontrianglefilms.com
I'd appreciate your assistance this is day#2 trying to tackle this issue.
Chris Mazzochi
Try with this one, remember to add the "/" after calling the functions to get a directory.
<?php
/*
Template Name: Splash
*/
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Iron Triangle Films Splash Page</title>
<link rel="stylesheet" href="css/styles.">
<style>
.mainContent{
width: 50%;
margin-left: 250px;
}
</style>
</head>
<body>
<div class="mainContent">
<video id="my_video" height="500" width="700" autoplay>
<source src="<?php echo get_bloginfo('template_directory');?>/itf.mp4" type="video/mp4">
<source src="<?php echo get_bloginfo('template_directory');?>/itf.ogv" type="video/ogg">
<p>Your browser does not support HTML5 video.</p>
</video>
<p style="text-align: center;">This site is currently under development and will be back online shortly.</p>
</div><!--End Main Content div-->
</body>
</html>
I have created PHP files which accept data from $_GET method.
After that I use all the data I get to create HTML pages. Nothing is wrong with the data but in CSS I cannot style HTML elements. Except when it comes to inline styling, that works but it is not good to maintain.
I try to use like this but it doesn't work , Please Help
THANK IN ADVANCE
Example.php
<?php
$dataCover = $_GET['dataCover'];
$dataTitle = $_GET['dataTitle'];
$dataTag = $_GET['dataTag'];
$dataDir = $_GET['dataDir'];
$dataYear = $_GET['dataYear'];
$dataCreated = $_GET['dataCreated'];
$dataModified = $_GET['dataModified'];
$userAUID = $_GET['userAUID'];
$galleryID = $_GET['galleryID'];
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" media="all">
#container img{
height: 230px;
width: 200px;
}
#container .center{
display: block;
margin: 0 auto;
}
</style>
<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/jquery.mobile-1.3.1.min.js"></script>
<script src="../lib/se.js"></script>
</head>
<body>
<div data-role ="page" id ="page1">
<div data-role ="header">
<h1> header </h1>
</div>
<div data-role="content">
<div id="container">
<img class="center" src="<?echo $dataCover?>" alt=""/>
<p id="title"><?echo $dataTitle;?></p>
<p id="tag"><?echo $dataTag;?></p>
<p id="created">Created : <?echo $dataCreated?></p>
<p id="modified">modified : <?echo $dataModified?></p>
View Ebook-Gallery
Bookmark
</div>
</div>
</div>
</body>
</html>
When you move your css from inline to style sheet file, you have to refresh your page with Ctrl+F5. Maybe it's coming from the cache.
Also you can assign your css to the image by jquery.
I dont see any reference to any external stylesheet, so it seems like you have forgotten to do this.
Put this line
<link rel="stylesheet" type="text/css" href="/css/style.css" />
Somewhere in the head. Maybe before the script tags.
Make sure you adjust the path to your stylesheet.
Yes When you want to apply external css you have to give the path after the <title> tags within the <head> tags .just follow the html code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--Here css is the folder name where you have keep the style.css file -->
<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/jquery.mobile-1.3.1.min.js"></script>
<script src="../lib/se.js"></script>
</head>
I'm currently re-designing the layout of my site and am trying to position my Facebook like button on the bottom of my page, next to my 'Tweet' button... However there seems to be a five pixel difference between the top and bottom of each button, knocking them out of alignment... I've tried setting the padding and the margin of the div to 0 but this hasn't worked either...
The page can be seen here: http://www.jameshenry.info/test/video.php?video=14
Any ideas on why the tops of each button are not aligned?
Try the following
<div class="bottombar">
<div style="float:left">
<iframe class="twitter-share-button ......
</div>
<div class="float:left">
<fb:like ........
</div>
<div style="clear:both;"></div>
</div>
Unfortunately there isn't much that can be done, the size seems to vary along with the padding and margin across every browser. You can set a container to a specific size and overflow to hidden but then it will cut parts of the button off in one browser but not another.
Not much help, I know, but I wouldn't waste too much time on it.
One approach I've taken is to create a nice share button and have them both appear in a tooltip on hover. At least then the ugliness is hidden until needed!
Hope that helps :)
try this
<!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" />
<title>
Azari & III - James Henry
</title>
<link href="scripts/page.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class = 'rightbar'>
<div class = 'videobox'>
<iframe src="http://player.vimeo.com/video/28767067?title=0&byline=0&portrait=0&color=ffffff&" width="640" height="360" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe><BR><div class='video-title'>Azari & III</div><div class='video-subtitle'>Manic (Directors Cut)</div><BR><div class='back'>«back</div></div>
</div>
<div class ='bottombar'>
<div style="margin: 3px 3px 0px 3px; position: relative; float: left;">Tweet<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></div>
<div style="margin: 3px 3px 0px 3px; position: relative; float: left;"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like show_faces="false" layout="box_count" width="75" padding="0" margin="0" font="lucida grande" !important ></fb:like></div>
<div>
</body>
</html>