[RESOLVED] Setting HTML Path

amy_damnit

UGH! I had this working last night?!

I have an HTML file here...

/Users/user1/Documents/DEV/+htdocs/VQS_2/0301_BaseTemplate.html

And I would like to refer to a CSS Stylesheet here...

/Users/user1/Documents/DEV/+htdocs/+Includes/style1.css

Here is my problem HTML document...

<!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></title>
		<link rel="stylesheet" href="../+Includes/style1.css"
				type="text/css" media="screen" />
    </head>

What is the correct syntax to get my HTML file to find the CSS stylesheet?

(I've tried every combination that I can think of, but am obviously not "getting it"?!)

Thanks,

Amy

bradgrafelman

The path looks fine, according to what you're saying.

Are you sure the link in your browser for the HTML page is something like http://localhost/VQS_2/0301_BaseTemplate.html ?

If you copy and paste the following URL into your browser, does it show your CSS? URL: http://localhost/+Includes/style1.css

amy_damnit

bradgrafelman;10915401 wrote:
The path looks fine, according to what you're saying.

Are you sure the link in your browser for the HTML page is something like http://localhost/VQS_2/0301_BaseTemplate.html ?

If you copy and paste the following URL into your browser, does it show your CSS? URL: http://localhost/+Includes/style1.css

If I paste:

http://localhost/+Includes/style1.css

into Firefox I do see the CSS sheet.

If I paste:

http://localhost/VQS_2/0301_BaseTemplate.html

into Firefox it suddenly works?!

😕😕😕

Could this be a caching or Firefox issue???

I tried this a thousand different ways before supper and it would NOT work?!

I'm more confused now... 🙁

Amy

bradgrafelman

I suppose it might've been a caching issue... no way to tell without seeing it firsthand.

Weedpacket

If the relative path gets hairy (how many levels up do I go? How many down?), which I've sometimes found when moving stuff around (relative URLs are relative to the current URL, which isn't necessarily the same thing as the file path to whatever is generating the page), there are a couple of other ways of locating a resource.

First is to use absolute URLs. But this requires some mechanism for updating all those URLs while you're shifting bits about (of course, once things have stabilised then in an ideal world URLs never change).

In HTML, another method is to use a <base> element in the <head>. It contains an absolute URL - often the site root ("http://localhost/" here) - in its href= attribute. All relative URLs in the document are taken relative to that, instead of the current page URL.

amy_damnit

This is just like when you take your car to the mechanic and it doesn't make the noise anymore?! UGH!!

All of this probably doesn't matter, since the next example in my PHP book has me break up the HTML template and spread it out across several include files and the base PHP file.

Yet inquiring minds need to know! 🙂

Thanks for the help guys. Hopefully things behave for a while!

Amy

amy_damnit

By the way, if anyone knows CSS, I would be interested to learn how my problematic stylesheet works.

(It is very cool how the page looks like it has tabs.)

I tried figuring it out by looking at the CSS, but can't get it.

Here is my full HTML file...

<!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></title>
		<link rel="stylesheet" href="../+Includes/style1.css"
				type="text/css" media="screen" />
    </head>
    <body>
		<div id="header">
			<h1>Your Website</h1>
			<h2>catchy slogan</h2>
		</div>

	<div id="navigation">
		<ul>
			<li><a href="index.php">Home Page</a></li>
			<li><a href="calculator.php">Calculator</a></li>
			<li><a href="dateform.php">Date Form</a></li>
			<li><a href="#">link four</a></li>
			<li><a href="#">link five</a></li>
		</ul>
	</div>

	<div id="content">
		<!-- Start of the page-specific content. -->
		<h1>Content Header</h1>

		<p>This is where the page-specific content goes.
		This section, and the corresponding header,
		will change from one page to the next.</p>

		<p>Volut at varius sed sollicitudin et, arcu.  Vivamus, viverra.
		Nullam turpis.  Vestibulum sed etiam.  Lorem ipsum sit amet dolare.
		Nulla facilisi.  Sed tortor.  Aenean felis.  Quisque eros.
		Cras lobortis commondo metus.  Vestibulum vel purus.
		In eget odio in sapien adipiscing blandit.
		Quisque augue tortor, facilisis  sit amet, aliquam, suscipit vitae,
		cursus sed, arcu lorem ipsum dolor sit amet.</p>
		<!-- End of the page-specific content. -->
	</div>

	<div id="footer">
		<p>Copyright &copy; <a href="#">Plain and Simple</a> 2007 |
		Designed by <a href="http://www.edg3.co.uk/">edg3.co.uk</a> |
		Sponsored by <a href="http://www.opendesigns.org/">Open Designs</a> |
		Valid <a href="http://jigsaw.w3.org/css-vaidator/">CSS</a> &amp;
		<a href="http://vaidator.w3.org/">XHTML</a></p>
	</div>
