LinuxQuestions.org
Download your favorite Linux distribution at LQ ISO.
Go Back   LinuxQuestions.org > Forums > Linux Forums > Linux - Distributions > Ubuntu
User Name
Password
Ubuntu This forum is for the discussion of Ubuntu Linux.

Notices


Reply
  Search this Thread
Old 10-16-2011, 12:58 PM   #1
OtagoHarbour
Member
 
Registered: Oct 2011
Posts: 312

Rep: Reputation: 3
Problem Combining PHP with CSS Using LAMP


I am using Gnome terminal 2.31.1 on Ubuntu 11.04. (The PC is old so the architecture does not support Unity.) I set up LAMP according to the directions here. I figured out that the localhost directory is /var/www. I therefore put the html, php and css files in that directory. It seems to work with basic php since, when I put a file called index.php in that directory and just fill it with
Code:
<?php echo "Hello world" ?>
and put
Code:
localhost/index.php
in the FF url box, I get "Hello world" in the FF browser. However when I add
Code:
<link rel="stylesheet" type="text/css" href="style.css" />
I do not get the style specified in style.css.

When I go the window displaying the files in the files in /var/www and click on index.html (which is the same as index.php except it has the different suffix) then
Code:
file:///var/www/index.html
appears in the FF url box and I get the page with the style specified by style.css. However when I replace what is in the dialog box with
Code:
file:///var/www/index.php
then FireFox asks me what I want to open it with and FireFox is not one of the options.

So, to summarize, if I use
Code:
localhost/index.php
FF doesn't bother using style.css. If I use
Code:
file:///var/www/index.php
FF doesn't try to do anything with the php file.

Any help resolving this problem would be greatly appreciated.
 
Old 10-16-2011, 01:08 PM   #2
frieza
Senior Member
 
Registered: Feb 2002
Location: harvard, il
Distribution: Ubuntu 11.4,DD-WRT micro plus ssh,lfs-6.6,Fedora 15,Fedora 16
Posts: 3,233

Rep: Reputation: 404Reputation: 404Reputation: 404Reputation: 404Reputation: 404
try
Code:
<link rel="stylesheet" type="text/css" href="/style.css" />
or better yet, it's cleaner practice to put your stylesheets in a 'styles' directory eg /var/www/styles and you would put
Code:
<link rel="stylesheet" type="text/css" href="/styles/style.css" />

Last edited by frieza; 10-16-2011 at 01:10 PM.
 
Old 10-16-2011, 02:06 PM   #3
OtagoHarbour
Member
 
Registered: Oct 2011
Posts: 312

Original Poster
Rep: Reputation: 3
Quote:
Originally Posted by frieza View Post
try
Code:
<link rel="stylesheet" type="text/css" href="/style.css" />
or better yet, it's cleaner practice to put your stylesheets in a 'styles' directory eg /var/www/styles and you would put
Code:
<link rel="stylesheet" type="text/css" href="/styles/style.css" />
Thank you for your reply. I tried both of those but to no avail. An example of code that I think should work is
Code:
<div id="upperBanner">Company Name<sup style="font-size:3mm">TM</sup></div>
where upperBanner is defined in /styles/style.css thus
Code:
#upperBanner 
{
	background-color: white;
	color: maroon;
	font-family: Times New Roman;
	font-size: 3.6em;
	font-variant: small-caps;
	margin-bottom: 0;
	padding: 0.3em;
	text-align:center;
}
But the style defined in style.css is ignored.

The following does work
Code:
<div id="upperBanner" style="background-color: white;
	color: maroon;
	font-family: Times New Roman;
	font-size: 3.6em;
	font-variant: small-caps;
	margin-bottom: 0;
	padding: 0.3em;
	text-align:center;">Company Name<sup style="font-size:3mm">TM</sup></div>
So it seems that local styling works but the php file is not getting the definitions from style.css.
 
Old 10-16-2011, 08:05 PM   #4
frieza
Senior Member
 
Registered: Feb 2002
Location: harvard, il
Distribution: Ubuntu 11.4,DD-WRT micro plus ssh,lfs-6.6,Fedora 15,Fedora 16
Posts: 3,233

Rep: Reputation: 404Reputation: 404Reputation: 404Reputation: 404Reputation: 404
if you are using firefox you really should install firebug (add-on), that might help you figure things out as well.
plus, did you put the link to the stylesheet in the <head> section?
 
Old 10-17-2011, 01:43 PM   #5
OtagoHarbour
Member
 
Registered: Oct 2011
Posts: 312

Original Poster
Rep: Reputation: 3
Quote:
Originally Posted by frieza View Post
if you are using firefox you really should install firebug (add-on), that might help you figure things out as well.
plus, did you put the link to the stylesheet in the <head> section?
Thanks again for you reply. I installed FireBug and it gave me the following error message for the element <body>.

Code:
This element has no style rules. You can create a rule for it.
I have the following code in the <head> section.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Company Name </title>
<meta content="FI" http-equiv="Content-Language">
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
<meta content="text/css" http-equiv="Content-Style-Type">
<meta content="Company Name Home Page" name="description">
<meta content="gene, genes, transcripts, Affymetrix, DNA, chip, expression, array, artifacts, background" name="keywords">
<link href="/styles/style.css" type="text/css" rel="stylesheet">
</head>
I cannot see why style.css is being ignored.
 
Old 10-17-2011, 03:54 PM   #6
frieza
Senior Member
 
Registered: Feb 2002
Location: harvard, il
Distribution: Ubuntu 11.4,DD-WRT micro plus ssh,lfs-6.6,Fedora 15,Fedora 16
Posts: 3,233

