Log in

View Full Version : Resolved CSS breaks after splitting .php files


Kage Kazumi
10-22-2012, 05:41 PM
I was creating my admin panel (admin homepage) and then took out the following code:



<!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>ZanimeCMS: Admin Center</title>
<link rel="stylesheet" type="text/css" href="../css/home.css" />
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
</head>

<body>
<!--START Admin Wrapper-->
<div id="adminwrapper">
<!--START Header-->
<div id="header">
<!--START Col-Full-->
<div class="col-full">
<!--START Header LEFT-->
<div class="header-left">
<h2>ZanimeCMS Admin Center</h2>
<!--START Admin Menu-->
<ul id="admin-menu">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Posts</a></li>
<li><a href="#">General Settings</a></li>
<li><a href="#">Manage Users</a></li>
</ul>
<!--END Admin Menu-->
</div>
<!--END Header RIGHT-->
<!--<div class="clear"> Do Not Remove and Leave BLANK!</div>-->
<!--START Header RIGHT-->
<div class="header-right">
<!--START User-->
<div id="user">
<span class="user-name">User</span>
<span class="settings">Settings</span>
</div>
<!--END User-->
</div>
<!--END Header RIGHT-->
</div>
<!--END Col-Full-->
</div>
<!--END Header-->


I then stuck it in a file called header.php and placed it in my include folder. I then added the following PHP:



<?php include_once ('include/header.php'); ?>


To admin/index.php as well as the rest of the HTML on admin/index.php:



<!--START Sub Header-->
<div id="sub-header">
<div class="col-full">
<ul id="admin-sub-menu">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Dashboard</a></li>
<li><a href="#">Dashboard</a></li>
</ul>
</div>
</div>
<!--END SubHeader-->
</div>
<!--END Admin Wrapper-->
</body>
</html>


Now everything is working when I view admin/index.php except the CSS. It is not styling anything. However if I view header.php in a browser it styles it like it should. Am I missing a step or does my index.php still needs it's own:



<header></header>


Tags for the CSS to work as if the page was whole. Or do I need to have a separate CSS file for header.php and index.php as well as footer.php?
keyboard
10-22-2012, 08:24 PM
Try changing -


<link rel="stylesheet" type="text/css" href="../css/home.css" />

to


<link rel="stylesheet" type="text/css" href="css/home.css" />

If that doesn't work, can you give us a link to your site so we can check it out?
Kage Kazumi
10-22-2012, 08:30 PM
Try changing -


<link rel="stylesheet" type="text/css" href="../css/home.css" />

to


<link rel="stylesheet" type="text/css" href="css/home.css" />

If that doesn't work, can you give us a link to your site so we can check it out?

Dreamweaver adds those ".." automatically and it doesn't work with them removed. Also this is local host (Wamp).
keyboard
10-22-2012, 08:45 PM
Hmmmm... that means that the file directory should be right...
Just in case -
Could you please post the urls of the css file, the php file that includes the other file and the other file. (I know they're on localhost, I'm just checking the the paths are right).
Kage Kazumi
10-22-2012, 09:58 PM
Hmmmm... that means that the file directory should be right...
Just in case -
Could you please post the urls of the css file, the php file that includes the other file and the other file. (I know they're on localhost, I'm just checking the the paths are right).

Here I just uploaded them:

ADMIN index: http://zanime.net/cms/admin/index.php

Header.php: http://zanime.net/cms/admin/include/header.php

it doesn't even work on a live site.
keyboard
10-22-2012, 10:04 PM
On the first page you linked to, it is referencing a css file located at http://zanime.net/cms/css/home.css, when the css file is actually located at http://zanime.net/cms/admin/css/home.css
Either put the full path of the css file into your webpage, or remove the ../ from the relative path. That is what is causing it to break!
Kage Kazumi
10-22-2012, 10:09 PM
On the first page you linked to, it is referencing a css file located at http://zanime.net/cms/css/home.css, when the css file is actually located at http://zanime.net/cms/admin/css/home.css
Either put the full path of the css file into your webpage, or remove the ../ from the relative path. That is what is causing it to break!

Yes, I just noticed that when I went to view source and hovered over the CSS file. Damn Dreamweaver not putting the full path.

I hate it when it is something easy that I over look... O_0