Writing a simple PHP website and having trouble linking the stylesheet to the page. In the past I've had issues with this but usually it ends up working.
Anything wrong with my code? Or am I just doing it wrong?
<head>
<title>San Joaquin Valley Town Hall</title>
<link href="styles/main.css" media="screen" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="styles/normalize.css">
</head>`
(I am using a XAMPP server to run my files)
Thanks
Without understanding your file structure, there isn't much else that can be said here.
I'd recommend using a relative link from the root directory of your project. Let's say your file structure is something like:
[website]
[resources]
[styles]
[images]
[js]
...
Then you're style include would be something like:
<link rel="stylesheet" href="/resources/styles/my_sheet.css" media="screen" type="text/css"/>
This is personal preference, as I'm not a fan of using directory traversal .. or . to find files. In my experience, files end up moving around a bit (we develop our own framework, so things are always changing) so with this we're sure exactly where the file is located just by viewing the href.
The link tag looks fine, however the href is relative. Is the styles directory in the same directory as your html?
If you can see your stylesheet at http://yoursite.com/styles/main.css, I would change the link to be less relative:
<link href="/styles/main.css" media="screen" rel="stylesheet" type="text/css" />
This way, no matter where your HTML page resides in the file structure, the stylesheet will be found.
HTML media Attribute
Read the page that was recommended and after reading, try this:
<head>
<title>San Joaquin Valley Town Hall</title>
<link rel="stylesheet" type="text/css" href="styles/main.css" media="screen">
<link rel="stylesheet" type="text/css" href="styles/normalize.css">
</head>
if the next problem is the directory, try this:
<head>
<title>San Joaquin Valley Town Hall</title>
<link rel="stylesheet" type="text/css" href="/styles/main.css" media="screen">
<link rel="stylesheet" type="text/css" href="/styles/normalize.css">
</head>
Related
I have two CSS links in the head of my PHP file.
<link rel="stylesheet" type="text/css" href="../styles/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../styles/style.css">
The first one (Bootstrap) works. The second one doesn't. They are both in the same path. I've double and triple checked that the second one is spelled correctly. What should I do?
Check the location of your file in a web site's folder structure.
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
css is located in the same folder as the current page
<link rel="stylesheet" type="text/css" href="styles/bootstrap.min.css">
css is located in the styles folder in the current folder
<link rel="stylesheet" type="text/css" href="/styles/bootstrap.min.css">
css is located in the styles folder at the root of the current web
<link rel="stylesheet" type="text/css" href="../styles/bootstrap.min.css">
css is located in the folder one level up from the current folder
Currently have a site built using SASS, however due to the fact it was not compiling we decided to edit the cw-styles CSS in our DEV environment and upload this to the FTP instead.
This is how we are linking the css in the Head section currently:
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="/<?php echo SITE_FOLDER; ?>/css/all.css" rel="stylesheet" type="text/css" />
<link href="/common/js/image/swipe.css" rel="stylesheet" type="text/css" />
<link href="/mse/css/cw-styles.css" rel="stylesheet" type="text/css" />
However on uploading this, in the Head section the link to the stylesheet on the Live site has broken, giving us a link that looks like this:
<link href="/mse,_uploads,_all.crush.css,q23409834296+common,_js,_image,_swipe.css+mse,_css,_cw-styles.css+common,_js,_lightbox,_lightbox.css+common,_js,_image,_swipe.css.pagespeed.cc.0Keg4MRi-i.css" rel="stylesheet" type="text/css"/>
Anyone experienced this, or clues as to why this is happening?
So, I've had a look around, become somewhat overwhelmed by the variety of different answers I've come across and would like a hand.
My included PHP header CSS files currently look like this:
<meta name="viewport" content="initial-scale=1.0">
<link href="CSS/header.css" type="text/css" rel="stylesheet" />
<link href="CSS/ufc-blog.css" type="text/css" rel="stylesheet" />
<link href="CSS/ufc205.css" type="text/css" rel="stylesheet" />
<link href="CSS/cerrone-lawler.css" type="text/css" rel="stylesheet" />
How can I specify the path and then enter a variable from the page with the included header that set the stylesheet to display the CSS specifically for that page?
I've searched around and found people with similar problems, but nothing suggested seems to work for me.
Here's my file structure...
CSS
> style.css
INCLUDES
> header.php
> footer.php
IMGS
index.php
contact.php
about.php
terms.php
MUSEUM-PAGES
> dummy.php
the header.php which contains the link to css works fine for any html/php page that isn't nested in a sub-directory.
But when I use a sub-directory to better organise the files it falls apart. In this example museum-pages > dummy.php can't bring in the css. The content from the header and footer work fine, just not the CSS files.
I tried replacing the
<link rel="stylesheet" href='css/style.css' type="text/css" media="screen" title="no title" charset="utf-8"> in the header.php to...
/css/style.css
.
../
../../
but it will drop all non-sub directed references in other pages, such as the homepage. I am baffled.
Anyone able to help me please?
Use an absolute path:
<link rel="stylesheet" href='/css/style.css' type="text/css" media="screen" title="no title" charset="utf-8">
This should work fine?
<link rel="stylesheet" href='/css/style.css' type="text/css" media="screen" title="no title" charset="utf-8">
The / is 'root'
EDIT
Since this didnt work, you could try this below, it isnt good practice IMHO however.. it will work.
<?php
// this is your header.php file
$linkToCss = "http://yoursite.com/css/styles.css";
?>
<link rel="stylesheet" href='<?php $linkToCss; ?>' type="text/css" media="screen" title="no title" charset="utf-8">
If that doesn't work there is another issue going on - try it see if it works.
I am new to php, but suspect there is a simple solution that I am not aware of.
I have made a template for the header on every page, but when the user loads pages the css page changes in relation to their current page.
How do I have php track how many levels up in a folder the user is so I can pull the css from anywhere in the website?
<link rel="stylesheet" href="../templates/css/css.css" type="text/css" />
That is my current link to css, but for a page further down in folders I need it to add additional ../
You should use an absolute path from the root of the website (note, no ".." just a "/"):
<link rel='stylesheet' href='/templates/css/css.css' type='text/css' />
Will always work, as long as your css is at:
http://yourwebsite.com/templates/css/css.css
you shouldn't be using a relative path then. Why not just do something like:
<link rel="stylesheet" href="http://www.mysite.com/templates/css/css.css" type="text/css" />
or
<link rel="stylesheet" href="/templates/css/css.css" type="text/css" />
or
<link rel="stylesheet" href="<?php echo $_SERVER['DOCUMENT_ROOT']; ?>/templates/css/css.css" type="text/css" />
whichever suits your needs - since you may be working locally and have a strange file structure, or a shared style directory for example
The best method is to use:
<link rel="stylesheet" href="<?php echo $_SERVER['DOCUMENT_ROOT']; ?>/templates/css/css.css" type="text/css" />