I have this index.php file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
</style>
</head>
<body>
<div id="container">
<?php include('includes/header.php');?>
<?php include('includes/sidebar.php');?>
<?php include('includes/content.php');?>
<?php include('includes/footer.php');?>
</body>
</html>
and these including files.
header.php
<div id="header">
<img src="banner.jpg">
</div>
sidebar.php
<div id="sidebar">
Home<br />
Study<br />
Calendar<br />
Diary
</div>
footer.php
<div id="footer">
<p>haha</p>
</div>
and I have this css file.
#container{
margin:0px 0px 0px 0px;
width:1024px;
border:3px;
}
#header{
margin-left:50px;
border:3px;
}
#sidebar{
margin-left:30px;
float:left;
width:300px;
height:900px;
border:3px;
}
#sidebar a:link{
color : #ff6c00;
text-decoration : none;
}
#sidebar a:visited{
color : #ff6c00;
text-decoration : none;
}
#sidebar a:hover{
color : #00991d;
text-decoration : underline;
}
#content{
margin-left:30px;
float:left;
width:724px;
height:900px;
border:3px;
}
#footer{
border:3px;
text-align:center;
clear:both;
width:1024px;
}
The setting about the link on the sidebar is working properly. However, I change some margin and border so that I can check whether it's working or not, and it's not working. I refreshed the site and nothing new show up.
Could you help me figure out why this is happening?
First of all, you should try out changes in css, with some sort of development tools, and not with refresh (for obvious cache problems, and because you try out the setting before you commit them).
Examples for such tools are the chrome development tools for Chrome or Firebug for Mozilla.
Meanwhile, you can try refreshing with ctrl+R or some other 'hard refresh' method (browser dependent).
Last, but not least, you should also check if you actually managed to upload the eltered files to the server, and no error occurred during the process. Sometimes the ftp connection to a server breaks and the program fails to upload the file.
Related
I can't understand why my css file is not working whenever I make some changes in it. The codes that I entered before are working properly but whenever I change the code it doesn't shows up.
<?php
session_start();
?>
<?php
include "dbt_connect.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Movies&Stuff</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="FontAwesome/css/fontawesome-all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
<style>
#footer{
width: 100%;
height: 100px;
margin-bottom: 0px;
background-color: gray;
text-align: center;
color: white;
}
#footer pre{
padding-top: 50px;
font-size: 16px;
}
#footer a{
color: white;
text-decoration: none;
}
</style>
<script type='text/javascript' src='//platform-api.sharethis.com/js/sharethis.js#property=5b0ae82b461c9500119099e0&product=sticky-share-buttons' async='async'></script>
</head>
<body>
<header id="top_header" style="margin-top: 20px">
<div class="clear">
<h1 id="logo">Movies<span id="and">&</span>Stuff</h1>
<nav id="main_nav">
<?php
if (isset($_SESSION['user_id'])) {
echo '
<i class="fa fa-bars"></i>
Movies
TV Series
About Us
Contact Us
<form action="Includes/logout.inc.php" method="POST" style="float:right; margin-right:1em; border:none;">
<button type="submit" name="submit" style="background-color:black; border:none; color: #A5A5A5FF; font-size:17px;outline-style:none;">Logout</button>
</form>';
}else{
echo '
<i class="fa fa-bars"></i>
Movies
TV Series
About Us
Contact Us
<span class="login" style="margin-right: -1em;">Login</span> | <span class="signup">Signup</span>';
}
?>
</nav></div>
This is my php file code, I added a bar in the menu using font awesome and made it to display none in my css external file, but it just shows up. I can't understand why my css file is not working on my any other php files. I'm running it on localhost. I tried restarting it but nothing found.
*{
margin:0 auto;
}
body{
font-family: sans-serif;
background-color: black;
color:#A8A8A8FF;
}
h1 h2 h3 h4 h5 h6{
font-weight: 500;
}
.clear{
clear: both;
}
#top_header{
height: 150px;
}
.menu{
display: none;
}
#logo{
float:left;
padding: 20px;
text-transform: uppercase;
color: white;
}
#and{
font-weight: normal;
}
#main_nav{
float: right;
padding: 30px;
#main_nav a{
color: #A5A5A5FF;
margin-right: 1em;
text-decoration: none;
}
.search{
display: inline-flex;
font-size: 20px;
width: 97%;
}
.searchterm{
width: 97%;
font-size: inherit;
border: 0.1em solid #6D6D6DFF;
border-radius: 0.5em 0 0 0.5em;
padding:0.2em 0.5em;
margin-left: 20px;
outline-style: none;
transition: 1s all;
}
.search-btn{
font-size: inherit;
border: 0.1em solid #6D6D6DFF;
border-radius: 0 0.5em 0.5em 0;
cursor: pointer;
outline-style: none;
width: 100px;
}
.search-btn i{
color: #6B6B6BFF;
}
.searchterm:focus{
border:0.1em solid #C6C6C6FF;
}
This is my external css code, I've added display:none for the class menu under the top header but I'm still getting nothing. This problem occurred me last time when I was making footer but it didn't worked so I did it in the internal css. please help me sort out this thing.
Cache issue.
Try changing
<link rel="stylesheet" href="index.css">
to
<link rel="stylesheet" href="index.css?v=<?php echo time(); ?>">
This will force the CSS to reload.
So I had this problem that my CSS code was working fine but when I deleted or added something it did not change on the site and I found a pretty easy solution for this that worked for me:
Just press: Ctrl + F5
This is called a "hard refresh" it worked for me on Windows, and with Chrome browser, if you use something else try this site: link
This is a little bit old question but I got the same problem now and I figured maybe I can help someone.
its probably a cache issue, just delete all browsing data's, history, cache, cookies, e.t.c and then close the browser and open again, it should fix the problem as it fixed mine.
But the best way to actually fix this problem is by calling the css file with php. i recommend calling your css stylesheet with php because, if your website is online , you can't tell all your users to delete their browsing data every time you apply a change on the website
its very simple, first you write the style tag then call the css file with php.
<style>
<?php include "style.css" ?>
</style>
The problem : My browser can't access my modified CSS file
The reason : My browser have cache this file (browser already have this file, he will not ask again for it).
Solution 1 - on development environment
Refresh the cache of your browser (on firefox and Chrome ctrl+maj+R). But you can't do that on production (you can't control the browsers of your clients)
Solution 2 - on production environment
Change the path of your file when you update them. The best way seems to add an argument like below
<link rel="stylesheet" href="index.css?v=1">
And change it on every production modification
<link rel="stylesheet" href="index.css?v=2">
You could use a variable instead making the changing easy for multiple files changes. But remember each time you modify the path of your CSS, all of your client will ask again for this resource. For example, don't use time() as value or it will cancel any caching of your website's clients (increase server charge).
It will apply the same on JS files and any other resource than can be cache by browser.
For me solved this:
Before: <link rel="stylesheet" href="/css/style.css">
After: <link rel="stylesheet" href="css/style.css"> //Removed slash before css folder.
I faced the same problem when I was making my first Php project. I used relative paths and changed the CSS file by making new file and linking that new file in index.php file. This Worked for me.
<link href="./styles.css" rel="stylesheet">
Similar to #Varinderjit Kaur's answer, I had placed my css files in a sibling directory with a relative path (e.g. ../css/styles.css). This directory was unreachable by the client browser and thus could not be displayed. Moving the css/ directory under the webroot (or html) directory instead of beside id made it resolvable by the client browser. Additionally, the link then used an absolute path instead of a relative path (e.g. <link rel="stylesheet" type="text/css" href="/css/styles.css">).
The cache was definitely the issue with me. If you use Chrome as your browser, in Chrome developer tools settings, choose Disable Cache (While DevTools is open) under the Network section.
using Ctrl + f5 will update the css easily
const raq = document.querySelector("#raquette");
const ball = document.querySelector("#ball");
const sc = document.querySelector("#score");
const go = document.querySelector("#gameover");
const ta = document.querySelector("#tryagain");
let score = 1;
let by = 0;
let rx = 0;
function bar_move (e){
console.log(e) ;
if(e.key == "ArrowRight"){
rx+=10;
raq.style.left = rx + "px";
if(raq.style.left == "600px"){
raq.style.left = "0px";
rx = 0;
}
}
else if(e.key == "ArrowLeft"){
rx-=10;
raq.style.left = rx + "px";
if(raq.style.left == "-60px"){
raq.style.left = "540px";
rx = 540;
}
}
}
document.addEventListener('keydown',bar_move)
const randomLocalisation = () => {
return Math.random()*550;
}
let bx = randomLocalisation();
function ball_move(e){
by+=10
ball.style.left = bx + "px"
ball.style.top = by + "px"
if(ball.style.top == "550px"){
clearInterval(mball)
ball.style.display = "none"
raq.style.display = "none"
sc.style.display = "none"
go.style.display = "block"
ta.style.display = "block"
}
else if(ball.style.top == "540px" && bx<(rx+60) && bx>(rx-60)){
ball.style.top = 0 + "px"
sc.textContent = score
score +=1
by = 0;
bx = randomLocalisation();
}
}
const mball = setInterval(ball_move, 100)
const trya = (e) => {
go.style.display = "none"
ta.style.display = "none"
ball.style.display = "block"
sc.style.display = "block"
raq.style.display = "block"
score = 0
by = 0
mball = setInterval(ball_move, 100)
}
ta.addEventListener('click', trya)
<!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.0">
<title>Login</title>
</head>
<body>
<form method="POST">
username: <input type="text" name="username"><br>
password: <input type="password" name="password"><br>
<input type="Submit" name="Submit" value="Log in">
</form>
<?php
require_once "users0.php" ;
session_start() ;
if(isset($_POST['Submit'])){
$u = $_POST['username'] ;
$pw = $_POST['password'] ;
if($data[$u] == $u && $data[$u] == $pw){
header('location:../index.php') ;
exit();
}
else
echo "invalid Password/Username !" ;
}
?>
</body>
</html>
I have faced the similar problem, my solution is change the name of your css file, for example your previous css file name is index.css, change it into newindex.css, and don't forget to edit the name of your css file in your html too. I hope it will work, It worked for me.
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 © W3Schools.com</footer>
</body>
</html>
It should look like this, but when i load the css is gone.
please help
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! :)
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">
Alright, so this is my HTML right now.
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>GeoVillage - A Community</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id=header>
<img id=logo src="/logo.png" alt="GeoVillage Community" style="width:500px;height:128px;">
<span id=logreg>
<?php
if(isset($_SESSION['loggedon']) && $_SESSION['loggedon'] == true){
echo '<a href=/logout>
<img id=logout src="/logout.png" alt="Logout">
</a>';
} else {
echo '<a href=/login>
<img id=login src="/login.png" alt="Login">
</a>';
echo '<a href=/login/register.php>
<img id=register src="/register.png" alt="Register">
</a>';
}
?>
</span>
</div>
<ul>
<li>FSX/X-P/P3D Vatsim Online Material</li>
<li>Development Page</li>
</ul>
<?php
echo($_SESSION["loggedon"]);
?>
</body>
</html>
And this is my CSS file.
body{
background-color: #33ccff;
margin: 0px;
}
#header{
display:inline;
Right now, the Login and Register buttons are at the top, but aligned essentialy with the bottom of the banner. How would i position it so it would be aligned with the top of the banner?
Try this
#logreg {vertical-align: top;display: inline-block;}
METHOD 1
This makes the width of your header wider, to allow the login / register buttons to fit within the header container. The #logoreg CSS then adds a margin to the top of the login / register button container, which centers it with the logo when the right px amount is specified.
CSS:
#header {
display: block;
width: 105%;
}
#logreg {
float: right;
margin-top: 15px;
}
METHOD 2
Change the width of your banner image.
<img id="logo" src="/logo.png" alt="GeoVillage Community" style="width: 700px;height:96px;">
Then put this in your CSS:
#logreg {
margin-top: 15px;
float: right;
display: inline-block;
}
I have a problem converting an HTML file to pdf, when trying to add a footer, the size rendered as PDF is not the one specified in the css.
The size of the footer must be exactly 155mm, but if I tell wkhtml2pdf to have a bottom border of 155mm, the footer starts almost at half of the page.
I have tried with a simpler html page of 50mm with 5 stripes of 10mm each, and with the switch -B 50mm I have a margin below the actual footer of 50mm
The command that I am running is: wkhtmltopdf.exe -B 150mm -L 0 -R 0 -T 0 --footer-html footer.html page.html page.pdf
To have the footer placed correctly, I have to use -B 119mm
Can someone help me or point me to the right direction ? I read many posts about that but could not solve my problem, it seems that windows installation act differently from Linux one, but I will only install it on windows host, so no problem about a windows-only solution
page.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Header</title>
<link rel="stylesheet" href="css/normalize.css?v=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
coucou
</body>
</html>
footer.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Footer</title>
<link rel="stylesheet" href="css/normalize.css?v=1.0" media="all">
<link rel="stylesheet" href="css/footer.css?v=1.0" media="all">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="bvr">
<div class="bvr-cut">
<div class="payment-recipient">
blahblah
</div>
<div class="payment-account">01-88205-8</div>
<div class="payment-amount">
<span class="val">3</span>
<span class="val">2 5</span>
</div>
<div class="payment-sender">
blahblah
</div>
</div>
<div class="bvr-cut">
<div class="payment-recipient">
blahblah
</div>
<div class="payment-account">01-88205-8</div>
<div class="payment-amount">
<span class="val">3</span>
<span class="val">2 5</span>
</div>
<div class="payment-sender">
blahblah
</div>
</div>
<div class="bvr-code">
<div class="col c12">
blahblah
</div>
</div>
</div>
</body>
</html>
footer.css
#charset "UTF-8";
#bvr {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
background: #FC0;
font-family: "Helvetica-Neue", Helvetica, sans-serif;
height:155mm;
page-break-after: auto;
display: block;
clear: both;
border: 1px solid #000;
}
.bvr-cut {
float:left;
width: 230px;
background: #ccc;
}
.payment-recipient {
height: 72px;
position: relative;
background: #0cf;
}
.payment-account {
text-align: right;
font-weight: 600;
padding-right: 4.5em;
margin-bottom: .6em;
background: #12F;
}
.payment-amount {
background: #FCC;
text-align: right;
margin-bottom: .8em;
}
.payment-amount > span.val {
border: 1px solid #000;
padding-right: 2em;
}
.payment-sender {
position: relative;
background: #f0c;
}
.bvr-ref {
display: block;
background: #FF0;
}
.bvr-code {
background: #c0f;
}
After searching, I found out that the problem didn't come from wkhtmltopdf but to a processed size issue in windows systems.
If I run that code on unix based systems everything works great, but on windows it doesn't. In fact, font size (and any other size: height, width, etc.) in windows must be scaled with a 1.33 ratio in order to render exactly the same as it does in unix.
I couldn't find a link in english, but here a little explaination which worked great for me (search "1.33") in the webpage.
Basically, I created two classes in my css:
html: { font-size: 93.1%; }
body: { height: 88mm; }
/*–––––––––––––––––––––––– system hacks –––––––––––––––––––––––– */
/**
* Unix* system based servers render font much
* bigger than windows based server.
* Force windows font to 100% and rescale the
* linux rendering by the magic factor (1.33)
*/
.linux {
font-size: 70%;
}
/**
* base size: 88mm
*
* for wkhtmltopdf generation,
* body size must be multiplied by 1.33 factor on windows systems
*/
.win body {
height: 117.04mm;
}
And with a bit of php, I've added dynamically the class to the <html> tag based on server system.
I'm currently working on a homepage using the Laravel PHP Framework and I'm running into CSS issues. I'm trying to accomplish a simple task of having two things in my 'header' tag,
1) An image of a logo on the left
2) A container to the right of the logo displaying a user's information
The logo is positioned fine on the left but when I try to position the container to the right of it, it is being positioned underneath the logo instead. I know my CSS is good unless I'm overlooking something entirely but I have a feeling that the Larevel Blade Templating is having an effect in how 'div' elements are being handled.
CSS(style.css):
body {
background:linear-gradient(#3C5D79, #2E4253) no-repeat;
color:white;
}
.container {
width:100%;
}
.header_container {
width:960px;
}
.main_logo_container {
width:313px;
margin:0 170px;
position:relative;
}
.admin_container {
display:inline-block;
float:left;
width:600px;
margin:5px 5px;
position:relative;
}
#extends ('layouts.default')
Admin View after user logs in (admin_index.blade.php):
#section('content')
<header>
<div class="header_container">
<div class="main_logo_container">
<img src="../images/logo.png" width="300" height="97" alt="Company Logo" />
<div class="admin_container">
<b> You have reach the admin page!</b>
</div>
</div>
</div>
</header>
#stop
layouts.default.blade.php(Main Blade Template):
<!doctype html>
<html>
<head>
<meta charset ="utf-8">
<link rel="stylesheet" href=" <?php echo asset('css/style.css')?>" type="text/css">
<style>.flash { padding: 1em; border: 1px dotted black; } </style>
</head>
<body>
#if (Session::get('flash_message'))
<div class="flash">
{{ Session::get('flash_message') }}
</div>
#endif
<div class="container">
#yield('content')
</div>
</body>
</html>
Any help is greatly appreciated since I'm trying to become more familiar with Laravel PHP.
Your logo container was too small because according to your DOM it also carries your text which is 600px wide for a 313px wide container hence the split on two separate lines.
I suggest you change your CSS to fix this and also remove the float: left directive. The display: inline-block here will be more efficient.
Therefore you will get this following CSS:
body {
background:linear-gradient(#3C5D79, #2E4253) no-repeat;
color:white;
}
.header_container {
width:960px;
}
.main_logo_container {
width: 100%;
}
.main_logo_container img {
display: inline-block;
}
.admin_container {
display: inline-block;
margin-left: 5px;
position:relative;
top: -40px;
}
And here is a demo to show you the working result:
http://jsfiddle.net/w7wqaw9L/