CODEWITHSUNDEEP
phphtmlcss
Abbishek Shiva
Abbishek Shiva

Reputation: 33

Css does not apply on php file

The CSS file applies all changes to my medlemmer.html and my cw.html, but not on my index.php. Is is because it is a .php file or what? I have tried different methods to link the php to css, but noen of them works.

index.php

<!DOCTYPE html>
<!-- HTML5 Boilerplate -->
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

<head>

 <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <meta charset="utf-8">
    <!-- Always force latest IE rendering engine & Chrome Frame -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>WinRAR - Hjem</title>
    <meta name="description" content="This is the Responsive Grid System, a quick, easy and flexible way to create a responsive web site.">
    <meta name="keywords" content="responsive, grid, system, web design">

    <meta name="author" content="www.grahamrobertsonmiller.co.uk">

    <meta http-equiv="cleartype" content="on">

    <link rel="shortcut icon" href="/favicon.ico">

    <!-- Responsive and mobile friendly stuff -->
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="css/html5reset.css" media="all">
    <link rel="stylesheet" href="css/col.css" media="all">
    <link rel="stylesheet" href="css/2cols.css" media="all">
    <style type="text/css">

    /*  
    ======================== 
    - Note: These styles are just to pretty the basic page up a bit.
    You should ignore these when copying and pasting into your site 
    because your stylesheet should take care of making it look pretty!
    ======================== 
    */
    body { padding:2em; font : 100%/1.4 'Roboto Condensed', Helvetica, sans-serif;  
 }
    h1 { font-size:2.2em; padding:0 0 .5em 0; }
    h2 { font-size:1.5em; }
    .header { padding:1em 0; }
    .col { background: black; color: white; padding: 1% 0; text-align: center;}

    </style>

<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="header-fixed.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>

<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700" rel="stylesheet" type="text/css">

</head>
<body>

<header class="header-fixed">

    <div class="header-limiter">

        <h1><a href="#">Win<span>Rar</span></a></h1>

        <nav>
            <a href="index.php" class="selected">Hjem</a>
            <a href="medlemmer.html">Medlemmer</a>
            <a href="cw.html">ClanWars</a>
            <a href="#">Doner</a>
        </nav>

    </div>

</header>

<!-- You need this element to prevent the content of the page from jumping up -->
<div class="header-fixed-placeholder"></div>

<div class="headbanner">
    <center>
<div class="headBannerText">
WinRaR</center>
</div>
    
</div>

<div class="infonav">
    <div class="infonavText">
        <center>Teamspeak 3: ts.winrarbw.no</center>
    </div>
</div>

    <!-- HEADER SLUTTER HER -->
    <center>

    <br><br>
                        <div id="wrapper">

    <div id="right">

        <div class="parent">

            <div class="main">

                <p>Månedens klanspillere</p>

                <div class="content" style="font-size: 19px">
               
                    <img src="https://mcapi.ca/avatar/Steve/30/true"><b> Spiller1<br>
                    <img src="https://mcapi.ca/avatar/Steve/30/true"> Spiller2<br>
                   <img src="https://mcapi.ca/avatar/Steve/30/true"> Spiller3</b><br>
                   <i>Månedens klanspiller kommer snart!</i>
                  
                </div>
            </div>
       </div>

        <div class="parent">

            <div class="main">

                <p>Klan Info</p>

                <div class="content">

                    <b>Totale medlemmer:</b> 8<br>
                    <b>Åpnet:</b> 12.05.2017<br>
                    <b>ClanWars' spilt:</b> 0

                </div>
            </div>
        </div>  
        
    </div>

    <div id="left">


                         <?php include "fusion/upload/news.php"; ?>
        
    
  </div>
</div>

<div class="footer"><div class="footerText">
<b>WinRar</b> Bedwars Clan | GommeHD & PvPHeroes<br>
Copyright &copy; 2017 | Coded by Thesevs
</div></div>


                <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

    $(document).ready(function(){

        var showHeaderAt = 150;

        var win = $(window),
                body = $('body');

        // Show the fixed header only on larger screen devices

        if(win.width() > 600){

            // When we scroll more than 150px down, we set the
            // "fixed" class on the body element.

            win.on('scroll', function(e){

                if(win.scrollTop() > showHeaderAt) {
                    body.addClass('fixed');
                }
                else {
                    body.removeClass('fixed');
                }
            });

        }

    });

</script>

</center>
</body>

            
                </html>

style.css

body {
  background-color: #F2F2F2;
}

.userName {
  font-size: 20px;
}

.user {
  display: inline-block;
  margin-left: 5%;
  margin-top: 1%;
}

.body_large {
  background-color: white;
  height: auto;
  margin-top: 1.5%;
  color: black;}

.box_text {
  padding: 3%;
  font-size: 14px;
}

.headbanner {
  background-image: url("http://winrarbw.esy.es/winrar/banner.jpg");
  width: 100%;
  height: 22%;
}

.headBannerText {
  color: white;
  font: normal 90px Cookie, Arial, Helvetica, sans-serif;
  padding: 8% 0%;
}

.infonav {
  background-color: #01A9DB;
  box-shadow:0 1px 1px #ccc;
  height: 40px;
  color: #ffffff;
  box-sizing: border-box;

  -webkit-transition:top 0.3s;
  transition:top 0.3s;
}

.infonavText {
  color: white;
  padding: 0.5%;
  font:19px 'Roboto Condensed', Helvetica, sans-serif;
}

body {
      font-family: 'Roboto Condensed', Helvetica, sans-serif;
}

#wrapper {
      overflow: auto;
      padding: 10px;
}

#right {
     width: 25%;
     float: right;
     margin-right: 10%;
}

#left {
     width: 50%;
     float: left;
     margin-left: 10%;
}

.parent {
      text-align: center;
      border: 1px solid #ccc;
      background-color: #fff;
      padding-top: 5px;
      margin-bottom: 15px;

}

#left .parent {
     margin-bottom: 18px;
}
        
.main {
     background-color: #000;
     padding-bottom: 0px;
      box-shadow: 0px 2px 5px #888888;

}


.main p {
     margin:0;
     color: #fff;
     padding: 10px 0;
     font-size: 18px;
     font-family: 'Roboto Condensed', Helvetica, sans-serif;
}

.main .content {
    background-color: #fff;
    padding: 16px;
    font-size: 14px;
    font-family: 'Roboto Condensed', Helvetica, sans-serif;
}

@media screen and (max-width: 990px) {

    #right, #left {
        float: none;
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }
}

.footer {
  background-color: black;
  height: 150px;
  margin-top: 12%;
}

.footerText {
  color: white;
  font-family: 'Roboto Condensed', Helvetica, sans-serif;
  font-size: 14px;
  padding: 3% 0%;
}

Upvotes: 1

Views: 1495

Answers (2)

Javeed Ishaq
Javeed Ishaq

Reputation: 7105

There is not any different method to add CSS in a PHP file. only PHP files are rendered through PHP web server and HTML files do not need web server.

TRY using ctrl+f5 to refresh the page , clearing the browser cache and also run php file via localhost xampp or wampp

Upvotes: 1

spectatorx
spectatorx

Reputation: 373

Everything seems to be ok. Check if you have .css files in valid paths and also make sure problem is not on web browser side, clear its cache or just try in few web browsers.

I checked index.php file's code on my computer and everything works fine.

Upvotes: 0

Related Questions