CODEWITHSUNDEEP
phphtmlcss
Mikkel Pedersen
Mikkel Pedersen

Reputation: 3

My css is not loading on php

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

Upvotes: 0

Views: 95

Answers (2)

Anis Alibegić
Anis Alibegić

Reputation: 3230

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">

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42304

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! :)

Upvotes: 1

Related Questions