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.
Related
I have two nearly identical web pages. In fact, I copied the code for the first and saved it as the 2nd before just modifying some of the elements in the 2nd. The styles in the style tag were left exactly the same. They are displaying different font-sizes, and I haven't the foggiest idea why.
Without getting off on tangents about what I should be doing (e.g. using a stylesheet) or nitpicking my code (unless it actually answers the question), can someone please explain why I'm getting two different styles using identical style tags?
P.S. - I know I can fiddle and get them both to have the same style, but it drives me crazy not knowing why this is happening. Believe me, I would have already had them looking the same by now if it weren't for my obsessive desire to understand things I don't understand.
P.S.S. - Adding a meta tag for the viewport, as suggested in an answer to this question, did not work for me.
---DETAILS---
options.php, the desired style, looks like this in mobile Chrome on an LG phone...the screenshots below are from Opera (Chrome) DevTools with device toolbar toggled on with Galaxy S5 being emulated. (These screenshots are exactly what I am seeing on my real device, the LG phone):
admin.php, has noticeably smaller font-sizes. It's hard to see in these screenshots, but the img at the top stays exactly the same size. Also, notice that both screenshots are the same width:
Code for options.php (php renders it):
$admin_str = "<div class=\"a-div\">Admin Options</div>";
$body = "
<div id=\"hero-img\">
<img src=\"imgs/logo.png\">
</div>
<h1>Hi $esc_fName!</h1>
<h2 id=\"subheading\">What would you like to do next?</h2>
<div class=\"a-div\">Record------</div>
<div class=\"a-div\">Manage -----</div>
<div class=\"a-div\">Manage my account information</div>
<div class=\"a-div\">Add a ----</div>
$admin_str
<div class=\"a-div\">Log out</div>
";
echo <<<_END
<!DOCTYPE html>
<html lang="en">
<head>
<title>------- Options</title>
<meta charset='UTF-8'>
<style>
body {
font-family: sans-serif;
font-size: 100%;
}
#main-content {
width: 75%;
margin: 40px auto;
}
#hero-img {
width: 50%;
margin: 50px auto;
}
#subheading {
margin-bottom: 50px;
}
.a-div {
display: block;
margin-top: 20px;
}
a {
font-size: 21pt;
color: #000055;
text-decoration: none;
}
a:hover {
color: blue;
}
a:active {
background-color: #333333;
color: #E70B81;
}
</style>
</head>
<body>
<div id="main-content">
$body
</div>
</body>
</html>
_END;
Code for admin.php (php also renders it):
$body = "
<div id=\"hero-img\">
<img src=\"imgs/dtlogo.png\">
</div>
<h1>Hi $esc_fName!</h1>
<h2 id=\"subheading\">Administrative Options</h2>
<div class=\"a-div\">Add a new approved email</div>
<div class=\"a-div\">Back to main options</div>
<div class=\"a-div\">Log out</div>
";
echo <<<_END
<!DOCTYPE html>
<html lang="en">
<head>
<title>Administrative Options</title>
<meta charset='UTF-8'>
<style>
body {
font-family: sans-serif;
font-size: 100%;
}
#main-content {
width: 75%;
margin: 40px auto;
}
#hero-img {
width: 50%;
margin: 50px auto;
}
#subheading {
margin-bottom: 50px;
}
.a-div {
display: block;
margin-top: 20px;
}
a {
font-size: 21pt;
color: #000055;
text-decoration: none;
}
a:hover {
color: blue;
}
a:active {
background-color: #333333;
color: #E70B81;
}
</style>
</head>
<body>
<div id="main-content">
$body
</div>
</body>
</html>
_END;
UPDATE --Per the request by Donkey Shame, here are the computed font-sizes:
_______________________________
|______| 1st pg. | 2nd pg. |
|______|___________|___________|
| h1 | 40.133px | 32px |
|______|___________|___________|
| h2 | 36.133px | 24px |
|______|___________|___________|
| a | 38.133px | 28px |
|______|___________|___________|
UPDATE #2 --As Dejan suggested, I tried viewing the two sites in desktop mode, and they are the same even when they are not the same when viewed on mobile.
UPDATE #3 --After some tinkering, I got the two pages to have the same style when viewed on mobile. Of course, I never doubted I'd do that, and it still doesn't answer my original question regarding the original code, but it actually might have helped me to narrow it down to a very specific culprit. Here's what I did. I removed the font-size altogether from body. Then I changed the h1 and h2 both to divs. I edited the style tag to reflect those new divs. Then I set font-size: 5vw for the #heading div (the old h1). I set font-size: 3.022727vw (more on that 3.022727 later) for the #subheading div (the old h2). I set font-size: 3.5vw for the a elements. Here's where it gets strange again: If I change the 3.022727vw to 3.022726vw in both style tags, the 1st page has virtually no change (which is what should be expected), but the 2nd page does this (note how the #subheading changes the font-size of the a tags also):
admin.php - #subheading { font-size: 3.022727vw; }
admin.php - #subheading { font-size: 3.022726vw; }
It seems like a user-agent scaling issue. The solution to avoid such problems is to add viewport meta tag inside the <head> section (is it necessary?):
<meta name="viewport" content="width=device-width, initial-scale=1">
Without viewport tag:
Both pages with viewport tag:
I believe the issue is in applying body font-size as 100%. There're two ways of solving the issue: replace font-size: 100%; with font-size: 1rem; or with font-size: 16px; Bootstrap for example uses font-size: 1rem;.
If it doesn't help open Devtools of your browser, open a page with smaller font-size and inspect font sizes of and texts. It might be overwritten by some additional styles.
<style>
body {
font-family: sans-serif;
font-size: 1rem;
}
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 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.
Someone made this piece of code for me and I think there's some unnecessary bits in it.
This is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/> <title>IS THIS THING ON?</title> <link rel="stylesheet"
href="./wp-content/themes/cosmicbuddy/_inc/css/screen.css"
type="text/css" />
</style>
</head> <body>
<a href="<?php bp_send_public_message_link() ?>" class="myButton"><!--
button --></a>
</body> </html>
And this is the CSS file it refers too:
.myButton {
background: url(/wp-content/themes/cosmicbuddy/_inc/images/see.gif) no-repeat;
border: 1;
cursor: pointer;
display: block;
height: 22px;
width: 22px;
margin-left: 5px;
} .myButton:hover {
background: url(/wp-content/themes/cosmicbuddy/_inc/images/too.gif) no-repeat;
}
Now I have two questions:
Can the first piece of code shortened?
How can I create a CSS file that implements settings to more than one of these settings. Just like this one does in my CSS file to links:
#userbar #bp-nav li.current a{
color:#000;
font-weight:bold;
}
#userbar #bp-nav li a:hover {
color: #3193c7; text-decoration: none;
}
1 Can the first piece of code shortened?
If you are so concerned about the size than remove the <!-- button --> html comment.
./wp-content/themes/cosmicbuddy/_inc/css/screen.css
is equivelent to:
wp-content/themes/cosmicbuddy/_inc/css/screen.css
Saving 2 characters :)
As it seems to me in the CSS file you can shorten the path to the images. Instead:
background: url(/wp-content/themes/cosmicbuddy/_inc/images/see.gif) no-repeat;
...
background: url(/wp-content/themes/cosmicbuddy/_inc/images/too.gif) no-repeat;
use relative URLs:
background: url(../images/see.gif) no-repeat;
...
background: url(../images/too.gif) no-repeat;
2 How can I create a CSS file that implements settings to more than one of these settings. Just like this one does in my CSS file to links:
If you don't want to add the CSS class to every element you have to wrap them in some other element
...
</head> <body>
<div class="buttons">
<a href="<?php bp_send_public_message_link() ?>" ></a>
<div class="buttons"><a href="<?php bp_send_public_message_link() ?>" ></a>
<div class="buttons"><a href="<?php bp_send_public_message_link() ?>" ></a>
<div class="buttons"><a href="<?php bp_send_public_message_link() ?>" ></a>
</div>
</body> </html>
And the CSS
.buttons a {
background: url(../images/see.gif) no-repeat;
border: 1;
cursor: pointer;
display: block;
height: 22px;
width: 22px;
margin-left: 5px;
}
.buttons a:hover {
background: url(../images/too.gif) no-repeat;
}
The cursor is usually used if the href attribute is not set.
The css is almost as short as it gets.
Since this is being applied to an a, you could remove cursor: pointer;.
Also, if you are using a background-image, you might not need border: 1;.
The other styles look necessary to render the button, that is height and width and display.
You can also smush it together like your other example:
.myButton {background: url(/wp-content/themes/cosmicbuddy/_inc/images/see.gif) no-repeat; display: block; height: 22px; width: 22px; margin-left: 5px;}
.myButton:hover {background: url(/wp-content/themes/cosmicbuddy/_inc/images/too.gif) no-repeat;}
As for reusing these styles, you can do 1 of 2 things:
add .myButton to other a elements or
add more classes to the rule, e.g., .myButton, .otherClass {//css in here} referencing the .otherClass in another a
The first piece 'of code' is a full html page. If you only need to add the button on a page, this part will do:
<!--button-->
The part between is a comment, that could theoretically still go a well. Remember to add the CSS information to that page's CSS file though!
--
If you'd want more links to show up as a button, you could add the class="myButton" to the A-tag you want changed. If you want multiple classes to change into a button you can add them to the CSS, just as with the other example you've given:
.myButton .myOtherButton { ... }
.myButton:hover .myOtherButton:hover { ... }
My two cents:
Make a single image with both button states(a sprite), then:
.myButton {
background-image: url(/wp-content/themes/cosmicbuddy/_inc/images/see.gif);
display: block;
height: 22px;
width: 22px;
}
.myButton:hover {
background-position: x y;
}
This will also solve the flickring issue when one hovers the link.
Hope this makes sense
You can use HTML5 and omit some optional elements, attributes and closing slashes á la Anne van Kesteren, which would leave you with this:
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>IS THIS THING ON?</title>
<link rel="stylesheet" href="/wp-content/themes/cosmicbuddy/_inc/css/screen.css">
As for the CSS, I can add little to antitoxic and gutierrezalex's comments about using relative URLs and CSS sprites, save that you could also run the final code through a minifier. (Robson's CSS compressor can shave off a few bytes by removing things like whitespace and the final semicolon in a property block.)
I have a few pages which I'd like to have the same background across, so I figured an external style sheet would be the way to go. However, the background changes depending on the time of day, so I had to mix some PHP into the CSS. So now I have a file, background.php:
<html>
<style type="text/css">
body
{
background-image: url('<?php echo (day() == 1 ? 'images/day_sheep.jpg'
: 'images/night_sheep.jpg'); ?>');
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: silver
}
a {text-decoration:none;}
a:link {color:#ff0000;}
a:visited {color:#0000FF;}
a:hover {text-decoration:underline;}
</style>
</html>
Which is being called from two different pages. One page works perfectly fine, but the other page completely broke when I added the line require_once 'background.php', by which I mean nothing displays at all anymore. The offending page is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Penelope's Conquests</title>
<?php require_once 'background.php'; ?>
<style type="text/css">
table {
margin: 10px;
margin-left: 50%;
margin-right: 50%;
padding: 12px;
border: 10px;
text-align: center;
background-color: #fffb40;
border-style: ridge;
border-collapse: separate;
border-color: #9c6ad6;
outline-style: inset;
}
td.cap {
text-transform: capitalize;
font-variant: small-caps;
}
td.str {
font-weight: bolder;
font-size: 1.4em;
}
</style>
</head>
<body>
<h2>To date, Queen Penelope has destroyed:<br /><br /></h2>
<?php
require_once 'victims.php';
require_once 'mysqlSheep.php';
echo '<table border="3"
frame="box"
cellpadding="5">
<caption>Penelope\'s Victims.</caption>
<tr><th>Victim</th><th>Times Zapped</th>';
$hits = mysql_query("
SELECT *
FROM victims
ORDER BY amount
");
if( $hits )
{
while( $row = mysql_fetch_array($hits) )
{
echo '<tr><td class="cap">'.$row['victim'].'</td>
<td>'.$row['amount'].'</td></tr>';
}
}
else
{
echo '<p>' . mysql_error() . '</p>';
}
echo '</tr></table><br /><br />';
echo '<table border="3"
frame="box"
cellpadding="5">
<caption>Button Clicks.</caption>
<tr><th>Hour of day</th><th>Times Clicked</th>';
$time = mysql_query("
SELECT *
FROM time
ORDER BY hits
");
while( $row = mysql_fetch_array($time) )
{
print "<tr><td class='str'>".$row['hour']."</td>";
print "<td>".$row['hits']."</td></tr>";
}
?>
</body>
</html>
Why doesn't the page want to behave with the style sheet?
Another option is to attach your css file with the <link> attribute.
So in your background.php place
<?php
header("Content-type: text/css");
?>
body
{
background-image: url('<?php echo (day() == 1 ? 'images/day_sheep.jpg'
: 'images/night_sheep.jpg'); ?>');
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: silver
}
a {text-decoration:none;}
a:link {color:#ff0000;}
a:visited {color:#0000FF;}
a:hover {text-decoration:underline;}
And then call it using
<link rel="stylesheet" type="text/css" href="background.php" />
Placing this in 1 answer would get messy which is why I've added another one.
You've got an <html> tag inside your PHP stylesheet, which means you will get duplicate <html> tags.. not nice
Remove that and just use the <style> tags..
background.php
<style type="text/css">
body
{
background-image: url('<?php echo (day() == 1 ? 'images/day_sheep.jpg'
: 'images/night_sheep.jpg'); ?>');
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: silver
}
a {text-decoration:none;}
a:link {color:#ff0000;}
a:visited {color:#0000FF;}
a:hover {text-decoration:underline;}
</style>
Ohhh, the issue is that the function day() is defined in a separate file, I forgot to move it over when I was reorganizing the site.
Come on Marko, it was super fantastic script!!! I used your way in order to set custom width inside an external css file and it works great.
I do all php stuff if needed any in here:
<?php
header("Content-type: text/css");
$width= $_COOKIE['scr_width']-10;
?>
then I use the variables below inside the css file like this:
width:<?PHP echo $width."px;";?>
and I have done the include like this:
<head>
<link rel="stylesheet" href="<?PHP echo myLocVars::$mySpacePath."style.php";?>">
</head>
Including CSS can be very tricky because unfortunately it doesn't throw an error (at least I don't know how to..), and it can be a trouble. That's why I give the full path because it is a local CSS included by a local file included itself from index.php.
If you are testing your site on localhost, then try
require_once(dirname(background.php) . "/background.php");
instead of require_once(background.php);