2016-05-25 9 views
1

Mein CSS funktionierte auf allen meinen Seiten einwandfrei und hörte dann plötzlich auf zu arbeiten. Es scheint fast so, als ob die CSS-Datei nicht mehr verlinkt wird. Das komische Ding ist, ich kopiere einfach und kopiere meinen Kopf von den vorherigen Seiten, die gut funktionieren. Ich habe Bootstrap Laden vor meinem benutzerdefinierten CSS, das scheint gut zu verknüpfen.CSS-Datei funktioniert für eine Seite, aber nicht die andere?

Arbeits URL: http://www.pslink.ca/alliance/interior-electrical.php

HTML

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 

 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 

 
    <title>Alliance Lighting</title> 
 

 
    <!-- Bootstrap Core CSS --> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
 

 
    <!-- Custom CSS --> 
 
    <link href="css/style.css" rel="stylesheet" type="text/css"> 
 

 
    <!-- Font Awesome --> 
 

 
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 

 
</head> 
 

 
<body> 
 

 
<?php include_once ("navbar.html"); ?> 
 

 

 

 
<div class="interior-section"> 
 
     <div class="interior-description"> 
 
      <h1 class="service-h1">Interior Electrical</h1> 
 
         <img src="img/pic09.jpeg" class="service-image"> 
 
          <p><span class="service-span">Are you using the right people for the right jobs?</span></p> 
 

 
          <p>In today’s economy are 
 
          you finding that your contractors are less interested in attending to your smaller jobs? 
 
          Alliance team will attend to your service calls form one light out to a full re-lamp 
 
          of your facility quickly and effectively.</p> 
 

 
          <p>Alliance is one of few companies that provides a FREE comprehensive lighting audit 
 
          and analysis for your business or commercial facility. We strive to educate our clients 
 
          about all the aspects of their LED lighting projects - we specifically explain all the 
 
          benefits of high efficiency, environmentally-friendly, lighting solutions. 
 
          Alliance is proud to be able to offer high-efficiency LED lights for virtually all lighting 
 
          applications, from retrofit and remodeling to brand new constructions.<p> 
 

 
          <p class="service-sub"><strong>Interior Electrical Services:</strong></p> 
 
           <ul class="int-list-1" id="service-list"> 
 
            <li><i class="fa fa-check" aria-hidden="true"></i>General Service calls</li> 
 
            <li><i class="fa fa-check" aria-hidden="true"></i>LED Retrofits<li> 
 
            <li><i class="fa fa-check" aria-hidden="true"></i>Re-Lamp</li> 
 
            <li><i class="fa fa-check" aria-hidden="true"></i>Service Programs</li> 
 
            <li><i class="fa fa-check" aria-hidden="true"></i>Light Level Calculations</li> 
 
            <li><i class="fa fa-check" aria-hidden="true"></i>Automated Lighting Control and Management Systems</li> 
 
           </ul> 
 
           <ul class="int-list-2" id="service-list"> 
 
            <li><i class="fa fa-check" aria-hidden="true"></i>Re-Ballast</li> 
 
            <li><i class="fa fa-check" aria-hidden="true"></i>Emergency Lighting</li> 
 
            <li><i class="fa fa-check" aria-hidden="true"></i>Lighting Automation</li> 
 
            <li><i class="fa fa-check" aria-hidden="true"></i>Lighting Design and Consulting</li> 
 
            <li><i class="fa fa-check" aria-hidden="true"></i>Load Calculations and Reduction Planning</li> 
 
           </ul> 
 
    </div> 
 
</div> 
 

 
<div id="footer" class="footer-section"> 
 
    <div class="container"> 
 
     <p>ALLIANCE-LIGHTING.COM <i class="fa fa-copyright"></i>2016</p> 
 
    </div> 
 
</div> 
 

 
    <!-- jQuery --> 
 
    <script src="js/jquery.js"></script> 
 

 
    <!-- Bootstrap Core JavaScript --> 
 
    <script src="js/bootstrap.min.js"></script> 
 
    
 

 
</body> 
 

 
</html>

CSS

.interior-section { 
 
    background:#fff; 
 
    max- height:100%; 
 
    width:100%; 
 
} 
 

 
.interior-description { 
 
    position:absolute; 
 
    text-align:justify; 
 
    width:100%; 
 
    padding:0 10%; 
 
    padding-right:10%; 
 
    padding-bottom:5rem; 
 
    top:20%; 
 
}

Broken URL: http://www.pslink.ca/alliance/gov-rebate.php

