http://code.stephenmorley.org/php/diff-implementation/#styling
I am following above link to test code.
I have put them together but in the browser but I am not seeing any nice color table just like author mentioned. I don't know how to include style code any idea on how to do that?
index.php
<?php
// include the Diff class
require_once './class.Diff.php';
// output the result of comparing two files as plain text
echo Diff::toTable(Diff::compareFiles('/tmp/foo1', '/tmp/foo2'));
?>
You need to include CSS on your page, either by embedding it in the <head> or by linking to an external stylesheet.
<!DOCTYPE html>
<html>
<head>
<!-- external CSS -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- embedded CSS -->
<style type="text/css">
.diff td {
vertical-align: top;
white-space: pre;
white-space: pre-wrap;
font-family: monospace;
}
</style>
</head>
<body>
...
The link you provided gives an example of the minimum CSS needed for each td:
.diff td {
vertical-align: top;
white-space: pre;
white-space: pre-wrap;
font-family: monospace;
}
It also explains what classes you can style: diffUnmodified, diffDeleted, diffInserted, and diffBlank.
This is the CSS from the example page you linked:
.diff td {
padding :0 0.667em;
vertical-align: top;
white-space: pre;
white-space: pre-wrap;
font-family: Consolas,'Courier New',Courier,monospace;
font-size: 0.75em;
line-height: 1.333;
}
.diff span {
display: block;
min-height: 1.333em;
margin-top: -1px;
padding: 0 3px;
}
* html .diff span {
height: 1.333em;
}
.diff span:first-child {
margin-top: 0;
}
.diffDeleted span {
border: 1px solid rgb(255,192,192);
background: rgb(255,224,224);
}
.diffInserted span {
border: 1px solid rgb(192,255,192);
background: rgb(224,255,224);
}
Related
I'm just starting with HTML and PHP and I ran into the following problem:
When having a PHP command the webpage shows wrong colors!
With PHP command (<?php phpinfo( ); ?>)
Without PHP command:
It's pretty clear to see that the navbar elements change color, depending on the command, but why?
I can't get this fixed, no matter what I do. Here's my other code:
PHP-Source-File:
<!DOCTYPE HTML>
<html>
<head>
<title>PHP-Info</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/index.css" type="text/css" media="all">
</head>
<body>
<ul class="navbar">
<li class="navbar"><a class="navbar" href="index.php">Home</a></li>
<div style="float: right;">
<li class="navbar"><a class="navbar" href="">Server-Info</a></li>
<li class="navbar"><a class="navbar active" href="phpinfo.php">PHP-Info</a></li>
</div>
</ul>
<div>
<?php phpinfo( ); ?>
</div>
</body>
</html>
Stylesheet:
* {
margin: 0;
padding: 0;
font-family: Tahoma, sans-serif;
font-size: 100%;
}
body {
margin-top: 55px;
}
ul.navbar {
position: fixed;
top: 0;
width: 100%;
height: 5.4%;
list-style-type: none;
overflow: hidden;
background-color: rgba(33, 33, 33, 0.35);
}
li.navbar {
float: left;
}
li a.navbar {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover.navbar {
border-bottom: 4px solid dodgerblue;
}
li a.active.navbar {
background-color: #666666;
border-bottom: 4px solid #666666;
}
In your CSS stylesheet I see you have :hover and :active before your classes. Try switching them around, like this:
li a.navbar:hover {
border-bottom: 4px solid DodgerBlue;
}
li a.navbar:active {
background-color: #666666;
border-bottom: 4px solid #666666;
}
EDIT: Plus you had a period . instead of a colon : before active.
It is also a good idea to capitalize your color names. DodgerBlue instead of dodgerblue. Some browsers are strict about this.
I am trying to join the the footer-document to the index-file. But it does not work and I suspect there i something wrong with my css-file.
html {background: url("bakgrund.gif");}
/*https://pixabay.com/ Gratis bilder Creative Commons CC0*/
html { overflow-y: scroll;}
body {
background: white;
border: 1px solid #0000ff;
font-family: calibri, arial, sans-serif;
width: 750px;
margin: 25px auto;
padding: 0;
}
header {
height: 175px;
background-color: #edffff;
margin-top: -16px;
padding: 0;
}
nav {
height: 35px;
background-color: #edffff;
padding-left: 10px;
}
section {
width: 550px;
float: left;
min-height: 400px;
}
article {
width: 550px;
float: left;
background-color: yellow;
}
aside {
width: 200px;
float: right;
background-color: lightgrey;
}
footer {
clear: both;
position: relative;
height: 55px;
padding: 5px ;
text-align: center;
background-color: magenta;
}
address {
font-size: 12px;
font-style: normal;
}
/* Menykataloger */
ul {
margin: 0;
padding: 0;
}
#meny li {
display: inline;
padding: 5px 1px;
}
#meny li a {
margin: 0 5px 0 5px;
padding: 5px 15px;
text-align: center;
font-family: arial;
font-size: 13px;
font-weight: bold;
color: black;
border: 1px solid black;
border-radius: 5px;
background: yellow;
}
#meny li a:hover {
background: #CCEBFF;
color: black;
}
#meny a:link, #meny a:visited {
color: black;
text-decoration: none;
}
#meny a:active {
color: white;
}
#meny a#current {
background: white;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="stil.css" type="text/css">
</head>
<body>
<nav>
<ul id="meny">
<li>Hem</li>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</nav>
<section>
<h2>Huvudrubrik</h2>
<p>Huvudinnehåll</p>
<article>
<h2>Rubrik 1</h2>
<p> Innehåll 1 med rubriker</p>
</article>
<article>
<h2>Rubrik 2</h2>
<p> Innehåll 2 med rubriker
</p>
</article>
</section>
<aside>
Nyhetsbrev H-spalt
</aside>
<?php include("fot.php"); ?>
The result is wrong with the interpretation of the border. It just encircles the head and not the whole area.
I Get your problem
why dont you start your file with < ? php at begining and close it at the end
instead which you've used like this => "< ? php include("fot.php");" ?> at the end of your second file if you can see.
and save the main html file with the extension .php
trust me nothing will happen to your html code all the html contents will run fine even if you save the file in .php
and the second thing is you can include in two ways
i.e
include 'filename';
or
require 'filename'; you better include at the starting of the file
who would know if that included file may come to use right from the begining
Thanking you!
I could not understand what you are trying to do, but your problem is due to float: left for section tag. There are many alternatives to float like flex and grid,, so don't prefer float. It will cause many problems. Your problem is listed here.
There is no problem with your php.
The user arrives on the following php script and it sets if the email has been confirmed or not.
At the moment the only thing the user can seen in the browser is a very simple message printed by the php echo.
I would like it to look visually more interesting. Get this echo to be part of a properly styled HTML page with header, font styles, signature, images...
What would be the best approach for that having in mind my script has breakpoints? As I never did that before, not sure what would be the best start point to focus the effort on.
Bellow are my code updates based on the answers. Hope that helps other
users that are new to php.
<?php
require("../db/MySQLDAO.php");
require ("../Classes/EmailConfirmation.php");
$config = parse_ini_file('../db/SwiftApp.ini');
//host access data
$dbhost = trim($config["dbhost"]);
$dbuser = trim($config["dbuser"]);
$dbpassword = trim($config["dbpassword"]);
$dbname = trim($config["dbname"]);
// receive token data
$emailToken = htmlentities($_GET["token"]);
?>
<!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 name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title here</title>
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.6;
}
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100%!important;
height: 100%;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a {
color: #348eda;
}
.btn-primary {
text-decoration: none;
color: #FFF;
background-color: #348eda;
border: solid #348eda;
border-width: 10px 20px;
line-height: 2;
font-weight: bold;
margin-right: 10px;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 25px;
}
.btn-secondary {
text-decoration: none;
color: #FFF;
background-color: #aaa;
border: solid #aaa;
border-width: 10px 20px;
line-height: 2;
font-weight: bold;
margin-right: 10px;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 25px;
}
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.padding {
padding: 10px 0;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap {
width: 100%;
padding: 20px;
}
table.body-wrap .container {
border: 1px solid #f0f0f0;
}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap {
width: 100%;
clear: both!important;
}
.footer-wrap .container p {
font-size: 12px;
color: #666;
}
table.footer-wrap a {
color: #999;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1, h2, h3 {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #d63480;
margin: 40px 0 10px;
line-height: 1.2;
font-weight: 200;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
p, ul, ol {
margin-bottom: 10px;
font-weight: normal;
font-size: 14px;
}
ul li, ol li {
margin-left: 5px;
list-style-position: inside;
}
/* ---------------------------------------------------
RESPONSIVENESS
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important; /* makes it centered */
clear: both!important;
}
/* Set the padding on the td rather than the div for Outlook compatibility */
.body-wrap .container {
padding: 20px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
}
</style>
</head>
<body bgcolor="#f6f6f6">
<!-- body -->
<table class="body-wrap" bgcolor="#f6f6f6">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF">
<!-- content -->
<div class="content">
<table>
<tr>
<td>
<h1>Title</h1>
<table>
<tr>
<td class="padding">
<p>
<?php
if(empty($emailToken)) {
echo "<h2>Sorry, something went wrong...</h2>";
echo "<p>Unfortunately your email validation token has expired.</p>";
echo "<p>Please get in contact with us at <a href=mailto:></a></p>";
}
else{
//open server connection
$dao = new MySQLDAO($dbhost, $dbuser, $dbpassword, $dbname);
$dao->openConnection();
//creates user
$user_id = $dao->getUserIdWithToken($emailToken);
if(empty($user_id))
{
echo "<h2>Sorry, something went wrong...</h2>";
echo "<p>We could not find an user associated with the email you provided.</p>";
echo "<p>Please get in contact with us at <a href></a></p>";
}
else{
$result = $dao->setEmailConfirmedStatus(1, $user_id);
if($result)
{
echo "<h2>Thank you! Your email is now confirmed!<h2>";
$dao->deleteUsedToken($emailToken);
}
}
$dao->closeConnection();
}
?>
</p>
</td>
</tr>
</table>
<p class="padding"></p>
<p>Thanks,</p>
<p>Title team</p>
<p class="padding"></p>
</td>
</tr>
</table>
</div>
<!-- /content -->
</td>
</tr>
</table>
<!-- /body -->
</body>
</html>
Use HTML to structure your content and CSS to format your content.
You can echo HTML and CSS right along with your string.
Those links should get you going in the right direction.
Update to accommodate comment
There are many methods, but a simple example that might work for your case is something like this:
Instead of echoing right there in your if statement, replace it with an include or require.
Lets call that file template.php. This file does not need to start with <?php and end with ?>. PHP can punch in and out with HTML. So template.php might look like this:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta charset="UTF-8">
<title></title>
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<div class="some_style"><?php
echo 'something';
?></div>
<div class="some_style2"><?php
echo $some_var;
?></div>
</body>
</html>
Also if this is going to be sent in an email, CSS is not really supported in email, so you will need to keep the styling to what you can do with simple HTML tags and images.
Change your echo to:
echo '<div id="message">User with this email token is not found</div>';
Then style #message with css
Hope that helps!
urgh.. uglyness html in php. There are ways in which you can include html within the script without echoing it out.
There is the old way.
// out of php
?>
<div>
<?php echo $content; ?>
</div>
<?
// back in.
Or you can look into php/html short hand. Your code will benefit from it because it will be somewhat cleaner to read,
The main reason though, dont make php parse html unless you have to.
PHP
echo "<p id='token_message'>User with this email token is not found</p>";
CSS
#token_message {
/* Styling Here */
}
I'm trying to set up a universal navigation bar. I'm using include to import menu.php into index.php. When I do, it works fine; however, when I add something after the menu.php include, the menu's CSS rules carries on.
index.php
<!DOCTYPE HTML>
<html>
<head>
<link rel=stylesheet href="css/style.css" />
<title>Home | Website</title>
</head>
<body>
<?php include 'menu.php'; ?>
<p>Test</p>
</body>
</html>
menu.php
<head>
<title>Menu | Website</title>
<style>
// menu-only styles...
</style>
</head>
<body>
Home
</body>
<?php return; ?>
You're essentially including an HTML page within an HTML page doing it your way.
To get your CSS to target only your menu, keep it in your style.css file, but make your div have a "menu" class.
Something like this should do what you're looking for, I believe.
index.html
<!DOCTYPE HTML>
<html>
<head>
<link rel=stylesheet href="css/style.css" />
<title>Dare Network | Home</title>
</head>
<body>
<?php include 'menu.php'; ?>
<p>Test</p>
</body>
</html>
style.css
html,body {
padding: 0;
margin: 0;
background-color: #777777;
}
.menu {
/* padding: top&&bottom left&&right; */
padding:10px 0;
background-color: #7786ff;
text-align: center;
}
.menu a {
/* merge transitions into one line to make both functional */
transition: background-color .25s ease-in-out, padding-bottom .25s ease-in-out;
background-color: #b20000;
color: #ffffff;
text-decoration: none;
/* padding:top right bottom left */
padding:10px 10px 5px 10px;
}
.menu a:hover {
background-color: #cc0000;
padding-bottom: 10px;
}
menu.php
<div class="menu">
Home
</div>
This is not a PHP issue
Your CSS in menu.php comes later in the DOM than your actual stylesheet and therefore is being overwritten. Either scope your menu.php styles with some containing element or put your menu CSS code earlier in the DOM (like before style.css)
You are almost a bit closer to what you code. A HTML page can have only one html,head,title,body tag.
Just remove these html,head,title,body tags from menu.php
index.html
<!DOCTYPE HTML>
<html>
<head>
<link rel=stylesheet href="css/style.css" />
<title>Dare Network | Home</title>
</head>
<body>
<?php include 'menu.php'; ?>
<p>Test
</body>
</html>
style.css
html,body {
padding: 0;
margin: 0;
background-color: #777777;
}
menu.php
<style>
body {
padding-top: 10px;
padding-bottom: 10px;
background-color: #7786ff;
text-align: center;
}
a {
transition: background-color .25s ease-in-out;
transition: padding-bottom .25s ease-in-out;
background-color: #b20000;
color: #ffffff;
text-decoration: none;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
a:hover {
background-color: #cc0000;
padding-bottom: 10px;
}
</style>
Home
<?php return; ?>
I'm getting back into web design after a several year break, so a lot of the tips and tricks that I used on a regular basis before just don't seem to be working. I'm designing a guild website for my World of Warcraft guild for some practice, but I'm having issues getting the div background images to show up properly on the page.
The page consists of a container DIV, a header DIV, a Menu DIV, and a three column layout, followed of course by a footer div. Above the menu I have a little artistic background I'm susing, and I managed to get that one to show up; however, I can't get the proper image to show up above the left or right bars properly. I've searched the net a ton, and am still dumbfounded as to what I'm doing wrong. Here is a screen shot of what I sort of want the layout to look like: http://s19.postimage.org/7svzmuaf7/Layout_V2.jpg
Currently, this is what I'm getting when you visit the website in any major browser: http://cirquedufreak.net78.net/
There is obviously some differences in the two, as one is just a jpg, and the other is a css/html combo, and that I'm aware of. Thank you for any help you can provide.
Source Code:
index.php:
<?php
session_start();
include("wowarmoryapi/BattlenetArmory.class.php");
?>
<!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>Home - Cirque du Freak of Vashj</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
<div id="container">
<div id="header"> </div>
<div id="menu">
<ul>
<li>Home</li>
<li>Roster</li>
<li>Forums</li>
<li>About</li>
<li>Contact</li>
<li>Books</li>
</ul>
</div>
<div id="leftbar">LEFTBAR</div>
<div id="content">
<div id="gmod">
<h1>Important Message</h1>
<p>This is where any "breaking news" or important information that you want to give to the players will be displayed.</p>
</div>
</div>
<div id="rightbar">
<p>For an invitation, contact one of the following players in game:</p>
<?php
?>
</div>
<div id="footer">©2012 Cirque du Freak Guild of Vashj; All Rights Reserved.<br />World of Warcraft and related images and materials are © Blizzard Entertainment.</div>
</div>
</body>
</html>
layout.css:
#charset "utf-8";
/* CSS Document */
/* CSS LAYOUT BEGIN */
body {
margin: 0;
padding: 0;
background-color: #000;
color: #FC3;
text-align: center;
}
div#container {
margin: 0 auto;
text-align: left;
width: 1024px;
height: auto;
}
div#header {
width: 1024px;
height: 147px;
background: url(images/v2_header.png);
}
div#menu {
width:1024px;
height: 70px;
text-align:center;
background: url(images/v2_menuBG.png);
}
div#leftbar {
float: left;
width: 170px;
height: 525px;
min-heigh: 150px;
background-image: url(images/v2_barBG.png) no-repeat;
display: inline-block;
background-position: top left;
}
div#content {
float: left;
width: 684px;
min-height: 50px;
height: 525px;
}
div#rightbar {
float: right;
width: 170px;
height: 525px;
min-height: 50px;
background-image: url(images/v2_barBG.png) no-repeat;
}
div#footer {
width: 1024px;
height: 50px;
text-align: center;
clear: both;
}
/* CSS LAYOUT END */
/* CSS MENU BEGIN */
#menu ul {
margin: 0;
padding: 0;
float: left;
list-style: none;
width: 1024px;
}
#menu ul li {
display: inline;
}
#menu ul li a {
float: left;
text-decoration: none;
padding: 10.5px 11px;
width: 140px;
color: #FF0;
font-weight: bold;
font-size: 24px;
background-color: transparent;
vertical-align: text-bottom;
}
#menu ul li a:visited {
color: #FF0;
}
#menu ul li a:hover, #menu ul li .current {
color: #F00;
text-decoration: underline;
background-color: transparent;
}
/* CSS MENU END */
/* LEFT BAR CSS BEGIN */
/* LEFT BAR CSS END */
/* CONTENT BOX CSS BEGIN */
#content div#gmod {
width: 500px;
height: 150px;
text-align: center;
border: #FFF 3px solid;
background-color: #000;
margin: 0 auto;
color: #FFF;
overflow-style: auto;
overflow: scroll;
overflow-x: hidden;
padding-left: 4px;
padding-right: 4px;
}
#content div#gmod h1 {
text-align: center;
color: #F00;
font-size: 24px;
font-weight: bold;
text-decoration: underline;
padding: 0px 5px;
/* CONTENT BOX CSS END */
/* RIGHT BAR CSS BEGIN */
/* RIGHT BAR CSS END */
/* FOOTER CSS BEGIN */
#footer {
color: #999;
text-align: center;
}
/* FOOTER CSS END */
Thank you very much for taking the time to assist me with this problem.
Don't use
background-image: url(images/v2_barBG.png) no-repeat;
but
background: url(images/v2_barBG.png) no-repeat;
background-image: url(images/v2_barBG.png) no-repeat; should be background-image: url(images/v2_barBG.png); background-repeat: no-repeat;
background-image: url(images/v2_barBG.png) no-repeat; <-- no-repeat should be declared seperatly like this: background-repeat: no-repeat;