I am using PHP to check a form. If the content is not filled in the PHP will echo an error message. I want that text to be effected by my style sheet. It is not. The CSS effects the rest of the page, just not that error text. I tried adding the span and class in with the echo and I tried adding the span and class to the html and just echo the text. No effect.
the HTML
<meta charset="utf-8">
<link rel="stylesheet" href="run.css" type="text/css">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
the PHP
<span class="errormsg2">
<?php
if(isset($notset)){
echo $notset;
}
?>
</span>
and the CSS
.pushme:hover{
background-color: #eb5300;
color: black;
text-shadow: none;
}
.errormsg2{
text-align: center;
color: red;
font-weight: bold;
}
The PHP example I provided was from my attempt to put the span and class into the HTML and just echo out the text content.
I believe that the problem is that your file extension should be filename.php instead of filename.html
and because php is a server side language you will have to run your code in a localhost mode to see the change.
if you try to run php code in a filename.html the browser will comment your your php code.
// filename.php file, this will work for you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
<style>
.errormsg2{
text-align: center;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<span class="errormsg2">
<?php
$notset = "test";
if(isset($notset)){
echo $notset;
}
?>
</span>
</body>
</html>
Related
I am still kind of new to HTML and CSS, so I wanted to ask if this is a good way to make my footer always stick to the bottom without overlapping with anything. I also included some PHP to make my work easier and just require the header and footer on each webpage.
Here is what I have:
index.php
<!DOCTYPE html>
<html>
<head>
<title>Начало - Гравиране Провадия</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<?php
require_once 'requires/header.html';
?>
SAMPLE CONTENT, blah blah.
<?php
require_once 'requires/footer.html';
?>
</body>
</html>
footer.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
footer {
background: #A6FF46;
font-family: 'Roboto';
text-align: center;
padding: 0.5rem;
margin-top: auto;
}
</style>
</head>
<body>
<footer>
Copyright © 2022, Gravirane Provadia. All rights reserved.
</footer>
</body>
</html>
Did you try position: fixed;? That creates it so that the element will always 'stick' to the position you set it to using left: position;,bottom: position;,etc.
I am trying to include an external css into my PHP file:
<head>
<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
my CSS File:
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
display: block;
margin-top:50px;
}
body {
font: 20px Montserrat, sans-serif;
line-height: 1.8;
overflow-y:hidden;
}
.container-fluid {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAWklEQVQoU2P8P5PhPwMDAwNjOgMjiMYFGIlWiM2E1oMvwbZU24vDbUFYN/P/f4Z0RjAfv0J8DgT5AUM3ksnIejEV4jAZa5B8mhkH9gxf+iIsnkEyiWiF2GwHAGuiJAtmjT1hAAAAAElFTkSuQmCC);
repeat;
position: relative;
padding-bottom: 70px;
}
p{
}
.btn-success {
background-color: #85C1E9;
border:0;
}
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.bg-2 {
background-color: #474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff; /* White */
color: #555555;
}
.navbar {
padding-top: 0px;
padding-bottom: 0px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 15px;
letter-spacing: 4px;
}
col-sm-4:hover {
color:#85C1E9;
}
.navbar-nav li a:hover {
color: #85C1E9 !important;
}
.helper {
margin:auto;
padding-top: 50px;
}
.col-sm-4:hover {
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJklEQVQYV2OMq7zlw4ADMIIkF7WrbUGX/3+G4f+ASS4MVtuMzcEAiGEnwSwsT0sAAAAASUVORK5CYII=")
repeat;
}
The stylesheet is obviously used, but the plaintext is also seen in the PHP file. If tried adding type or leave it away, href as /css/base.css and without leading /, but somehow I won't get rid of the plain text in my file. Any Idea whats causing it?
The PHP File:
<html>
<head>
<title>Awesome Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/my.js"></script>
<script>
...
</script>
<header id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
...
</head>
</header>
<body>
..
</body>
EDIT:
Found the error, there was a sneaky include(css/base.css)
I tried to validate your css using the W3 Css validator and it told me there's a parse error in your css. Namely you're closing the background-image: with a semicolon while on the line below theres a repeat;. This is a syntax error, and I think because it can't parse the css, it's just displayed as plain text.
You should know if you want to give styles to php output commands, like echo or print you have to type all of your html codes .
And type your php codes middle of body tags in HTML format . Like this :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<?php
$text = "Hello World !";
echo "<p>" . $text . "</p>";
?>
</body>
</html>
But another problem that your code has is you typed a header tag inside head tags and close it after head closing tag and this will break the html programming grammar .
i recently debugged all the errors on the connection of my headers css and js, there are no errors anymore, but css still isnt working. but the format of my view is changed, but not as i wanted.
login.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Login extends CI_Controller {
public function index(){
$data['main_content'] = 'login_view';
$this->load->view('includes/viewtemplates',$data);
}
viewTemplates.php
<?php $this->load->view('includes/header'); ?>
<?php $this->load->view($main_content); ?>
<?php $this->load->view('includes/footer'); ?>
header.php
<!--DOCTYPE html-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Login</title>
<link rel="stylesheet" href="<?php echo base_url();?>public/css/bootstrap-responsive.min.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="<?php echo base_url();?>public/css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="<?php echo base_url();?>public/js/jquery.js"></script>
<script src="<?php echo base_url();?>public/js/bootstrap.js"></script>
</head>
<body>
<header>
</header>
bootstrap-responsive.min.css
body {
background: #F0F0F0 ;
margin: 0;
padding: 0;
font-family: 'times-new roman';
}
#login_form {
width: 300px;
background: 3333FF;
border: 1px solid white;
margin: 100px auto 0;
padding: 1em;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
h1, h2, h3, h4, h5 {
margin-top = 0;
text-align: center;
color: 000033;
text-shadow: 0 1px 0;
}
Make sure you have to loaded the URL Helper Class in your controller or in autoload.php because to use base_url() (shorthand) you need to load URL Helper
$this->load->helper('url');
Than you can use shorthand base_url():
<?php echo base_url();?>
And i didn't see the URL helper loaded in your controller.
Also check HTML view source and hit the URL you will get the better understanding.
You can also check either ending slash / available in base_url() or not
This will also not work, if your URL looks like this:
<script src="<?php echo base_url();?>public/js/jquery.js"></script>
// example.compublic/js...
there is a problem in website images it will not load correctly
you can use base tag for this(you need to add <base> tag in <head>) ...
<base href="<?php echo base_url();?>public/">
and make sure image floder is in public directory
I am using css to break the content as required to be printed in fresh pdf page, I want to include the header/footer on each pdf page, I tried with fixed css/ along with margin but that works for first page not the successive page. The footer is getting overlapped with page content..
mypage.php
<?php //call_db
//call_func
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Print Page</title>
<style>
body {
background-color: white;
color: black;
font-size: small;
font-family: sans-serif, helvetica, tahoma, arial;
margin: 20%;
}
.page-break {
display:block;
page-break-before:always;
}
#media screen {
div.divFooter {
display: none;
}
div.divHeader {
display: none;
}
}
#media print {
div.divFooter {
position: fixed;
bottom: 0;
}
div.divHeader {
position: fixed;
top: 0;
}
}
</style>
<script type="text/javascript" src="jquery.js" > </script>
<script type="text/javascript">
$(document).ready(function(){
window.print();
});
</script>
</head>
<body>
//call sql query for content // A collection of 200 lists
<div class="divHeader"> <h1 align="center" style="font-size:36px;"> THE GAME OF THORNES</h1> </div>
<h1>Sean's CSS Print vs. Screen Example</h1>
<h2>Lesson 1</h2>
<p>This is my first Page in the document.</p>
<div class="page-break"></div>
<h2>Lesson 2</h2>
<p>Examples and theory of lesson2</p>
<div class="page-break"></div>
<h2>Lesson 3</h2>
<p>Examples and theory of lesson2</p>
<div class="divFooter">UNCLASSIFIED </div>
</body>
</html>
** I am adding PHP tag as if you have any other better way to print the content from db, please suggest.
I think this is duplicate of this Convert HTML + CSS to PDF with PHP? ,
you must use your pdf convertor library to add header and footer to pdf.
I'm used http://www.tcpdf.org/ in my project. you can use it too.
I am no beginner with HTML and CSS... but I am with PHP. I have a very tiny dynamically generated PHP page that creates a table and fills it with numbers. The CSS is working on random items, very weirdly and I'm not sure what is going on. The <body> tag CSS is not working at all. Not one property is being affected by it. The table.temps css is not working either, but if I remove it, then the <th> tag looses its styling. This is for a homework assignment and I know it's an easy fix, I've just been having the worst time with CSS and PHP lately.
It's all one page, and its relatively small, so here is the document:
<!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" xml:lang="en" lang="en">
<head>
<title>Lab 1</title>
<style type="text/css">
<!-- Declare document <body> styles -->
body{
background-color: #9FDBFF;
color: #333;
font-family: Helvetica, sans-serif;
font-size: .8em;
height: 100%;
width: 100%;
}
<!-- Declare document table styles -->
table.temps {
width: 50%;
height: auto;
min-height: 400px;
border: 2px solid black;
color: #333;
}
th {
background: blue;
color: #FFF;
height: 20px;
width: 100px;
}
.colorIt {
background-color: #CCC;
}
</style>
</head>
<body>
<?php
$intTableTotalWidth = 8;
$intTableTotalHeight = 8;
$intCount = 1;
print("<table class='temps'>");
print("<th>Farenheight</th>");
print("<th>Celcius</th>");
for ($intHeight = 0; $intHeight < $intTableTotalHeight; $intHeight++) {
print("<tr>");
for ($intWidth = 0; $intWidth < $intTableTotalWidth; $intWidth++) {
if ($intCount % 2 == 0){
print("<td class='colorIt'>" . $intCount ."</td>");
}
else {
print ("<td>" . $intCount . "</td>");
}
$intCount++;
}
print("</tr>");
}
print("</table>");
?>
</body>
</html>
EDIT: My fault people, I didn't even realize I was using HTML comments in the CSS. It's internal CSS so the CSS comments don't change color in the HTML document which was throwing me off. I fixed the issue. I appreciate your input!
You are using html comments in the style tag. This is not allowed. You should never use html comments in style and script tags.It's not allowed. Remove them and it will all work.
remove these lines
<!-- Declare document <body> styles -->
<!-- Declare document table styles -->
Your <th> tags should be embeded in <tr> tags: <tr><th>col1</th><th>col2</th></tr>.
You are outputing more cells / row than columns defined with <th>. If you want a <th> to contain two columns, you should use <th colspan="2">col1</th>.
much easier sollution: have session_start() at begining of .php file, put all your theme in a array and later, include stylesheet
session_start()
$theme=array("links"=>"#ff0000", "bkg"=>"#00ff00");
$_SESSION["Theme"]=$theme;
...
<link rel="stylesheet" type="text/css" href="default.php">
and your stylesheet look like this:
default.php
<?php session_start();
if (isset($_SESSION["Theme"])) {
extract($_SESSION["Theme"]);
header("Content-type: text/css");
} else {
// this part is for proper coloring the file, editor will see <style>
// but when loaded from main file <style> will be discarded
?>
<style>
<?php } ?>
a {
color:<?=$links?>;
}
body {
background-color: <?=$bkg?>;
}