Rep: Reputation: 404Reputation: 404Reputation: 404Reputation: 404Reputation: 404
is styles.css actually IN a folder called styles? if not it won't be found.
 
Old 10-17-2011, 04:03 PM   #7
sycamorex
LQ Veteran
 
Registered: Nov 2005
Location: London
Distribution: Slackware64-current
Posts: 5,832
Blog Entries: 1

Rep: Reputation: 1229Reputation: 1229Reputation: 1229Reputation: 1229Reputation: 1229Reputation: 1229Reputation: 1229Reputation: 1229Reputation: 1229
If you can, could you post the whole code of your index.php (without unnecessary details, ie. names, etc) and
Code:
tree /var/www
(as long as there are no thousands of files
 
Old 10-17-2011, 08:42 PM   #8
OtagoHarbour
Member
 
Registered: Oct 2011
Posts: 312

Original Poster
Rep: Reputation: 3
Quote:
Originally Posted by frieza View Post
is styles.css actually IN a folder called styles? if not it won't be found.
Yes. And it is called when I click on index.html in the /var/www and got
file:///var/www/index.html
in my web browser.

Thanks,
Peter.
 
Old 10-17-2011, 09:03 PM   #9
OtagoHarbour
Member
 
Registered: Oct 2011
Posts: 312

Original Poster
Rep: Reputation: 3
Quote:
Originally Posted by sycamorex View Post
If you can, could you post the whole code of your index.php (without unnecessary details, ie. names, etc) and
Code:
tree /var/www
(as long as there are no thousands of files
Thank you for your help. The code of the php file is as follows.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <title> Company Name </title>

    <meta http-equiv="Content-Language" content="FI" />

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

    <meta http-equiv="Content-Style-Type" content="text/css" />

    <meta name="description" content="Company Name Home Page" />

    <meta name="keywords" content="gene, genes, transcripts, Affymetrix, DNA, chip, expression, array, artifacts, background" />
    <link rel="stylesheet" type="text/css" href="/styles/style.css" />

</head>
<body>




<div id="upperBanner" >Company Name<sup style="font-size:3mm">TM</sup></div>

<div id="linkBar">

<ul style="font-family:times, serif;font-size:5mm">

  <li><a href="index.php">Home</a></li>

  <li><a href="about.html">About</a></li>

  <li><a href="UnderConstruction.html">Contact</a></li>

  <li><a href="Dracula.php">Dracula</a></li>

  <li><a href="Subscriptions.html">Subscriptions</a></li>
</body>

</html>
The result of
Code:
tree /var/www
is as follows.
Code:
/var/www
├── BackgroundColorBar.jpg
├── Background.jpg
├── Icons.jpg
├── index2.php
├── index.html
├── index.php
├── old
│** └── index.html
├── SelfAtDenis.JPG
├── style.css
├── styles
│** └── style.css
└── testphp.php
Thank you for your help,
Peter.
 
Old 10-18-2011, 03:45 AM   #10
sycamorex
LQ Veteran
 
Registered: Nov 2005
Location: London
Distribution: Slackware64-current
Posts: 5,832
Blog Entries: 1

Rep: Reputation: 1229Reputation: 1229Reputation: 1229Reputation: 1229Reputation: 1229Reputation: 1229Reputation: 1229Reputation: 1229Reputation: 1229
Try:

Code:
<link rel="stylesheet" type="text/css" href="styles/style.css" />
 
Old 10-18-2011, 04:20 AM   #11
eSelix
Senior Member
 
Registered: Oct 2009
Location: Wroclaw, Poland
Distribution: Arch, Kubuntu
Posts: 1,261

Rep: Reputation: 315Reputation: 315Reputation: 315Reputation: 315
Check what is saying your browser when you type in urlbar
Code:
http://localhost/styles/style.css
 
1 members found this post helpful.
Old 10-18-2011, 07:07 AM   #12
OtagoHarbour
Member
 
Registered: Oct 2011
Posts: 312

Original Poster
Rep: Reputation: 3
Quote:
Originally Posted by sycamorex View Post
Try:

Code:
<link rel="stylesheet" type="text/css" href="styles/style.css" />
Still the same result.
 
Old 10-18-2011, 07:22 AM   #13
OtagoHarbour
Member
 
Registered: Oct 2011
Posts: 312

Original Poster
Rep: Reputation: 3
Quote:
Originally Posted by eSelix View Post
Check what is saying your browser when you type in urlbar
Code:
http://localhost/styles/style.css
Ah! That was the problem. I didn't have read permission for that directory/file. I went to /var/www and entered
Code:
chmod a+r styles/style.css
and that fixed the problem.

Thanks very much,
Peter.
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
Resource Recommendation - LAMP, Oracle Bekeley DB, HTML/XHTML/XML/SOAP, CSS, Java,etc techieg Linux - Newbie 2 04-15-2009 06:32 AM
LAMP Apache 2.0.52 php 4.3.9 MyQSL 2.5.1 problem RHEL 4 Bartoldo Linux - Software 2 08-24-2007 08:16 AM
Problem loading css in php Runnerdave Programming 6 07-26-2005 08:27 PM
HTML/PHP problem, using LAMP AntWarrior Programming 2 11-27-2004 08:49 AM
LAMP(Linux, Apache, MySQL, PHP) Problem gamehack Slackware 7 08-17-2004 02:52 PM

LinuxQuestions.org > Forums > Linux Forums > Linux - Distributions > Ubuntu

All times are GMT -5. The time now is 03:16 AM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration