I have a PHP file from which i want to create the PDF file but problem is that it is not creating the PDF file.
If i give $content = 'ABC BCNNCNCN'; it works but for my .php file who only contains the html content, it is not working all the way.
I am also pasting my code here:
require_once('../styles/uploads/files/extract/'.$bookName.'/'.$bookName.'_coverFinal.php');
$content = ob_get_clean();
require_once('html2pdf/html2pdf.class.php');
$html2pdf = new HTML2PDF('P', 'A4', 'en', true, 'UTF-8', array(25, 20, 25, 20));
$html2pdf->writeHTML($content, isset($_GET['vuehtml']));
html2pdf->Output("../styles/uploads/files/pdf_files/htmltopdf.pdf", 'F');
Below is my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title></title>
<style type="text/css">
.main-container {
margin-left: auto;
margin-right: auto;
width: auto;
font-family: Myriad Pro;
}
.page-title {
font-family: Myriad Pro;
font-size:25px;
text-align: center;
}
.stepone {
padding: 10px;
}
.steptwo {
padding: 10px;
}
.codeis {
font-size: 25px;
text-align: center;
}
.code {
font-size: 50px;
padding: 8px;
}
.stepthree {
padding: 10px;
}
.bookgift {
font-weight: bold;
text-align: center;
}
.registration {
padding: 10px;
}
.given {
font-size: 20px;
font-weight: bold;
padding: 10px;
}
.too {
font-size: 20px;
font-weight: bold;
padding: 10px;
}
</style>
</head>
<body>
<div class="main-container">
<div class="page-title">Giftcardbooks.org</div>
<div class="stepone"> Step1. Register this book at www.giftcardbooks.org/register</div>
<div class="steptwo"> Step 2. Enjoy the book and write down the code as you go through the book. Look for the sentences stating. Congratulations, you have just unlocked a letter in your code. The first letter is P.</div>
<div class="codeis"> Your Code is:</div>
<div class="code"> P _ _ _ _ _ _</div>
<div class="stepthree"> Step 3. After finishing the book put your code in the website (www.giftcardbooks.org/giftscards) and enjoy your gift card. Thanks</div>
<div class="bookgift">j ghjhg jghj ukrtert</div>
<div class="registration"> Book Registration Number: 68217543</div>
<div class="given"> This book was given by <font style="text-decoration:underline">_mohsin_</font></div>
<div class="too"> This book was given to <font style="text-decoration:underline">_yousaf_</font></div>
</div>
<style type="text/css">
pre{display:none !important;}
</style>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- $Id: header.txt 236 2009-12-07 18:57:00Z vlsimpson $ -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>The Project Gutenberg eBook of The Secret Battle, by A. P. Herbert.</title>
<style type="text/css">
body {
margin-left: 10%;
margin-right: 10%;
}
h1, h2, h3, h4, h5, h6 {
text-align: center; /* all headings centered */
clear: both;
}
p {
margin-top: .75em;
text-align: justify;
margin-bottom: .75em;
}
hr {
width: 33%;
margin-top: 2em;
margin-bottom: 2em;
margin-left: auto;
margin-right: auto;
clear: both;
}
table {
margin-left: auto;
margin-right: auto;
}
.pagenum { /* uncomment the next line for invisible page numbers */
/* visibility: hidden; */
position: absolute;
left: 92%;
font-size: smaller;
text-align: right;
} /* page numbers */
.linenum {
position: absolute;
top: auto;
left: 4%;
} /* poetry number */
.blockquot {
margin-left: 5%;
margin-right: 10%;
}
.sidenote {
width: 20%;
padding-bottom: .5em;
padding-top: .5em;
padding-left: .5em;
padding-right: .5em;
margin-left: 1em;
float: right;
clear: right;
margin-top: 1em;
font-size: smaller;
color: black;
background: #eeeeee;
border: dashed 1px;
}
.bb {
border-bottom: solid 2px;
}
.bl {
border-left: solid 2px;
}
.bt {
border-top: solid 2px;
}
.br {
border-right: solid 2px;
}
.bbox {
border: solid 2px;
}
.center {
text-align: center;
}
.smcap {
font-variant: small-caps;
}
.u {
text-decoration: underline;
}
.caption {
font-weight: bold;
}
/* Images */
.figcenter {
margin: auto;
text-align: center;
}
.figleft {
float: left;
clear: left;
margin-left: 0;
margin-bottom: 1em;
margin-top: 1em;
margin-right: 1em;
padding: 0;
text-align: center;
}
.figright {
float: right;
clear: right;
margin-left: 1em;
margin-bottom:
1em;
margin-top: 1em;
margin-right: 0;
padding: 0;
text-align: center;
}
/* Footnotes */
.footnotes {
border: dashed 1px;
}
.footnote {
margin-left: 10%;
margin-right: 10%;
font-size: 0.9em;
}
.footnote .label {
position: absolute;
right: 84%;
text-align: right;
}
.fnanchor {
vertical-align: super;
font-size: .8em;
text-decoration:
none;
}
/* Poetry */
.poem {
margin-left:10%;
margin-right:10%;
text-align: left;
}
.poem br {
display: none;
}
.poem .stanza {
margin: 1em 0em 1em 0em;
}
.poem span.i0 {
display: block;
margin-left: 0em;
padding-left: 3em;
text-indent: -3em;
}
.poem span.i2 {
display: block;
margin-left: 2em;
padding-left: 3em;
text-indent: -3em;
}
.poem span.i4 {
display: block;
margin-left: 4em;
padding-left: 3em;
text-indent: -3em;
}
</style>
</head>
<body>
<div class="figcenter"> <img src="images/cover.jpg" alt=""/> </div>
<hr style="width: 65%;" />
<h1>THE SECRET BATTLE</h1>
<h2>BY A. P. HERBERT</h2>
<h3>AUTHOR OF 'THE BOMBER GYPSY'</h3>
<h3>METHUEN & CO. LTD.<br />
36 ESSEX STREET W.C.<br />
LONDON</h3>
<h3><i>First Published in 1919</i></h3>
<hr style="width: 65%;" />
<h2>CONTENTS</h2>
<hr style="width: 65%;" />
<h2>THE SECRET BATTLE</h2>
<hr style="width: 65%;" />
<h2><a name="I" id="I"></a>I</h2>
<p>I am going to write down some of the history of Harry Penrose, because I
do not think full justice has been done to him, and because there must
be many other young men of his kind who flung themselves into this war
at the beginning of it, and have gone out of it after many sufferings
with the unjust and ignorant condemnation of their fellows. At times, it
may be, I shall seem to digress into the dreary commonplaces of all
war-chronicles, but you will never understand the ruthless progression
of Penrose's tragedy without some acquaintance with each chapter of his
life in the army.</p>
<hr style="width: 45%;" />
<p>He joined the battalion only a few days before we left Plymouth for
Gallipoli, a shy, intelligent-looking person, with smooth, freckled skin
and quick, nervous movements; and although he was at once posted to my
company we had not become at all intimate when we steamed at last into
Mudros Bay. But he had interested me from the first, and at intervals in
the busy routine of a troopship passing without escort through submarine
waters, I had been watching him and delighting in his keenness and happy
disposition.</p>
<p>It was not my first voyage through the Mediterranean, though it was the
first I had made in a transport, and I liked to see my own earlier
enthusiasm vividly reproduced in him. Cape Spartel and the first glimpse
of Africa; Tangiers and Tarifa and all that magical hour's steaming
through the narrow waters with the pink and white houses hiding under
the hills; Gibraltar Town shimmering and asleep in the noonday sun;
Malta and the bumboat women, carozzes swaying through the narrow,
chattering streets; cool drinks at cafés in a babel of strange tongues;
all these were to Penrose part of the authentic glamour of the East; and
he said so. I might have told him, with the fatuous pomp of wider
experience, that they were in truth but a very distant reflection of the
genuine East; but I did not. For it was refreshing to see any one so
frankly confessing to the sensations of adventure and romance. To other
members of the officers' mess the spectacle of Gibraltar from the sea
may have been more stimulating than the spectacle of Southend (though
this is doubtful); but it is certain that few of them would have
admitted the grave impeachment.</p>
<p>That was the end of it. They were kind enough, those grey men; they did
not like the job, and they wanted only to do their duty. But they
conceived that their duty was 'laid down in The Book,' to look at the
'hard facts,' and no further. And the 'hard facts' were very hard....</p>
<p>The Court was closed while they considered their verdict; it was closed
for forty minutes, and when it reopened they asked for evidence of
character. And that meant that the verdict was 'Guilty.' On the only
facts they had succeeded in discovering it could hardly have been
anything else.</p>
<p>The Adjutant put in formal evidence of Harry's service, age, record, and
so on; and I was allowed to give evidence of character.</p>
<p>I told them simply the sort of fighting record he had, about Gallipoli,
and the scouting, and the job he had refused in England.</p>
<p>I am glad to believe that I did him a little good; for that evening it
got about somehow that he was recommended to mercy.</p>
<p>And perhaps they remembered that he was twenty-three.</p>
<hr style="width: 65%;" />
<h2><a name="XIII" id="XIII"></a>XIII</h2>
<p>That evening I sat in C Company mess for an hour and talked with them
about the trial. They were very sad and upset at this thing happening in
the regiment, but they were reasonable and generous, not like those D
Company pups, Wallace and the other. For they were older men, and had
nearly all been out a long time. Only one of them annoyed me, a fellow
in the thirties, making a good income in the City, who had only joined
up just before he had to under the Derby scheme, and had been out a
month. This fellow was very strong on 'the honour of the regiment'; and
seemed to think it desirable for that 'honour' that Harry should be
shot. Though how the honour of the regiment would be thereby advanced,
or what right he had to speak for it, I could not discover.</p>
<hr style="width: 45%;" />
<div class="footnote">
<p><a name="Footnote_1_1" id="Footnote_1_1"></a><span class="label">[1]</span> It is only fair to say that, long after the supposed date
of this conversation, a system of sending 'war-weary' soldiers home for
six months at a time was instituted, though I doubt if Foster would have
been satisfied with that.</p>
</div>
</body>
</html>
If the PHP file you are including is just HTML try getting its contents with file_get_contents instead of messing with output buffering:
$content = file_get_contents('../styles/uploads/files/extract/'.$bookName.'/'.$bookName.'_coverFinal.php');
require_once('html2pdf/html2pdf.class.php');
$html2pdf = new HTML2PDF('P', 'A4', 'en', true, 'UTF-8', array(25, 20, 25, 20));
$html2pdf->writeHTML($content, isset($_GET['vuehtml']));
$html2pdf->Output("../styles/uploads/files/pdf_files/htmltopdf.pdf", 'F');
EDIT: Missing $ on last line
Related
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.
I am developing a Web app with Laravel and using Facebook's PHP SDK. I want to have Facebook's "Login" button appear on my homepage, but that apparently only comes with the JavaScript SDK. How do I get Facebook's "Login" button when I'm using Facebook's PHP SDK to log users in?
Add these three css files in your Web app.
http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css
bootstrap.min.css
https://raw.github.com/noizwaves/bootstrap-social-buttons/v1.0.0/social-buttons.css
And then write this in your view.
<button class="btn btn-facebook"><i class="fa fa-facebook"></i> | Connect with Facebook</button><br/><br/>
These buttons don't come just like that. In JS you must have use facebook-login-button that's the reason its coming there. The same button can not be used while using the PHP SDK.
In PHP you can create them yourself. Try this-
$user = $facebook->getUser();
if ($user) {
$logoutUrl = $facebook->getLogoutUrl();
} else {
$loginUrl = $facebook->getLoginUrl();
}
<?php if ($user): ?>
Logout <!-- design these buttons -->
<?php else: ?>
Login with Facebook
<?php endif ?>
The code is self-explanatory I guess :)
I just tested the answer from Abdussami Tayyab and works fine
I got the latest from http://fontawesome.io/ (4.2.2) then created a /fonts and /css in top folder of website.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
<?php include 'css/font-awesome.css'; ?>
<?php include 'css/font-awesome.min.css'; ?>
<?php include 'css/social-buttons.css'; ?>
</style>
</head>
<body>
<?php
print "Hello world!";
?>
<button class="btn btn-facebook"><i class="fa fa-facebook"></i> | Connect with Facebook</button><br/><br/>
</body>
</html>
I went ahead and implemented the Javascript login and then used Firebug to get the styles and URLs to images. I didn't bother to clean up the CSS so there is likely things that don't need to be here, feel free to clean it up some and re-post. My sizing matches the 'like' and 'post' button's, not the original log-in button.
Two things not covered here: The button doesn't do anything. Make it a link or use Javascript. I included the link to the 'progress' graphic but didn't implement it either.
Link to facebook images (image names changed later):
https://fbstatic-a.akamaihd.net/rsrc.php/v2/yB/r/t4ZSL-NWK2R.png
https://fbstatic-a.akamaihd.net/rsrc.php/v2/yE/r/49Rx-CGUu94.gif
CSS:
.facebook_button{
background: linear-gradient(#4c69ba,#3b55a0) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-color: #4c69ba;
border-radius: 2px;
color: #ff;
font-family: "Helvetica neue";
text-shadow: 0 -1px 0 #354c8c;
cursor: pointer;
display: inline-block;
vertical-align: top;
/*now inherited*/
border-collapse:collapse;
border-spacing: 0;
color: #fff;
text-shadow: 0 -1px 0 #354c8c;
cursor: pointer;
-moz-text-size-adjust: none;
direction: ltr;
line-height: 1.28;
padding: none;
};
.facebook_button:hover{
background: linear-gradient(#5b7bd5, #4864b1) repeat scroll 0 0 rgba(0,0,0,0);
border-color: #5874c3 #4961a8 #3b5998;
box-shadow: 0 1px 0 #607fd6 inset;
cursor: pointer;
}
.facebook_login{
border: 0 none;
border-collapse: collapse;
border-spacing: 0;
color: #fff;
text-align: left;
font-size: 11px;
font-family: "Helvetica neue";
text-shadow: 0 -1px 0 #354c8c;
cursor:pointer;
-moz-text-size-adjust: none;
direction: ltr;
line-height: 1.28;
}
.outer{
padding-bottom: 0;
padding-top: 0;
padding-right: 0;
font-family: "helvetica neue", helvetica,arial,"lucida grande",sans-serif;
text-align:left;
font-size:11px;
/*now inherited*/
border-collapse:collapse;
border-spacing:0;
color: #fff;
text-shadow: 0 -1px 0 #354c8c;
cursor: pointer;
-moz-text-size-adjust: none;
direction: ltr;
line-height: 1.28;
}
.middle{
border: medium none;
display: inline-block;
font-family: "helvetica neue",helvetica,arial,"lucida grande",sans-serif;
text-align:left;
font-size: 11px;
/*inherited*/
}
.inner{
font-size: 11px;
line-height: 14px;
padding: 2px 6px;
font-weight: bold;
border: medium none;
display: inline-block;
white-space: nowrap;
-moz-text-size-adjust: none;
direction: ltr;
}
The HTML:
<div class="facebook_button">
<table class="facebook_login">
<tbody>
<tr>
<td class="outer">
<span class="middle">
<span class="inner">
<img src="library/img/facebook.png" style="width:16px;height:16px;">
</span>
</span>
</td>
<td class="outer">
<span class="middle">
<span class="inner">
Log In
</span>
</span>
</td>
</tr>
</tbody>
</table>
I'm not entirely sure how I managed to jack this up.
http://pretty-senshi.com
If you take a look at that, where the left item and right item are, the right item is sticking out for whatever reason, so I think I'm doing something wrong. Or maybe my coding/css is jacked up, I'm not entirely sure about the coding anyway, I just know it "works" somewhat. See below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"><br />
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pretty Senshi - Sailor Moon </title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet"
href="http://pretty-senshi.com/log/wp-content/themes/BLANK-Theme/style.css"
type="text/css" />
<link rel="pingback" href="http://pretty-senshi.com/log/xmlrpc.php" />
</head>
<body class="home blog logged-in admin-bar">
<body>
<div id="container">
<div id="rightHalf"></div>
<div style="text-align: center;"><caption>
<img src="http://pretty-senshi.com/images/design.png" alt="text" id="picture">
</caption></div>
<div id="wrapper"><div id="leftcolumn">
<div class="headernav">Navigation</div>
About Us<br>
Gallery<br>
Links In/Out<br>
</div>
<div id="content">
<div class="post-1 post type-post status-publish
format-standard hentry category-uncategorized" id="post-1"></div>
<div class="header">Welcome</div>
<div class="entry">
<p>The site isn’t ready yet. This site is not ONLY dedicated to
Sailor Moon but to all anime.</p>
<div id="commentbar">
<div class="left">left stuff</div>
<div class="right">right stuff</div></div>
</div>
<div id="footer"></div>
</body>
</html>
And here is the CSS to it:
/*
Theme Name: Pretty Senshi
Theme URI: http://pretty-senshi.com
Description:
Author: Megan Riffey
Author URI: http://hateyourway.org
Version: 1
*/
body {background: url(http://pretty-senshi.com/images/sideone.png);
background-repeat:repeat-x;background-color: #fcefd8;
margin-top:0px;line-height: 20px;font-size: 10.5pt;
font-family: Tahoma;color:#998574;}
div#container {
width:100%;z-index: -1;}
.header {font-weight: bold;
font-size: 14px;
color: #D4556A;
FONT-FAMILY: verdana;
text-align: justify;
letter-spacing: 0px;
line-height: 25px;
background: url(http://pretty-senshi.com/images/header.png) left no-repeat;
padding-right:3px;
padding-left: 10px;
padding-bottom: 3px;
padding-top: 3px;
text-align:center;}
.headernav {font-weight: bold;
font-size: 13px;
color: #D4556A;
FONT-FAMILY: verdana;
text-align: justify;
letter-spacing: 0px;
line-height: 25px;
background: url(http://pretty-senshi.com/images/header.png) left no-repeat;
padding-right:20px;
padding-left: 3px;
padding-bottom: 3px;
padding-top: 3px;
text-align:right;}
.header:first-letter {color:#b970be;}
.headernav:first-letter {color:#b970be;}
div#picture {z-index: -1;width:780px;margin: 0 auto;text-align:center;}
#rightHalf {
background: url(http://pretty-senshi.com/images/sidetwo.png);
background-repeat:repeat-x;
width: 50%;
position: absolute;
right: 0px;
height: 100%;
z-index: -1;}
p {padding: 10px;z-index: 1;}
#wrapper {position:relative;
margin:0 auto;
width: 650px;
height:100%;}
#content {
float: right;
text-align:justify;margin-top:-80px;
width: 440px;z-index: 999;height:100%;}
#leftcolumn {position:absolute;
text-align:justify;
width: 200px;margin-top:-80px;
float: left;z-index: 999;height:100%;}
#commentbar {width:100%;padding:10px;}
.left {float:left; width:50%;}
.right {float:right; width:50%;text-align:right;}
A:link, A:visited, A:active {
color:#175f8b;
text-decoration:none;
text-transform:uppercase;
font-size: 9pt;
font-weight:bold;}
A:hover{
color:#d76b92;
text-decoration:none;
text-transform:uppercase;
cursor:default;
border-bottom: 1px solid #7d8f9a;
font-weight:bold;}
#date
{font:10pt "Century Gothic", sans-serif;
border-top:2px solid #d4aabc;
margin-top:10px;
color:#7ea558;
text-align:right;
font-weight:bold;
text-transform:uppercase;}
div.comment a {
width:100px
float:left;
height:22px;
background-color:#72a2c6;
text-align:center;
display:block;
letter-spacing:0px;
text-shadow:none;
text-transform:uppercase;
margin-top:-16px;
padding:3px;
opacity:.8;
filter:alpha(opacity=80);
filter:"alpha(opacity=80)";}
What can I add or change to make it align with the body text?
It is because you are using padding: 10px; in #commentbar, just remove it and you are good to go..and secondly just saw this that you are also using padding: 10px; for p in your CSS, so if you remove that too, both things will align exactly same
The padding is causing your mis-alignment...remove the padding in this CSS declaration and it will line up
#commentbar {
width: 100%;
/*padding: 10px;*/
}
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;
I have a header and navbar (attached) then 2 input boxes below that. When I resize my screen to a smaller resolution, a scroller bar appears horizontally (which is weird as everything on the page is visible without scrolling), when I move this scroller bar, my header (with width 100%) cuts off and I just see the background underneath it. I have had this problem with multiple websites in the past, how do I fix it? My code is below.
assets/header.php
<html>
<link rel="stylesheet" type="text/css" href="/blog/assets/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/blog/assets/style.css">
<head>
</head>
<body>
<div class="header"><br><br><br>
<p>My Blog</p>
</div>
<div class="topnav" align="center">
HOME
LATEST
ALL
ABOUT
SEARCH
</div>
assets/style.css
#import url('https://fonts.googleapis.com/css?family=Indie+Flower');
body {
background-color: #D3D3D3;
margin: 0 0 100px;
font-family: "PT-Sans", sans-serif;
}
.header {
display: block;
width: 100%;
height: 200px;
background-image: url("./img/header-img.png");
background-repeat: no-repeat;
background-size: 100%;
background-size:cover;
background-position: center center;
}
.topnav {
background-color: #333;
overflow: hidden;
position: relative;
top: 0;
}
.topnav a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 100px;
text-decoration: none;
font-size: 17px;
text-align: center;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.header p {
color: white;
font-size: 50px;
text-align: center;
vertical-align: middle;
font-family: 'Indie Flower', cursive;
}
index.php
<?php
include($_SERVER["DOCUMENT_ROOT"]."/blog/assets/header.php");
?>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Create Blog</title>
<form action="send.php" method="POST" class="form">
<input type="text" name="title" placeholder="Title" class="input"><br>
<textarea name="blog-text" placeholder="Blog" class="input"></textarea>
</form>
style.css
.input {
width: 50%;
}
.form {
position: relative;
left: 25%;
}
add this in your stylesheet to fill the header 100%
.header{
width: 100%;
margin-left: 0!important;
margin-right: 0!important;
}
Check if that css file is being accessed first. If so then have the following
.header {
display: block;
width: 100% !important;
height: 200px;
background-image: url("./img/header-img.png");
background-repeat: no-repeat;
background-size: 100%;
background-size:cover;
background-position: center center;
}
If still not working add lines one by one and see the effect.
Let me know if you require any further help
.form {
position: relative;
/* left: 25%; */
margin: 0 auto;
text-align: center;
}
If the margin property has three values:
margin: 25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px
so change your body tag to remove the left and right margin, may be that is why the full width is not filled
There's quite a few things that look wrong here, but I've shuffled your code into one document for testing purposes and it looks like the form is pushing over to the side, which is then making the page width wider, therefore allowing your header to go wider.
So you need to either remove the left: 25% from the form or make give it a width of less than 75%.
You need to be careful to maintain clean code, it looks like you'll end up with two 'head' tags from what you've posted, one of which is not needed and the other is not closed properly.
i have tested this and it worked.when the size of explore become small without any horizontal scroll bar
<?php
include($_SERVER["DOCUMENT_ROOT"]."/blog/assets/header.php");
?>
<style>
.input {
width: 50%;
}
.form {
left: 25%;
}
</style>
</head>
<body>
<continer>
<div class="header"><br><br><br>
<p>My Blog</p>
</div>
<div class="topnav" align="center">
HOME
LATEST
ALL
ABOUT
SEARCH
</div>
<div class="form" style=" text-align: center;">
<form action="send.php" method="POST" class="form">
<input type="text" name="title" placeholder="Title" class="input"><br>
<textarea name="blog-text" placeholder="Blog" class="input"></textarea>
</form>
</div>
</continer>
</body>
</html>