HTML

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 

 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 

 
    <title>Alliance Lighting</title> 
 

 
    <!-- Bootstrap Core CSS --> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
 

 
    <!-- Custom CSS --> 
 
    <link href="css/style.css" rel="stylesheet" type="text/css"> 
 

 
    <!-- Font Awesome --> 
 

 
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 

 
</head> 
 

 
<body> 
 

 
<?php include_once ("navbar.html");?> 
 

 
<div class="gov-section"> 
 
     <div class="gov-description"> 
 
      <h1 class="service-h1">Government Rebate</h1> 
 
         <img src="img/serv08.jpeg" class="service-image"> 
 
          <p><span class="service-span">Alliance handles all government rebate programs offered by your local utility 
 
          company as well as a full ROI of your project.</span></P> 
 
          <p>Our knowledge of the current available incentives is unmatched 
 
          in the industry, the fact that easily places Alliance in a category of its own. We coordinate the process and 
 
          ensure that your plans follow the requirements set by the utilities to secure these incentives and return the expected ROI. 
 
          </p> 
 

 
          <p><strong>Working with Alliance Lighting means:</strong></p> 
 
           
 
          <ul class="gov-list-1"> 
 
            <li><i class="fa fa-check" aria-hidden="true"></i>We handle EVERYTHING on your behalf</li> 
 
            <li><i class="fa fa-check" aria-hidden="true"></i>We put our years of experience and knowledge to work on your specific process</li> 
 
          </ul> 
 
          <p>Our experience has proven that providing improvements in lighting systems offers the biggest ROI for our customers. </p> 
 

 
          <p>Enjoy the benefits of lower utility bills while providing better lighting quality throughout your industrial complex 
 
          or building. And in addition to the primary benefit of lower monthly energy bills, optimal lighting feels better on 
 
          your eyes, not to mention the increase in the value of your property and worker productivity. 
 
          Alliance will work with you to arrive at the perfect energy efficient lighting fixtures and components for you.</p> 
 

 
          <p>By fulfilling your lighting needs with the best LED technologies, you’ll end each month with lower operating costs 
 
          and more money to invest in the profit-generating aspects of your business. Our onsite assessments begin with a thorough 
 
          inspection of your premises for potential savings and lighting improvement opportunities. Your helpful, friendly lighting 
 
          specialist will fill you in on the latest information about incentives, write-offs and rebates. </p> 
 

 
          <p>You’ll receive a breakdown of the most energy efficient industrial lamps, ballasts and bulbs applicable to your unique 
 
          needs and circumstances. From initial energy assessment to rebate advisement, Alliance implements the best solutions to 
 
          the unique needs of your business.</p> 
 
    </div> 
 
</div> 
 

 

 
    <div id="footer" class="footer-section"> 
 
     <div class="container"> 
 
      <p>ALLIANCE-LIGHTING.COM <i class="fa fa-copyright"></i>2016</p> 
 
     </div> 
 
    </div> 
 

 
    <!-- jQuery --> 
 
    <script src="js/jquery.js"></script> 
 

 
    <!-- Bootstrap Core JavaScript --> 
 
    <script src="js/bootstrap.min.js"></script> 
 

 
</body> 
 

 
</html>

CSS

.gov-section { 
 
    background:#fff; 
 
    max-height:100%; 
 
    width:100%; 
 
} 
 
.gov-description { 
 
    position:absolute; 
 
    text-align:justify; 
 
    width:100%; 
 
    padding:0 10%; 
 
    padding-right:10%; 
 
    padding-bottom:5rem; 
 
    top:20%; 
 
}

+0

Willkommen bei Stack Overflow. Basierend auf Ihrer "Verbindung" verwenden Sie relative Pfade. Kann der PHP diesen Pfad erreichen? Sehen Sie Fehler in Ihrer Browser-Konsole, z. B. 404 für den Linkpfad? – Twisty

+0

Nein, ich sehe keine 404-Fehler. – chadgrayco

+0

Sieht aus wie Ihre '@ media' Anfragen sind der Schuldige. – ccKep

Antwort

3

Wenn Sie die zweite Seite inspiziert haben, sehen Sie, dass die Stile nicht auf die Klassen .gov-* angewendet werden, da ein Problem in Ihrer Datei style.css vorliegt.

Ihnen fehlt ein Abschluss }, bevor Sie .gov-* definieren.

@media only screen and (max-width: 500px) { 
    .service-h1 {font-size:2em;padding-bottom:0;} 
    .maintenance-image img {display:none;} 
    .maint-list-1 {width:100%;} 
    .maint-list-2 {clear:left;width:100%;} 
} /* <---- Missing a closing } */ 
/******** SERVICE 3 END (EXTERIOR ELECTRICAL) *********/ 

/******** SERVICE 4 START (GOVERNMENT REBATE) **********/ 
.gov-section { 
..... 

Sie werden feststellen, dass Sie auch die gleiche Sache gerade getan haben, bevor Sie alle .energy-* Klassen definieren.


Ihre .interior-* Klassen sind in Ordnung, wie Sie die letzte @media Abfrage richtig geschlossen haben.

+1

Perfekt. Vielen Dank! – chadgrayco

+0

@chadgrayco Keine Sorgen Kumpel, ein frisches Paar Augen ist immer gut! – Darren

+0

@Darren Ich habe diese Frage schon früher gesehen, aber ich habe es nicht in meine IDE gepackt. Netter Fang ;-) –

Verwandte Themen