www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 29

Thread: CSS in PHP include header and footer not working

  1. #1
    Join Date
    May 2014
    Posts
    12

    CSS in PHP include header and footer not working

    Hi I can't get my php include/header & footer to recognize my css.

    My header.php and css are in the same file so I don't believe it is a directory issue.

    I have tried to make a base to link to the root but that didn't work.

    My website is kirsteneaton.com/myWebsite/currentProjects.php


    I have tried everything I know to get this to work for 2 days.


    Thank you.

  2. #2
    Join Date
    May 2014
    Posts
    1
    The gurus will soon attend to you

  3. #3
    Join Date
    May 2014
    Posts
    915
    Link 404 -- did you take it down because you got it sorted?

    Really, it's unlikely it belongs in your footer, since the STYLE and LINK tags are only valid in <HEAD></HEAD>

    really though, without seeing the PHP that generates your markup, it's unlikely we can help you.
    Java is to JavaScript as Ham is to Hamburger.

  4. #4
    Join Date
    May 2014
    Posts
    12
    Quote Originally Posted by deathshadow View Post
    Link 404 -- did you take it down because you got it sorted?

    Really, it's unlikely it belongs in your footer, since the STYLE and LINK tags are only valid in <HEAD></HEAD>

    really though, without seeing the PHP that generates your markup, it's unlikely we can help you.
    Thank you for your reply. No, it was never up. Were you able to view it privately. I'm sorry for not including my php...

    <?php include 'header.php'; ?>

    <!DOCTYPE html>
    <html>
    <title>Current Projects with PHP, SEO, JQuery</title>
    <body>
    <div>
    <div class="content">
    <div id="box">
    <h4>Making a Blog in PHP</h4>
    <p>Client based database</p>
    <p>Building Website using SEO</p>
    </div>
    </div>
    </body>
    </html>
    <?php include 'footer.php'; ?>

  5. #5
    Join Date
    May 2014
    Posts
    12
    Oh no I didn't give you the proper file name.
    http://kirsteneaton.com/myWebsite/ph...ntProjects.php
    And I have a header.php and a footer.php

  6. #6
    Join Date
    May 2014
    Posts
    915
    Well, I should probably read you the riot act on the halfwit garbage known as bootstrap, the HTML 5 trash, stupid bandwidth wasting "modernizr" script, gibberish use of numbered headings, incomplete form, lack of media targets on your script LINK...

    But setting all that /fail/ at building a website before you even have content aside...

    http://kirsteneaton.com/myWebsite/ph...tstrap.min.css
    404, file not found

    http://kirsteneaton.com/myWebsite/ph...glyphicons.css
    404, file not found


    The files don't exist. Did you mean to do:
    http://kirsteneaton.com/myWebsite/bo...tstrap.min.css
    http://kirsteneaton.com/myWebsite/in...glyphicons.css

    Remember, the relative path of an include be it JS or CSS is to the location of the PHP file, so this:

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

    run from this:
    http://kirsteneaton.com/myWebsite/ph...ntProjects.php

    results in this:
    http://kirsteneaton.com/myWebsite/ph...tstrap.min.css

    Not this:
    http://kirsteneaton.com/myWebsite/bo...tstrap.min.css

    Since it's not in the root, you'll need to uptree link if you don't want to re-adjust your directory structure.

    Code:
    <link
      rel="stylesheet"
      type="text/css"
      href="../bootstrap/css/bootstrap.min.css"
      media="screen, projection, tv"
    />
    I added in all the stuff you are missing on those incomplete LINK

    Though honestly, I advise against that -- it seems more like your directory structure is flawed since up-tree linking (../) is just sloppy coding and poor planning. I'd move any files users can call directly into the 'root' of the site's location, so that all LINK and SCRIPT tags point down-tree instead.

    Now, that said, your includes also appear to be busted since you've got more than one doctype, head and body... and really you might want to learn a bit more about how to write HTML before you start playing with PHP as to be brutally frank, your markup is bloated gibberish nonsense -- though that's typical of what happens the moment you drag bootcrap and HTML 5-tardery all over a website's carpets.
    Java is to JavaScript as Ham is to Hamburger.

  7. #7
    Join Date
    May 2014
    Posts
    12
    Yeah, I'm new, I suck, I get it. Ugh....where do I start? To be a little defensive I created the header.php and footer.php after my header and footer.html didn't work. I thought bootstrap would be easy now I'm left with this mess. I'll be back after I try to make some of the changes you suggested and let you know. I promise I am not a bad person.

  8. #8
    Join Date
    May 2014
    Posts
    12
    Ok, I see what you are saying. I am going to change my directory. No I did not know that it has to be http://kirsteneaton.com/myWebsite/ph...tstrap.min.css. Did I tell you thank you for beating me up and helping me? Thank you, but I am sure we aren't finished here.

  9. #9
    Join Date
    Mar 2012
    Posts
    1,525
    I strongly recommend using PHP include files, but only AFTER you have learned to write good HTML and CSS. They give a much better structure and maintainability, particularly for larger sites.

  10. #10
    Join Date
    May 2014
    Posts
    12
    Hi. Ok, so I canned the whole bootstrap mess and i wrote my website by hand taking in all of you suggestitions for meta tags and SEO purposes, thanks!
    I changed my file directory to put the css, header and footer all in the php file with the my php pages. I still can't access the css when i pull up my php pages.
    kirsteneaton.com/website my code is:
    <?phpinclude('php/header.php')?>
    i left a copy of 1.css in the website file for now.
    What am i still doing wrong?

  11. #11
    Join Date
    May 2014
    Posts
    915
    Did you figure it out, because it's loading CSS here.

    that said you are missing a few parameters on your LINK... You have:

    <link href="1.css" rel="stylesheet">

    ... and that's only part of the story. You might be having trouble from omitting the TYPE attribute... to say that it's text/css

    ... and since that's a screen layout you should also have a MEDIA attribute saying what media target that is for -- being a screen layout that's typically "screen, projection, tv"

    Code:
    <link
      type="text/css"
      rel="stylesheet"
      href="screen.css"
      media="screen,projection,tv"
    />
    It's also nice to name your stylesheet what they are for -- print, screen, handheld, aural... etc.

    Other than that you seem to be working OK, unless you're using some old browser that can't do flex-box -- like IE 9/earlier.

    Though combining like values in the CSS might help things, as would a reset since there's extra padding in IE and 'real' Opera around things. Semantic/logical heading orders might be in order too... but that's unrelated to your CSS not loading.

    Is that still a problem? If so, what browser and what OS? did you accidentally disable CSS somehow (like with the web developer toolbar extension?)
    Java is to JavaScript as Ham is to Hamburger.

  12. #12
    Join Date
    May 2014
    Posts
    915
    Oh, and on this:
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    Those last two values REALLY shouldn't be declared, they break the ability to zoom in desktop Safari and ALL mobile devices. Maximum-scale and user-scalable should REALLY be avoided as they make mobile harder to use, not easier. For SOME reason some 'experts' out there are claiming this does something useful (they aren't clear what), but given that it screws up one of the most important tools for mobile accessibility -- zooming in -- I can't imagine it to be worth that penalty.

    <meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0" />

    Would probably be better for you. I'd also suggest:
    Code:
    @media (max-width:600px) {
    	* {
    		-webkit-text-size-adjust:none;
    		-moz-text-size-adjust:none;
    		-ms-text-size-adjust:none;
    	}
    }
    Which would probably fix whatever those extra viewport meta values have, without screwing up desktop browsers. The media query is there because tablets don't need those settings usually, and sending the webkit one to desktop safari -- again -- breaks the ability to zoom... the laugh being it does NOT impact Safari on mobile's zooming, making it one of the real "what the devil were they thinking" of these new values.
    Java is to JavaScript as Ham is to Hamburger.

  13. #13
    Join Date
    May 2014
    Posts
    915
    Oh, and you might want to validate your markup -- you've got an unclosed DIV, a second href with no values on your anchor, it's actually a little surprising the layout works with those issues; but HTML is very forgiving -- sometimes I think too forgiving as it makes it WAY harder than need be to notice mistakes.

    Often makes me wonder if the XML guys have it right -- when there's an error just "stop dead" right where the error is instead of plowing on blindly hoping things work; it would make finding errors simpler, and motivate people to actually fix errors instead of shrugging and going "eh, close enough".

    Current SGML style behavior sure as shine-ola doesn't seem to make things easier on people just starting out.
    Last edited by deathshadow; 05-31-2014 at 11:13 AM.
    Java is to JavaScript as Ham is to Hamburger.

  14. #14
    Join Date
    May 2014
    Posts
    12
    Ok, let me catch up and make all of these changes.
    But first let me get something straightened out. Should my files be:
    header and footer html or .php?
    should my css file be inside of my php file?

    Thank you so much, so much for your help.

  15. #15
    Join Date
    May 2014
    Posts
    12
    ok. I am ready to go. Fixed my div, fixed my <links> changed the name of my css. My file structure is:
    screen.css
    header.html footer.html and a
    php file with all of my pages.
    if you go to kirsteneaton.com and then click on references my references.php is displayed with out the css. (my same ole problem)
    my code is:
    <?php include('header.html')?>
    I am clueless.
    You know if we got married I could make you dinner and you could teach me coding? How about it?
    So what's my problem with this css? You said before that all php point upwards that i would need to put my css in the root?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles