This is my php:
<html>
<head>
</head>
<body>
<?php
include ('source\visuose\navigation.php');`enter code here`
include('source\visuose\social.php')
?>
</body>
</html>
Navigation:
<html xmlns="http://www.w3.org/1999/xhtml", lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../css/style.css" />
Social:
<body>
<div id="facebook">
<a href="http://www.facebook.com" target="_blank">
<img src="../../images/facebook-logo.jpg" width="81" height="36" />
</a>
</div><!--facebook ends-->
</body>
</html>
Why, when running php I can't see pictures?
There is only a blank box, but I can press on them and go to my a href?
Can't be sure without seeing your file structure, but this is what it looks like;
Your "main" php is in the server root /main.php and includes source\visuose\social.php. Since social.php is included, the browser thinks it's a part of /main.php.
social.php gives the browser a relative path ../../images/facebook-logo.jpg, but since the browser thinks it's /main.php including it, it will navigate relative from that file, not source\visuose\social.php. When the browser navigates your relative path, it points to nothing useful.
You should also inspect the source of the generated page, right now you have multiple html and body tags wrapping each other in a strange way.
it has to be issue with the path of the image. In firefox You just need to right click the images and select show image. To see where it is pointing ( aka coming from ) and check for what is the intended URL for the image ?
And then repair your images path accordingly.
This is not a PHP issue
fix the src of your image
<img src="../../images/facebook-logo.jpg" width="81" height="36" />
and it would work
Related
html tag is not displaying the image and I am trying to display html file through php file.
HTML file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<img name="Userphoto" alt="Userphoto" src="img/50X50.png">
</div>
</body>
</html>
PHP file:
<form name="Dashboard">
<div class="frame1">
<?php include 'frame1.html'; ?>
</div>
</form>
HTML file is called into PHP file so path is consider of PHP one
Better way is to convert your html file into php and define your img path as
<img name="Userphoto" alt="Userphoto" src="<?php echo base_url(); ?>img/50x50.png">
Maybe your path to the image is not good since you included it in another file.
Let's say from your HTML file the path is "img/50X50.png", but if your php file is not in the same folder as your HTML code, the path isn't good.
Use absolute path and no more problems.
Have fun.
It is very likely that the image path is incorrect:
src="img/50X50.png
You can open Chrome Console to see the error message, which would indicate this, or provide another clue as to why the image hasn’t displayed.
I want to separate my code to make it clearer. To do so, instead of having one big php file I spare them and keep one "main" file where I include the others when I need. The problem is that CSS only apply to the "main" file, but not to included files.
I'm pretty sure this is not a path issue, for I'm working with every files in the same folder (I know it's not the best way to work, but so far I only have few files so it's not a big deal). I have double checked eventual writing mistakes.
Here is my "main" php file :
<!DOCTYPE html>
<html>
<head>
<title>A very nice title</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<meta charset="utf-8" />
</head>
<body>
<?php include("file2.php"); ?>
</body>
and here is my "file2.php" file :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
<meta charset="utf-8" />
</head>
<div class="beer">
<img src="simple_beer.png" alt="beer picture"/>
<div class="description>
<p> a simple text </p>
<form id="add" action="[nothing interesting]">
<input type="number>
<input type="submit" value="add to card">
</form>
</div>
</div>
So i'm using the same CSS files for both php files. But it's not working on the file2.php when I have a look at it (I'm working on a local host). I've tried to delete cache from my browser (firefox). If you're wondering why I'm working on php files instead of HTML, it's simply because I intend to add php code later.
I have been looking for a solution for almost two hours, nothing seems to work. Thanks in advance !
Include everything header-related inside main.php file, remove head section from file2.php and then include file2.php in the body section of main.php. When you include that file, it will get everything that is above. That means whatever you have in main.php before include() function, will be accessible in called file (thanks to that you can link everything once and have it available in all called files).
Include() brings full code structure from the called file which you do not need (talking about head tag) if main file will hold everything that you need inside tag.
I recently asked a question about my php includes and received the answer. Now that the include accesses the correct file, my html/css/javascript web pages show some hope. The only issue is that the php includes of the pages have this look:
Instead of this:
Is there a way for the php includes to access the css files? My current code for one page that contains the includes is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="main.js"></script>
<title> Water Polo, The Best Sport</title>
</head>
<body>
<div class="wrapper">
<?php
include'../includes/header.php';
?>
<?php
include'../includes/navbar.php';
?>
<div class= "content">
</div>
<?php
include'../includes/footer.php';
?>
</div>
</body>
</html>
Header.php
<?php echo'<div class ="header">
<h1>The Best Sport</h1>
<h1 class="sitetitle">AllWaterPolo</h1>
<img src ="img/51wmckj8p1l__sx300__1.png" class="wpball" alt="Water Polo Ball" />
<h2 class="homeScreenLink"> Water Polo!</h2></div>';>
To develop the website I am currently using MAMP and running the code which is in a folder by putting it in htdocs.
I took the header out of the php include and made the css file work with the document, but one thing remains the same. The code that I included in the document via php does not take on the effects of the css document, but the header, which now is out of the include and is written write in the document works. Is there a way to allow the code which has been included via php to access the working css file? If it would facilitate the answering process, I'll post any necessary pictures. Just comment below.
You have correctly identified the problem, that the HTML cannot find the CSS. That is directly because of this tag:
<link rel="stylesheet" href="styles.css" type="text/css" />
Specifically, this part of the tag:
href="styles.css"
You have told your code to look for the styles.css file in the same directory as the index.php file. Is that correct?
Usually, the web site structure looks like this:
public_html
- css
- js
- includes
- img
Your website seems to be structured like this:
includes
public_html
Imagine yourself inside the index.php file. All files that are INCLUDEd become part of index.php, as if they were there originally. So, you are expecting to find the CSS file here (as per your <link rel="stylesheet" tag):
public_html/style.css
If they are really inside a CSS folder, then perhaps this will fix it:
<link rel="stylesheet" href="css/styles.css" type="text/css" />
Update:
No need to echo out your HTML in PHP, you can literally just do this:
header.php
<div class ="header">
<h1>The Best Sport</h1>
<h1 class="sitetitle">AllWaterPolo</h1>
<img src ="img/51wmckj8p1l__sx300__1.png" class="wpball" alt="Water Polo Ball" />
<h2 class="homeScreenLink"> Water Polo!</h2>
</div>
If the other include files are similar, then it appears your rendered file will all be HTML. Therefore, the next step is: where is your style sheet? Try this. In the address bar of your browser, type:
localhost/styles.css
And see if your stylesheet appears. If not, try this:
localhost/css/styles.css
If the second one works, then change this:
<link rel="stylesheet" href="styles.css" type="text/css" />
to this:
<link rel="stylesheet" href="css/styles.css" type="text/css" />
Note: I might not have your path structure correct. Amend as required.
Short answer = no.
You may want to look into using SASS. Besides minifying the css files, you can also set it up so the main (in your case styles.css) pull from several SASS files. For example you could have the following SASS files: main.scss, header.scss, navbar.scss, & footer.scss. If your IDE supports SASS, when you save any one of these files it can automatically compile all four into your styles.css file. Then all you need is to reference that one file and you are set.
http://thesassway.com/beginner/how-to-structure-a-sass-project
I am quite new to PHP.
I built a .php website which I've hooked up to a local test server using MAMP. For some reason, although I can view the site in my browser (Chrome), and the PHP works (I built a form that sends email), none of the CSS from the external style sheet I linked, nor the javascript from the external javascript file I linked is working.
If I type any of the CSS or script inline, everything works fine. I've used external files many times before in .html files and they have all worked just fine. What am I doing wrong here?
my .php file:
<?php
$to = 'email#email.com';
$subject = 'subject';
$message = $_POST['message'];
$message = <<<EMAIL
$message
EMAIL;
$header = '$email';
if($_POST){
mail($to, $subject, $message);
}
?>
<!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>Php Test</title>
</head>
<link rel="stylesheet" type="text/css" href="PhpTest.css"/>
<body onload="alertFunction()">
<h1 id="header">Text text text.</h1>
<form action="?" method="post">
<ul>
<li>
<label for="message">Message:</label>
<textarea id="message" name="message" cols="42" rows="9"></textarea>
</li>
<li>
<input type="submit" value="Submit"</li>
</li>
</ul>
</form>
<footer>
<script type="text/javascript" src="PhpTest.js"></script>
</footer>
</body>
</html>
my css:
#header{
color:#3C9;
}
my javascript:
function alertFunction()
{
alert("Alert.");
}
Update: I started a new .php in Dreamweaver from scratch. I added no actual PHP code; I just placed a header within the body, linked to an external CSS within the head tag (within the CSS I simply designated the header's color as a blue) and tried that. As it turns out, Dreamweaver will recognize the link and apply the CSS it when I view the site using the design/split screen, however when I try to preview it in Chrome, it fails. I have no idea what this means, but if anyone has any theories they would be very much appreciated. Thanks.
I think your <link rel="stylesheet" .../> tag must be inside <head>
This element defines a link. Unlike A, it may only appear in the HEAD
section of a document, although it may appear any number of times.
Although LINK has no content, it conveys relationship information that
may be rendered by user agents in a variety of ways (e.g., a tool-bar
with a drop-down menu of links).
http://www.w3.org/TR/html401/struct/links.html#edef-LINK
So:
<head>
<!-- Moved <link/> inside <head></head> -->
<link rel="stylesheet" type="text/css" href="PhpTest.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Php Test</title>
</head>
Edit
Well, I've tried your page. Named the stylsheet file Phptest.css where it's PhpTest.css in the .php file. I got 404 file not found error because of difference cases of t. Make sure that you named the file exactly like what you typed in the <link/> tag.
Also if you're using Chrome. Press F12 and check if there were any errors.
It works for me just fine, however I know that case sensitivity can be an issue when moving pages from server to server... I would try renaming your files (and the links in the html page as well) to implement all lowercase...
Try putting the full url for the location of css and javascript like:
href="http://www.domain.com/css_file.css"
it works.
However, please make sure your css and js file is under the same folder.
also make sure the file name is exactly the same. Since it is case sensitive. I also made a mistake while mis-typed the first time. After I match the casing it worked.
I guess it is your file naming. Check if the links and the files have the exact name, with all lower and upper cases.
I for myself name all files with just lowercase letters, to avoid this..
In a web app I am developing, I am experiencing a difference in placement in the DOM of elements when testing between Chrome and Firefox.
When viewing the page in Chrome, elements from the <head> tag seem to be placed in the <body>, along with a bit of whitespace. This does not appear when viewing the site in FireFox.
What could cause element missplacement like this? http://archives.wsusignpost.com
I am generating the page in PHP, pulling in data from a MySql database.
db.php is included in header.php, which is included in index.php
header.php:
<?php require('db.php'); ?>
<!DOCTYPE html>
<html>
<head>
<title>The Signpost: Archives</title>
<meta name="keywords" content="..." />
<meta name="title" content="..." />
<meta name="description" content="..." />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<a href="http://www.wsusignpost.com">
Main Signpost Website
</a>
<h1>
<img id="banner" src="..." \>
</h1>
I base myself on #Lachlan insightful answer, and expanding on that:

represent the Byte Order Mark symbol as rendered on the page. Being there 2 of them, looks like both files (main page and required one) are saved with UTF-8 with BOM, and that may cause the rendering problems (coming before the DOCTYPE).
Try saving your files as UTF without BOM in your editor and see if that solves the problem.
The first two lines of your server's response is:
<!DOCTYPE html>
<html>
Not entirely sure what that  is doing there, but I suspect your PHP require() is including something odd. Your page, when saved, completely crashes TextMate --- so something certainly isn't normal.