</body>
</html>

And here is the CSS file...

/*
	Author	:	Christopher Robinson
	Email		:	christopher@edg3.co.uk
	Website	:	http://www.edg3.co.uk/
*/
* {
	border:0;
	margin:0;
	padding:0;
}

/* general */
a {
	color:#777;
	text-decoration:none;
}

a:hover {
	color:#333;
	text-decoration:none;
}

/* body */
body {
	background:#fafafa;
	color:#555;
	font:0.8em Arial, Helvetica, "bitstream vera sans", sans-serif;
}

/* header */
#header {
	border-bottom:1px solid #999;
	height:80px;
	margin:0 auto;
	width:751px;
}
#header h1 {
	color:#888;
	font-size:300%;
	letter-spacing:-3px;
	text-align:right;
	padding:5px;
	margin-bottom:-20px;
}
#header h2 {
	color:#CCC;
	font-size:200%;
	letter-spacing:-2px;
	text-align:right;
}

/* navigation */
#navigation {
	background:#fafafa;
	border-right:1px solid #999;
	margin:0 auto;
	width:750px;
	height:40px;
	list-style:none;
}
#navigation li {
	border-left:1px solid #999;
	float:left;
	width:149px;
	list-style:none;
}
#navigation a {
	color:#555;
	display:block;
	line-height:40px;
	text-align:center;
}
#navigation a:hover {
	background:#e3e3e3;
	color:#555;
}
#navigation .active {
	background:#e3e3e3;
	color:#777;
}

/* content */
#content {
	height:auto;
	margin:0 auto;
	padding:0 0 20px;
	width:751px;
}
#content h1 {
	border-bottom:1px dashed #999;
	font-size:1.8em;
	padding:20px 0 0;
}
#content p {
	padding:20px 20px 0;
}

/* footer */
#footer {
	border-top:1px solid #999; 
	height:50px;
	margin:0 auto;
	padding:10px;
	text-align:center;
	width:751px;
}

/* Added by Larry Ullman: */
.error {
	font-weight: bold;
	color: #C00
}

Sorry if I took up a lot of space!! (Isn't there a way to attach files on here?)

Amy

amy_damnit

I moved my directory stucture around - bad idea! - and now my style sheet is broken again.

After extensive testing I see no pattern, and even cleaning out Firefox's cache isn't helping.

Here is what I have...

Index file
/Users/user1/Documents/DEV/+htdocs/VQS_2/0304_Index.php

<?php
	$page_title = 'Welcome to this Site!';

include('includes/0302_Header.html');
?>

<!-- Start of the page-specific content. -->
<h1>Content Header</h1>

Header file
/Users/user1/Documents/DEV/+htdocs/VQS_2/includes/0302_Header.html

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>
			<?php echo $page_title; ?>
		</title>
[COLOR="Red"]			<!-- This is not working.   -->			
			<link rel="stylesheet" href="/includes/style_1.css"
				type="text/css" media="screen" />[/COLOR]

[COLOR="Green"]			<!-- Tried this as well, but no luck!
			<link rel="stylesheet" href="style_1.css"
				type="text/css" media="screen" />
			--->
[/COLOR]    </head>

Style Sheet
/Users/user1/Documents/DEV/+htdocs/VQS_2/includes/style_1.css

I'm really not getting this one at all.

Any ideas?

Amy

bradgrafelman

The first one will work if you take out the beginning '/'. Why did you have that there in the first place? The '/' tells the browser that it's an absolute path, yet there is no http://localhost/includes/ folder from what you've said?

amy_damnit

bradgrafelman;10915529 wrote:
The first one will work if you take out the beginning '/'. Why did you have that there in the first place? The '/' tells the browser that it's an absolute path, yet there is no http://localhost/includes/ folder from what you've said?

It doesn't work.

I put the "/" in because I have no clue what I am doing and nothing else works.

Not to be overly verbose, but let me re-post what I currently have to be sure that what you fixed is what I have.

Description:
My book had me create the following files:

1.) An "Index" file located here...
/Users/user1/Documents/DEV/+htdocs/VQS_2/0304_Index.php

