Results 1 to 7 of 7

Thread: CSS breaks after splitting .php files

  1. #1
    Join Date
    Oct 2012
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS breaks after splitting .php files

    I was creating my admin panel (admin homepage) and then took out the following code:

    HTML 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 Code:
    <?php include_once ('include/header.php'); ?>
    To admin/index.php as well as the rest of the HTML on admin/index.php:

    HTML Code:
    <!--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:

    HTML Code:
    <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?
    Last edited by Kage Kazumi; 10-22-2012 at 10:10 PM.

  2. #2
    Join Date
    Mar 2011
    Posts
    2,144
    Thanks
    59
    Thanked 116 Times in 113 Posts
    Blog Entries
    4

    Default

    Try changing -

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

    Code:
    <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?

  3. #3
    Join Date
    Oct 2012
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by keyboard1333 View Post
    Try changing -

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

    Code:
    <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).

  4. #4
    Join Date
    Mar 2011
    Posts
    2,144
    Thanks
    59
    Thanked 116 Times in 113 Posts
    Blog Entries
    4

    Default

    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).

  5. #5
    Join Date
    Oct 2012
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by keyboard1333 View Post
    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.

  6. #6
    Join Date
    Mar 2011
    Posts
    2,144
    Thanks
    59
    Thanked 116 Times in 113 Posts
    Blog Entries
    4

    Default

    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!

  7. #7
    Join Date
    Oct 2012
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by keyboard1333 View Post
    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

Similar Threads

  1. Splitting strings
    By keyboard in forum PHP
    Replies: 1
    Last Post: 07-26-2012, 04:12 AM
  2. Splitting HTML View
    By Freddie in forum HTML
    Replies: 2
    Last Post: 07-07-2010, 07:24 PM
  3. help with splitting string
    By genia in forum PHP
    Replies: 2
    Last Post: 10-05-2008, 03:47 PM
  4. Splitting array twice
    By motormichael12 in forum PHP
    Replies: 3
    Last Post: 07-03-2008, 12:32 PM
  5. Splitting Numbers
    By realwx in forum PHP
    Replies: 2
    Last Post: 03-14-2007, 12:02 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •