I cannot figure out how to apply styles to a page I am including as a template. I have the following directory structure:
app
│ index.php
│ styles.css
│
└───include
│ │ mainmenu.php
My INDEX file looks like this
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Learn Algorithm Tracing</title>
<link rel="stylesheet" type="text/css" href="styles.css"</link>
</head>
<body>
<?php
include 'includes/menu.php';
?>
<h1>Welcome</h1>
The CSS works fine in this page and loads OK. However I'm having trouble understanding how to get CSS styles to apply to my mainmenu.php file. At the moment it looks like this.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../styles.css"/>
</head>
<body>
<p class="menuitem">HOME</p>
<p class="menuitem">I KNOW</p>
<p class="menuitem">I WANT</p>
<p class="menuitem">I GOT</p>
</body>
</html>
I added ..\ as the styles for this are stored in the main CSS file which is in the parent directory. However, it doesn't apply the menuitem style here. I've tried every combination I can think of but how do I go about it? How do I apply the styles in the main stylesheet to my mainmenu.php page when it's been included in index.php
EDIT:
Interestingly, when I include one of the styles already used in the index page it works fine, but for some reason it doesn't like the menuitem style. Here is the CSS
body{
width: 80%;
margin-left: auto;
margin-right: auto;
}
h1 {
font-family: "Verdana", sans-serif;
}
.maintext {
font-family: "Arial", sans-serif;
}
.entryprompt{
width: 50px;
}
.menuitem{
font-family: "Arial Narrow", sans-serif;
font-size: 16pt;
width: 30px;
margin: 10px;
}
try using ../styles.css instead of \..\styles.css and close the
<link rel="stylesheet" type="text/css" href="../styles.css" />
You are using bad slash in html link tag change \ to this / so CSS import will look like this.
<link rel="stylesheet" type="text/css" href="../styles.css"/>
Update:
When you include some file then you should use path from the file you are including it to. Try this.
<link rel="stylesheet" type="text/css" href="styles.css"/>
Related
Php code
i searched on the web and i didnt see anything about this it looks like no error css status is 200
css code is at the bottom.
.sagalt {
margin-top: 500px
}
<html>
<head>
<meta charset="utf-8">
<title>quantum</title>
<link rel="shortcut icon" href="logo.png" type="image/png">
<link rel="stylesheet" href="qntm.css?v=<?php echo time(); ?>">
<!--link//-->
</head>
<body>
<div>
Sign Out
</div>
</body>
</html>
Think you are trying to apply CSS to the link. Anchor tag being an inline element, margin top/bottom property alone wont have an effect in it as inline elements flow with content on the page. Use display: inline-block or display: flex or float: left as per your requirement.
.sagalt {
color: red;
margin-top: 100px;
display: inline-block;
}
<html>
<head>
<meta charset="utf-8">
<title>quantum</title>
<link rel="shortcut icon" href="logo.png" type="image/png">
<link rel="stylesheet" href="qntm.css?v=<?php echo time(); ?>">
<!--link//-->
</head>
<body>
<div>
Sign Out
</div>
</body>
</html>
Sorry if I sound like an idiot, but I'm relatively new to php.
Basically, I want to have a navbar that is synced across all the pages of my website.
What I have so far is this:
navbar.php
<?php
echo '<link rel="stylesheet" type="text/css" href="style.css"> -
<ul> -
<li><div id="nav"><span id="middle">Home</span></div> -
<li><div id="nav"><span id="middle">Art</span></div></li> -
<li><div id="nav"><span id="middle">Games</span></div></li> -
<li><div id="nav"><span id="middle">Wish List</span></div></li> -
<li><div id="nav"><span id="middle">Doctor Who</span></div></li> -
</ul>';
?>
index.html
<!DOCTYPE html>
<html>
<head>
<title>Colin Site</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
p {
font-size: 150%;
}
</style>
</head>
<body>
<div class="navcontain">
<?php include "nav.php"; ?>
</div>
<br>
<br>
<br>
<h2>Welcome to my website, where I do random things</h2>
</body>
</html>
style.css
#navbar {
width: 100%;
}
#nav {
background-color: #848482;
width: 110px;
height: 40px;
text-align: center;
font-size: 100%;
color: white;
}
#navcontain {
position: relative;
top: 1%;
background-color: alpha;
width: 100%;
}
When I go to my website, there's just a blank space where my navbar should be.
Thanks in advance
You can't execute PHP code in a HTML file. Look at the extension of the file where you're including the navbar.php it's .html right? It's wrong then. In order to make it works rename it to index.php.
You have <?php include "nav.php"; ?> in your HTML, but according to your question the file is named navbar.php....
(yes, and your main file has to have a php ending, as #ReynierPM wrote)
It is not possible using php in a html file, though you can use AJAX / JQuery to load the php into the webpage, heres an axample
index.html
<html>
<head>
<script src="jquery.js"></script> <!-- You can get JQuery at http://jquery.com -->
</head>
<body>
<script>
$(document).ready(function(){
$.ajaxSetup({cache:false});
$("#nav").load("nav.php");
});
</script>
<div id="nav"></div>
</body>
</html>
I'm making a personal website and my CSS background-image doesn't seem to be working. Link to the site is http://distorts.me/new/ it seems that it doesn't find the image because it doesn't load, it is just a white area. (Sorry for the improper punctuation not very literate ) I'm using chrome.
style.css
body {
background-image: url("http://distorts.me/new/includes/background.png");
color: #C0C0C0;
}
.navbar {
margin-bottom: 0;
border-radius: 0;
}
.row.content {height: 450px}
.sidenav {
padding-top: 20px;
background-color: #808080;
height: 100%;
font-size: 20px;
}
a {
color: #C0C0C0;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #404040;
}
footer {
background-color: #555;
color: white;
padding: 15px;
}
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
index.php
<html lang="en">
<!-- George M. -->
<!-- 2/26/16 -->
<?php
include 'includes/head.php';
?>
<body oncontextmenu="return false" background="includes/background.png">
<header class="container-fluid text-center" style="background-color: #404040;">
<h1>George M. - Welcome</h1>
</header>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 sidenav" style="height: 183%">
<p>Home</p>
<p>About Me</p>
<p>Services</p>
<p>Contact</p>
</div>
<div class="col-sm-8 text-middle">
<h1>Welcome</h1>
<p>test</p>
<hr>
<h3>Test</h3>
<p>test</p>
</div>
</div>
</div>
<footer id="foot" class="container-fluid text-center">
</footer>
<script type="text/javascript">
document.getElementById('foot').innerHTML =
"<p>© " + new Date().getFullYear() + " Distorts | George M. All rights reserved. <span style='color: #808070;'>Made by George M.</span>"
</script>
</body>
</html>
head.php
<head>
<title>George M | Home</title>
<link rel="shortcut icon" href="/favicon.ico">
<meta name="author" content="Distorts">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
</head>
When the code is right, the most likely problem to be causing issues is caching. Some web hosting servers have caching preconfiguration and since you are using PHP, you can simply send PHP headers that prevent caching - add these lines at the very top of your header.php:
<?php
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?>
Another trick which can be used is timestamping / querystring - this approach basically forces the browser to reload the file since its URL is different than what it previously loaded. So naturally, we add the time variable (because time is always changing). Other developers use this method by adding a version query but that requires more maintenance.
Adding file timestamp with PHP:
<link rel="stylesheet" type="text/css" href="style.css?t=<?php echo date('YmdHis');">
Output
<link rel="stylesheet" type="text/css" href="style.css?t=20160227182425">
File version example
<link rel="stylesheet" type="text/css" href="style.css?v=2.1">
Also, keep in mind that CSS background paths are relative to the CSS file itself, not HTML document. Links in html are relative to html document, links in CSS are relative to CSS file. So the correct way to reference your image is by the following:
background-image: url("includes/background.png");
Try changing your background url to background src :
background-image: src ("http://distorts.me/new/includes/background.png");
Working fine on Chrome. Try changing your background url to:
background-image: src("/includes/background.png");
And place that image to that server rather than giving full path.
I have a filepath problem after the creation of a .htaccess protected admin directory.
Here is the structure of the folder:
file-controller4.php was initially at the root of the directory next to file-controller3.php and file-view4.php was in the view directory.
To call the header.php from file-controller4.php I use set_include_path.
The problem is that the header doesn't call the css file anymore which seems to be relative to the admin directory.
Here are the different files:
Admin folder:
file-controller4.php
<?php
set_include_path ( 'E:/xampp/htdocs/url/' );
include '/view/header.php';
include '/admin/file-view4.php';
file-view4.php
<h1>This is a title</h1>
Root folder:
file-controller3.php
<?php
include '/view/header.php';
include '/view/file-view3.php';
view folder:
file-view3.php
<h1>This is a title</h1>
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<!--<meta charset="utf-8"></meta>-->
<meta http-equiv="Content-Type" content="text/html;" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<title>A TEST</title>
<link rel="stylesheet" type="text/css" href="css/css-example.css" ></link>
</head>
css folder:
css-example.css
html, body {
margin: 0;
padding: 0;
}
body {
background-color: white;
font-family: Verdana, sans-serif;
font-size: 100%;
}
h1 {
font-size: 200%;
color: navy;
text-align: center;
}
How could I load the CSS from file-controller4 like it does correctly with the file-controller3 ?
Thanks for your help.
You can check in header.php REQUEST_URI and detect where is script - in main folder or in admin. And then build url for CSS.
Like
<?php
if (strpos($_SERVER["REQUEST_URI"], "admin") !== false) {
$css_prefix = "../";
} else {
$css_prefix = "";
}
?>
<link rel="stylesheet" type="text/css" href="<?php echo($css_prefix); ?>css/css-example.css" ></link>
But best and correct way is change logic of your application and move file-controller3.php inside folder admin
I have created PHP files which accept data from $_GET method.
After that I use all the data I get to create HTML pages. Nothing is wrong with the data but in CSS I cannot style HTML elements. Except when it comes to inline styling, that works but it is not good to maintain.
I try to use like this but it doesn't work , Please Help
THANK IN ADVANCE
Example.php
<?php
$dataCover = $_GET['dataCover'];
$dataTitle = $_GET['dataTitle'];
$dataTag = $_GET['dataTag'];
$dataDir = $_GET['dataDir'];
$dataYear = $_GET['dataYear'];
$dataCreated = $_GET['dataCreated'];
$dataModified = $_GET['dataModified'];
$userAUID = $_GET['userAUID'];
$galleryID = $_GET['galleryID'];
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" media="all">
#container img{
height: 230px;
width: 200px;
}
#container .center{
display: block;
margin: 0 auto;
}
</style>
<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/jquery.mobile-1.3.1.min.js"></script>
<script src="../lib/se.js"></script>
</head>
<body>
<div data-role ="page" id ="page1">
<div data-role ="header">
<h1> header </h1>
</div>
<div data-role="content">
<div id="container">
<img class="center" src="<?echo $dataCover?>" alt=""/>
<p id="title"><?echo $dataTitle;?></p>
<p id="tag"><?echo $dataTag;?></p>
<p id="created">Created : <?echo $dataCreated?></p>
<p id="modified">modified : <?echo $dataModified?></p>
View Ebook-Gallery
Bookmark
</div>
</div>
</div>
</body>
</html>
When you move your css from inline to style sheet file, you have to refresh your page with Ctrl+F5. Maybe it's coming from the cache.
Also you can assign your css to the image by jquery.
I dont see any reference to any external stylesheet, so it seems like you have forgotten to do this.
Put this line
<link rel="stylesheet" type="text/css" href="/css/style.css" />
Somewhere in the head. Maybe before the script tags.
Make sure you adjust the path to your stylesheet.
Yes When you want to apply external css you have to give the path after the <title> tags within the <head> tags .just follow the html code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--Here css is the folder name where you have keep the style.css file -->
<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/jquery.mobile-1.3.1.min.js"></script>
<script src="../lib/se.js"></script>
</head>