My css is not loading on php

Question

Hey i made a layout for a website in a file.html I got it working, but when i changed the file to a .php, non of the css code i have made worked.

Body {
	margin: 0px;
	background-color: rgba(230, 230, 230, 1);
	font-size: 100%;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
	background-color: RGBA(66, 161, 244, 1);
}
header{
	height:10%;
}
footer{
	height:2%;
	text-align: center;
}
#Logo{
	position: relative;
	width: 50%;
	background-color: black;
	display: inline-block;
	height:100%;
}
#Search{
	float: right;
	position: relative;
	width: 20%;
	height: 50%;
	display: inline-block;
	margin: 0px;
}
.Search{
	width: 80%;
	height: 100%;
}
.SearchButton{
	float: right;
	width: 19%;
	height: 100%;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}
nav ul {
    list-style-type: none;
    padding: 0;
} 
nav ul a {
    text-decoration: none;
}
article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}

<html>
  <head>
	<title>Unnamed Project</title>
    <link rel="stylesheet" type="text/css" href="Forside.css">
	<link rel="stylesheet" type="text/css" href="Standart.css">
    <meta charset="utf-8">
  </head>
  <body>
	<header>
		<img src="Icon.png" id="Logo" href="Forside.php"></img>
		<form action="Forside.php" id="search" method="post">
			<input type="text" name="Parameters" class="Search"></input>
			<input type="submit" value="Søg" class="SearchButton"></input>
		</form>
    </header>
	<nav>
		<ul>
			<li><a>Katagorier</a></li>
		</ul>
	</nav>
	<article>
		<div id='Produkt2'>
								<div id='Navn'>
												$row[Navn]
										</div>
										<div id='Produktnr'>
												$row[AutoID]
										</div>
										<div id='Billedpris'>
											<div id='Billed'>
												<img src='Billeder/$row[Billed]'></img>
											</div>
											<div id='Pris'>
												<a class='pris'>$row[Pris],-</a>
												<div id='Kurv'>
													<form action='PutiKurv.php' method='post'>
														<input type='hidden' name='antal' value='1'>
										<input type='hidden' name='ProduktID' value='$row[AutoID]'>
														<input type='submit' value='Læg i kurv:'></input>
													</form>
												</div>
											</div>
										</div>
										<div id='Info'>
											$row[Info]
											<div id='mere'>
											<form action='$row[Hjemmeside]'>
												<input type='submit' value='Mere info'></input>
											</form>
											</div>
										</div>
										<hr>
							  </div>"
	</article>
	<footer>Copyright &copy; W3Schools.com</footer>
  </body>
</html>

It should look like this, but when i load the css is gone. please help

Assuming you didn't move the PHP file, simply renamed the file extension, you should have two CSS files in the same folder as your PHP file called Forside.css and Standard.css. In this case, the issue is probably a caching one. Simply use CTRL + F5 or try holding SHIFT while clicking refresh, and the CSS should come through. — Obsidian Age
– Obsidian Age, Commented Mar 13, 2017 at 20:34
Yeah, CSS caching can be a little weird; sometimes CTRL + F5 doesn't even work. You can, however, update your CSS forcibly by appending the PHP timestamp to the CSS version number :) — Obsidian Age
– Obsidian Age, Commented Mar 13, 2017 at 20:38

Obsidian Age · Accepted Answer · 2017-03-13 20:42:19Z

The problem is a caching issue. CSS can be a little strange with caching, and while the classic combination CTRL + F5 works for images, it doesn't work for CSS. The better solution to dealing with caching in CSS is to hold down SHIFT while clicking on the refresh symbol.

Obviously, you can include a backslash in the filepath for the CSS reference, or append a version number, such as: <link rel="stylesheet" type="text/css" href="style.css?v2 />.

This version number doesn't 'mean' anything inherently, but can be useful for denoting updates to the CSS, and importantly will be considered a different file by the browser (forcing it to re-load the CSS).

You can also force the browser to refresh the CSS automatically every time the page is loaded with PHP, by appending a timestamp within the link to the CSS file, with something like:

<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />

Keep in mind that CSS can be 'costly', so once you have finished development, you probably want to allow visitors to cache by removing the timestamp in a production environment :)

Hope this helps! :)

Anis Alibegić · Accepted Answer · 2017-03-13 22:38:07Z

0

When a string is specified in double quotes or with heredoc, variables are parsed within it.

You are using single quotes instead of double quotes. Use double quotes if you want the variables to be parsed.

In here: <form action='$row[Hjemmeside]'> which means variable parsing is not working. Change to <form action="<?php echo $row[Hjemmeside]; ?>">

Also in here: <input type='hidden' name='ProduktID' value='$row[AutoID]'>. Change to: <input type='hidden' name='ProduktID' value="<?php echo $row[AutoID]; ?>">

And here: <img src='Billeder/$row[Billed]'></img>. Change to: <img src="Billeder/<?php echo $row[Billed]; ?>"></img>

Also, you can go to the Developer mode in your web browser and do the "Empty cache and hard reload" option to load the new style files. Consider using file versioning. For example:

<link rel="stylesheet" type="text/css" href="Forside.css?v=1.1">
<link rel="stylesheet" type="text/css" href="Standart.css?v=1.1">

edited Mar 13, 2017 at 22:38

answered Mar 13, 2017 at 20:40

Anis Alibegić

3,2603 gold badges16 silver badges32 bronze badges

2 Comments

Jonathan Kuhn Over a year ago

While the quoting bit is generally true, it has nothing to do with the quotes on the HTML output and everything to do with the quotes around the string you are echo'ing out. Not to mention that they don't even have an echo in their code, nor php tags.

Anis Alibegić Over a year ago

You are correct. I missed the most important thing: doing something with the value you get from an array called $row. Thank you.

Collectives™ on Stack Overflow

My css is not loading on php

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related