2.) A "Header" include located here...
/Users/user1/Documents/DEV/+htdocs/VQS_2/includes/0302_Header.html

3.) A "Footer" include located here...
/Users/user1/Documents/DEV/+htdocs/VQS_2/includes/0303_Footer.html

4.) A "Style Sheet" located here...
/Users/user1/Documents/DEV/+htdocs/VQS_2/includes/style_1.css

Environment:
I am using NetBeans and while +htdocs is technically my "Web Root" in MAMP, the directory "VQS_2" is my current project in NetBeans and so really my new "Web Root" for these files. When I run the Index file from within NetBeans it knows where to look.

Files:
Here are the (abridged) problem files...

0304_Index.php

<?php
	$page_title = 'Welcome to this Site!';
[COLOR="Blue"]
	include('includes/0302_Header.html');[/COLOR]
?>

<h1>Content Header</h1>

<p>This is where the page-specific content goes.
This section, and the corresponding header,
will change from one page to the next.</p>

<?php
[COLOR="Blue"]	include('includes/0303_Footer.html');[/COLOR]
?>

0302_Header.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">
        <title>
			<?php echo $page_title; ?>
		</title>
[COLOR="Blue"]			<link rel="stylesheet" href="style_1.css"
				type="text/css" media="screen" />[/COLOR]
    </head>
    <body>
		<div id="header">
			<h1>Your Website</h1>
			<h2>catchy slogan</h2>
		</div>

	<div id="navigation">
		<ul>
			<li><a href="index.php">Home Page</a></li>
			<li><a href="calculator.php">Calculator</a></li>
			<li><a href="dateform.php">Date Form</a></li>
			<li><a href="#">link four</a></li>
			<li><a href="#">link five</a></li>
		</ul>
	</div>

	<div id="content">
		<!-- Start of the page-specific content. -->

Summary:
Based on my own knowledge and what others have told me, my code should work. However, the reality is that it does NOT work, even with trying all different path types?!

I also launched my code in NetBeans using Safari and still no go.

I tried cleaning browser cache and restarting all apps.

This seems to be similar to my problems on this post.

I do know that I have witnessed similar "anomolous" behavior using style sheets on other book examples, and I just can't pin down what the issue is. 🙁

Amy

bradgrafelman

The only thing you need to know is: what is the URL of the file that you access in your browser? If it's http://localhost/VQS_2/0304_Index.php, then the correct relative path to the CSS file would be "includes/style_1.css" and the correct absolute path would be "/VQS_2/includes/style_1.css" .

amy_damnit

bradgrafelman;10915535 wrote:
The only thing you need to know is: what is the URL of the file that you access in your browser? If it's http://localhost/VQS_2/0304_Index.php, then the correct relative path to the CSS file would be "includes/style_1.css" and the correct absolute path would be "/VQS_2/includes/style_1.css" .

I agree with this, but what would the code be in these two files:

0304_Index.php

0302_Header.html

Is my code correct??

Amy

bradgrafelman

At present, no; the code in your header file is href="style_1.css" which matches neither of the two paths I noted above.

amy_damnit

bradgrafelman;10915539 wrote:
At present, no; the code in your header file is href="style_1.css" which matches neither of the two paths I noted above.

You're not answering my question and helping me to learn. Blah!! :p

Okay smarty pants, I finally figured out the CORRECT answer all by myself after two days of no progress.

In the includes folder are:
0302_Header.html
style_1.css

SCENARIO #1:

If 0302_Header.html says:

    <head>
			<link rel="stylesheet" href="style_1.css"
				type="text/css" media="screen" />
    </head>

and I launch it in NetBeans, then 0302_Header.html is formatted correctly.

If I then launch 0304_Index.php which is one level up, then it runs but without formatting.

SCENARIO #2:

If 0302_Header.html says:

    <head>
			<link rel="stylesheet" href="includes/style_1.css"
				type="text/css" media="screen" />
    </head>

and I launch it in NetBeans, then 0302_Header.html is NOT formatted correctly.

If I then launch 0304_Index.php - which is one level up - it IS formatted correctly.

SOLUTION:

This where the confusion lies...

You would think that if 0302_Header.html correctly points to style_1.css, that when 0304_Index.php includes 0302_Header.html that it would "inherit" the style sheet formatting?!

Apparently the way it works, however, is that my CSS style sheet has to point directly to 0304_Index.php in order to work?!

I'm not sure why this is, because all other formatting is "inherited" when you include 0302_Header.html, but this must just be a quirk of the three languages?!

So TV viewers, THAT is the correctly solution and explaination to this subtle yet tricky thingy!

**NOTE: In addition, this is how my PHP book had it, and this is how I had it last night and it wasn't working then?! I suspect that there was also a browser caching issue that was throwing me off course and making debugging infinitely difficult since sometimes things worked and then they stopped working?! Oy vey!!

Thanks anywho,

Amy
🙂

bradgrafelman

Why would you code for scenario #1 above? When would you ever want to visit the header file directly? If there was a valid reason, then you could always use absolute paths instead of relative paths.

amy.damnit wrote:
You would think that if 0302_Header.html correctly points to style_1.css, that when 0304_Index.php includes 0302_Header.html that it would "inherit" the style sheet formatting?!

Since there's no PHP code in the .html file, you should actually just use a function like [man]readfile/man, because that's all PHP is doing; it's basically copy-and-pasting the HTML code in the header file into the PHP document at that point.

This is why when using relative paths, one seemed to work while the other didn't; the .php and .html files are in two different directories, meaning that the relative paths to the CSS stylesheet would be different. There's no "quirk" or anything - it's just the fact that there are two different relative paths to the CSS file here, depending upon which file you're viewing.

amy_damnit

My point was that CSS affect the way that the HTML looks, and the HTML file was pointing to the CSS file and the PHP file just displays the HTML file, so it seems more logical to me that the styles linked to the HTML file would also pass through to the PHP file.

Amy

bradgrafelman

Except that the CSS and HTML file aren't "linked" in any way; the HTML file just contains some text that tells the browser where to look for a CSS file.

amy_damnit

bradgrafelman;10915562 wrote:
Except that the CSS and HTML file aren't "linked" in any way; the HTML file just contains some text that tells the browser where to look for a CSS file.

Exactly! So by your own words, then why would that not be where the CSS file is relative to the HTML file???

The path that ends up working shows the relative path between the CSS file and the PHP file, and not the relative path between the CSS file and the HTML file.

Since style sheets are an HTML/formatting construct, you would think that where the CSS file is with respect to the PHP file is irrelevant?!

I'm just taking what you said and pointing out how what it takes to make things work contradict your explanation.

It looks like - to me - that maybe what is "intuitive" isn't how things actually work...

Amy

bradgrafelman

It's not relative to any particular file. The relative URL for the CSS is relative to whatever URL you're visiting. Since you're visiting /index.php, the relative path is relative to where the PHP file is.

This is the point where Weedpacket would jump in and say the URL's don't necessarily imply anything about the filesystem paths.

amy_damnit

Okay. Fair enough. I guess I FINALLY get it. :o

Thanks as always!

Amy