I am trying to generate a pdf file from HTML using the dompdf package in laravel. When I am trying to load the view in the browser everything works perfectly but when I generate the pdf of the same view file , the CSS styling break.
In the browser it looks like this,
In pdf file it looks like this,
this is my HTML code,
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css" media="all">
body {
width: 100%;
height: 100%;
margin: 20px;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#page {
size: A4;
margin: 0;
}
#media print {
html,
body {
width: 210mm;
height: 297mm;
}
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
* {
box-sizing: border-box;
}
body {
margin-top: 80px;
font-family: "HelveticaNeue-CondensedBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.card {
height: 320px;
width: 530px;
margin: 0 auto;
background: #ECECEC;
border-radius: 4px;
}
.card header {
background: #ED3D34;
height: 90px;
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom: 2px solid rgba(180, 80, 80, .5);
border-top: 1px solid rgba(221, 108, 108, .8);
padding: 35px 20px;
opacity: .9;
}
.card header h1 {
color: #fff;
line-height: 90%;
font-size: 20px;
margin: 0;
text-shadow: -1px -1px 1px rgba(0, 0, 0, .5);
}
.card article {
padding: 20px;
}
.card article img {
float: left;
margin-right: 30px;
width: 130px;
height: 177px;
transition: all .3s ease-in-out;
}
.card article h2 {
color: #515355;
float: left;
margin: 0 5px 15px 0;
font-weight: normal;
padding: 0 0 8px 0;
width: 250px;
}
.card article .area {
height: 170px;
width: 440px;
}
.card article .area h3 {
margin: 0;
color: #5F6163;
font-size: 20px
}
.card article .area ul {
margin: 5px 0 30px 0;
padding: 0;
list-style: none;
}
.card article .area ul li {
margin: 5px 0 0 0;
font-size: 16px;
color: #94957F;
text-shadow: 0 0 1px rgba(0, 0, 0, .3);
}
.card article .area ul li .bar {
width: 280px;
height: 15px;
display: inline-block;
border-radius: 50px;
float: right;
margin: 0 15px 0 0;
opacity: .9;
background-color: #CACACA;
box-shadow: inset 0 2px 2px rgba(0, 0, 0, .35);
}
.card article .area ul li .bar:before {
left: 0;
width: 0;
height: 15px;
background: rgb(254, 213, 121);
box-shadow:
inset 0 4px 4px rgba(255, 255, 255, .3),
inset 0 -2px 3px rgba(0, 0, 0, .05),
0 1px 0 0px #D29D40;
display: inline-block;
border-radius: 50px;
content: '';
z-index: -1;
}
.card article .area ul li .bar.percent-100:before {
width: 280px;
}
.card article .area ul li .bar.percent-90:before {
width: 260px;
}
.card article .area ul li .bar.percent-80:before {
width: 240px;
}
.card article .area ul li .bar.percent-70:before {
width: 220px;
}
.card article .area ul li .bar.percent-60:before {
width: 200px;
}
.card article .area ul li .bar.percent-50:before {
width: 180px;
}
.card article .area ul li:before {
/* content: '\2605'; */
margin-right: 5px;
}
.card article .area::-webkit-scrollbar {
width: 10px;
}
.card article .area::-webkit-scrollbar-track {
background-color: rgba(217, 217, 217, .5);
border-radius: 50px;
}
.card article .area::-webkit-scrollbar-thumb {
background: rgba(184, 184, 184, .5);
box-shadow:
inset 1px 1px 0 rgba(0, 0, 0, 0.10),
inset 0 -1px 0 rgba(0, 0, 0, 0.07);
border-radius: 50px;
}
</style>
</head>
<body>
<div class='card'>
<header>
<h1 class="text-center">Bright Group Tuition</h1>
</header>
<article>
<img alt='My Pic' id='thumb' src='https://s.cdpn.io/1202/timpietrusky_on_rampage_small_1.jpg'>
<h2>Tim Pietrusky</h2>
<div class='area'>
<ul>
<li>
Std: 10th
</li>
<li>
Batch: B1
</li>
<li>
DOB: 12/12/12
</li>
<li>
Academic Year: 2020-2020
</li>
<li>
Contact Number: 8390790935
</li>
<li>
Address: 911B,Baker Street
</li>
</ul>
</div>
</article>
</div>
</body>
</html>
This is the code to generate pdf file,
public function generateIDCards()
{
// $pdf = PDF::loadView('templates.idcard');
$pdf = \App::make('dompdf.wrapper');
$html = view('templates.idcard')->render();
$pdf->loadHTML($html);
return $pdf->download('card.pdf');
// return $html;
}
Any suggestions would be appreciated...
In your css just change the height to this:
.card
{
height: 400px;
width: 530px;
margin: 0 auto;
background: #ECECEC;
border-radius: 4px;
}
You have to set the Content Type to
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
Hope it helps. Cheers!
Related
Using fullPage.js (a jQuery scrolling menu), I have the following situation:
I have an unordered list - the source of which is an SQL database (using PHP to echo out).
There are only two items per page being echoed out.
At the top of the page, I have a simple Menu:
First Item
Second Item.
I want to link to the first and second items in the list.
Before the PHP, I have the following:
<a name="theList">
I have to set up .. but how do I target the different children within the list?
Baffling me -- if anyone could help, I'd very very thankful!
The correct way to use fullPage.js should be:
1 .Have a menu with data-menuanchor:
<ul id="menu">
<li data-menuanchor="theList1">First slide</li>
<li data-menuanchor="theList2">Second slide</li>
<li data-menuanchor="theList3">Third slide</li>
<li data-menuanchor="theList4">Fourth slide</li>
</ul>
2 .config with js: anchors: ['theList1', 'theList2', 'theList3', 'theList4'],
3 .add CSS rule to style
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
anchors: ['theList1', 'theList2', 'theList3', 'theList4'],
menu: '#menu',
slidesNavigation: true
});
#CHARSET "ISO-8859-1";
/* Reset CSS
* --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
a{
text-decoration:none;
}
table {
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
strong{
font-weight: bold;
}
ol,ul {
list-style: none;
margin:0;
padding:0;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
margin:0;
padding:0;
color:#444;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}
/* Custom CSS
* --------------------------------------- */
body{
font-family: arial,helvetica;
color: #333;
color: rgba(0,0,0,0.5);
}
.wrap{
margin-left: auto;
margin-right: auto;
width: 960px;
position: relative;
}
h1{
font-size: 6em;
}
p{
font-size: 2em;
}
.intro p{
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
.section{
text-align:center;
}
#menu li {
display:inline-block;
margin: 10px;
color: #000;
background:#fff;
background: rgba(255,255,255, 0.5);
-webkit-border-radius: 10px;
border-radius: 10px;
}
#menu li.active{
background:#666;
background: rgba(0,0,0, 0.5);
color: #fff;
}
#menu li a{
text-decoration:none;
color: #000;
}
#menu li.active a:hover{
color: #000;
}
#menu li:hover{
background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
padding: 9px 18px;
display:block;
}
#menu li.active a{
color: #fff;
}
#menu{
position:fixed;
top:0;
left:0;
height: 40px;
z-index: 70;
width: 100%;
padding: 0;
margin:0;
}
.twitter-share-button{
position: fixed;
z-index: 99;
right: 149px;
top: 9px;
}
#download{
margin: 10px 0 0 0;
padding: 15px 10px;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #49afcd;
background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -webkit-gradient(linear,0 0,0 100%,from( #5bc0de),to( #2f96b4));
background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
background-image: linear-gradient(top, #5bc0de, #2f96b4);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
vertical-align: middle;
cursor: pointer;
display: inline-block;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
#download a{
text-decoration:none;
color:#fff;
}
#download:hover{
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: #2F96B4;
background-position: 0 -15px;
-webkit-transition: background-position .1s linear;
-moz-transition: background-position .1s linear;
-ms-transition: background-position .1s linear;
-o-transition: background-position .1s linear;
transition: background-position .1s linear;
}
#infoMenu{
height: 20px;
color: #f2f2f2;
position:fixed;
z-index:70;
bottom:0;
width:100%;
text-align:right;
font-size:0.9em;
padding:8px 0 8px 0;
}
#infoMenu ul{
padding: 0 40px;
}
#infoMenu li a{
display: block;
margin: 0 22px 0 0;
color: #333;
}
#infoMenu li a:hover{
text-decoration:underline;
}
#infoMenu li{
display:inline-block;
position:relative;
}
#examplesList{
display:none;
background: #282828;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 20px;
float: left;
position: absolute;
bottom: 29px;
right: 0;
width:638px;
text-align:left;
}
#examplesList ul{
padding:0;
}
#examplesList ul li{
display:block;
margin: 5px 0;
}
#examplesList ul li a{
color: #BDBDBD;
margin:0;
}
#examplesList ul li a:hover{
color: #f2f2f2;
}
#examplesList .column{
float: left;
margin: 0 20px 0 0;
}
#examplesList h3{
color: #f2f2f2;
font-size: 1.2em;
margin: 0 0 15px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
padding: 0 0 5px 0;
}
/* Demos Menu
* --------------------------------------- */
#demosMenu{
position:fixed;
bottom: 10px;
right:10px;
z-index: 999;
}
<link href="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<ul id="menu">
<li data-menuanchor="theList1">First slide</li>
<li data-menuanchor="theList2">Second slide</li>
<li data-menuanchor="theList3">Third slide</li>
<li data-menuanchor="theList4">Fourth slide</li>
</ul>
<div id="fullpage">
<div class="section" id="section0">One</div>
<div class="section" id="section1">
<div class="slide">Two 1</div>
<div class="slide">Two 2</div>
</div>
<div class="section" id="section2">Three</div>
<div class="section" id="section3">Four</div>
</div>
I am new to Laravel. Facing some problem while integrating Laravel-Search. I am follow the below website and got some thing but not perfect.
Laravel_search
In wrote the query like this..
$json = '{
"query" : {
"match" : {
"name" : "apis"
}
}
}';
$params['explain'] = $json;
return $results = Es::search($params);
getting error as unreadable format. What ever i send through above it wil give the below error.
Error:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Whoops! There was an error.</title> <style>.cf:before, .cf:after {content: " ";display: table;} .cf:after {clear: both;} .cf {*zoom: 1;} body { font: 14px helvetica, arial, sans-serif; color: #2B2B2B; background-color: #D4D4D4; padding:0; margin: 0; max-height: 100%; } a { text-decoration: none; } .container{ height: 100%; width: 100%; position: fixed; margin: 0; padding: 0; left: 0; top: 0; } .branding { position: absolute; top: 10px; right: 20px; color: #777777; font-size: 10px; z-index: 100; } .branding a { color: #CD3F3F; } header { padding: 30px 20px; color: white; background: #272727; box-sizing: border-box; border-left: 5px solid #CD3F3F; } .exc-title { margin: 0; color: #616161; text-shadow: 0 1px 2px rgba(0, 0, 0, .1); } .exc-title-primary { color: #CD3F3F; } .exc-message { font-size: 32px; margin: 5px 0; word-wrap: break-word; } .stack-container { height: 100%; position: relative; } .details-container { height: 100%; overflow: auto; float: right; width: 70%; background: #DADADA; } .details { padding: 10px; padding-left: 5px; border-left: 5px solid rgba(0, 0, 0, .1); } .frames-container { height: 100%; overflow: auto; float: left; width: 30%; background: #FFF; } .frame { padding: 14px; background: #F3F3F3; border-right: 1px solid rgba(0, 0, 0, .2); cursor: pointer; } .frame.active { background-color: #4288CE; color: #F3F3F3; box-shadow: inset -2px 0 0 rgba(255, 255, 255, .1); text-shadow: 0 1px 0 rgba(0, 0, 0, .2); } .frame:not(.active):hover { background: #BEE9EA; }
How query know about the table name here. Where should i need to put the table name. help me out plz..
If you need an easy to use laravel package to talk to Elasticsearch, take a look at this one: https://github.com/freekmurze/searchindex
I'm having a problem with my CSS style sheet. I try inputting the values to the DIV CLASSES, but there is no effect. The style sheet worked fine on my other HTML website, but I'm using a common header and footer via PHP on this website and it seems like it's interfering with the CSS for some reason. I don't know if my coding has any fallacies in it, but from what I can see everything looks fine:
CSS STYLE SHEET
body {
background-color: #000;
font-family: Arial, Verdana;
color: #fff;
}
a:link {
color: #ff0;
text-decoration: none;
}
a:visited {
color: #ff0;
text-decoration: none;
}
a:hover {
color: #fff;
text-decoration: none;
}
a:active {
color: #000f;
text-decoration: none;
}
p {
text-align: justify;
font-size: 14px;
}
.container {
border: 1px solid #fff;
width: 820px;
height: 1350px;
padding: 10px;
}
.header {
background-image: url("/Images/CSS/logo.jpg");
background-position: center;
background-size: cover;
height: 20%;
width: 100%;
}
.logo {
background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
background: -o-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
background: linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
border: 0px solid #fff;
height: 90%;
width: 100%;
}
.logo h1 {
margin: 15px;
color: #ffa500;
float: right;
position: relative;
bottom: -160;
}
.logo p {
font-size: 12px;
margin: 15px;
color: #ffa500;
float: left;
position: relative;
bottom: -175;
}
.userbar {
width: 100%;
height: 10%;
background-color: #000;
border: 1px solid #fff;
padding: 5px;
.body {
border: 0px solid #fff;
width: 100%;
height: 70%;
}
.left {
border: 1px solid #fff;
float: left;
width: 250px;
height: 100%;
}
.right {
border: 0px solid #fff;
float: right;
width: 550px;
height: 100%;
}
.nav {
width: 100%;
border: 1px solid #fff;
margin-top: 15px;
}
.nav ul {
margin: 0px;
padding: 0px;
list-style-position: none;
list-style: none;
}
.nav li {
width: 85%;
margin: 15px;
color: #fff;
border-bottom: 1px dotted #fff;
}
.side {
margin-top: 25px;
color: #fff;
width: 100%;
border: 1px solid #fff;
}
.content {
width: 100%;
}
.content p {
padding: 10px;
color: #fff;
text-align: justify;
border-style: solid;
border-width: 0px;
}
.footer {
height: 10%;
width: 100%;
border: 1px solid #fff;
}
.footer p {
padding: 5px;
color: #fff;
text-align: center;
}
.pic {
padding: 10px;
margin: 10px;
}
.pic p {
width: 430px;
text-align: center;
font-size: 9px;
}
.pic1 {
float: left;
padding: 10px;
margin: 10px;
border: 1px solid #fff;
}
.pic1 p {
width: 170px;
text-align: center;
font-size: 9px;
}
.pic2 {
float: right;
margin: 10px;
padding: 10px;
border: 1px solid #fff;
}
.pic2 p {
width: 170px;
text-align: center;
font-size: 9px;
}
Index Page
Note that the Index page itself is not html. It's a PHP file and I'm using separate PHP files for the header and footer. This is just the page source to let you see the layout of my website.
<html>
<head>
<title></title>
<link rel ="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
</div>
<div class="userbar">
</div>
</div>
<div class="body">
<div class="left">
<div class="nav">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
</ul>
</div>
<div class="side">
<h3 align="center">News</h3>
</div>
</div>
<div class="right">
<div class="content"> </div><!----content----!>
</div><!----right----!>
<div class="footer">
</div>
</div><!----container----!>
</body>
</html>
I'm currently learning php by project I'am trying to implement a 3 column website. 1 column is the main column. Other two column is set to display:none. They appear onmouseover event, when pointer comes over twitter or facebook icon. how do I fit these columns in firefox alongside with chrome
here is a link http://slavesofdestiny.com/yenisite/
//style.css
.main-part h1{
font-weight: 500;
letter-spacing: 0.8px;
}
p, h1, a{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: rgba(255,255,255,0.75);
}
p{
font-size: 16px;
}
body{
background-attachment: fixed;
background-position: center;
background-color: black;
background-image: url(http://www.slavesofdestiny.com/imgs/sodarkaplan.jpg);
}
// navigator
.navigator{
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: black;
border: 2px solid white;
}
.header-image{
background-size: cover;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
height: auto;
}
/* Navigation Items */
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
ul {
border: 1px solid black;
font-size: 20px;
display: block;
background: rgba(0,0,0,1);
background: linear-gradient(top, rgba(7, 3, 7, 0.9) 100%, rgba(27, 30, 31, 0.9));
background: -moz-linear-gradient(top, rgba(7, 3, 7, 0.9) 100%, rgba(27, 30, 31, 0.9));
background: -webkit-linear-gradient(top, rgba(7, 3, 7, 0.9) 100%, rgba(27, 30, 31, 0.9));
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 2px;
border-radius: 5px;
list-style: none;
position: relative;
display: inline-table;
}
ul:after {
content: "";
clear: both;
display: block;
}
ul li {
display: block;
float: left;
}
ul li:hover {
border-radius: 10px;
background: rgba(95, 0, 0, 0.4);
background: linear-gradient(top, rgba(0,0,0, 0.4) 0%, rgba(95, 0, 0, 0.4) 45%);
background: -moz-linear-gradient(top, rgba(0,0,0, 0.4) 0%, rgba(95, 0, 0, 0.4) 45%);
background: -webkit-linear-gradient(top, rgba(0,0,0, 0.4) 0%, rgba(95, 0, 0, 0.4) 45%);
}
ul li:hover a {
color: rgba(255, 255, 255, 1);
}
ul li a {
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
}
.social-media{
padding: 0px;
padding-left: 3px;
padding-right: 3px;
padding-top: 4.7px;
padding-bottom: 4.7px;
}
/*Content Part*/
.body-part{
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 0px;
width: 1200;
min-height: 800px;
border-radius: 5px;
}
.container{
float: left;
position: relative;
text-align: center;
display: inline-block;
margin-top: -20px;
width: 800px;
min-height: 800px;
background-color: rgba(0,0,0,0.6);
padding: 0;
//border-radius: 10px;
}
#sideBarRight{
position: relative;
float: right;
width: 200px;
display: none;
vertical-align: top;
}
#sideBarLeft{
position: relative;
float: left;
width: 200px;
vertical-align: top;
}
.side-bar{
display: inline-block;
position: relative;
min-height: 50px;
vertical-align: top;
}
.main-part{
display: inline-block;
padding-top: 10px;
width: 780px;
min-height: 800px;
margin: auto;
padding-bottom: 10px;
}
.main-part div{
width: auto;
background-color:rgba(150,150,150,0.36);
border: 1px solid black;
//border-radius: 20px;
padding: 15px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
box-shadow: 8px 8px 5px #000000;
}
.main-part div img{
//max-height: 600px;
max-width: 800px;
}
.main-part h1{
padding: 10px;
}
.main-part p{
padding: 10px;
}
#facebook-div{
background-color: #ffffff;
display: none;
}
//index.php
<?php
?>
<body>
<div class="navigator">
<?php include 'header.php'; ?>
</div>
<div class="body-part" >
<div id="sideBarLeft" class="side-bar" style="float: left;">
<div id="facebook-div" style="float: left;">
<?php include 'leftSideBar.php'; ?>
</div>
</div>
<div class="container" onmouseover="document.getElementById('sideBarRight').style.display = 'none'; document.getElementById('facebook-div').style.display = 'none';">
<div class="main-part">
<?php include 'postSelect.php' ?>
</div>
<?php include 'footer.php';?>
</div>
<div id="sideBarRight" class="side-bar">
<?php include 'sidebar.php';?>
</div>
</div><!--end body-part-->
</body>
A couple things that might help:
Your <head> tag is inside your <body> tag as of right now. Especially when using templates, it's important to check your resulting html code. Take a look at this: http://html5.validator.nu/?doc=http%3A%2F%2Fslavesofdestiny.com%2Fyenisite%2Findex.php
Try position: absolute on your sidebars. If you give their parent a position:relative, you should be able to put them exactly where you want them with the top, left, and right style attributes.
I'm making a website in HTML, CSS, and PHP and the page goes way beyond the screen but there is no scroll bar provided by the browser (Safari 5.0.6 and Firefox 14.0.1 on Mac). Is it because I included the PHP? But shouldn't that be there before the page is rendered?
Here is a link: test website
My PHP syntax:
<div id="content">
<div class="wrapper">
<div id="home" class="alert">
Welcome to always4free©! To browse the classifieds, you must first either choose a location or have your location detected.
</div>
<?php include "res/pages/categories.php"; ?>
</div>
</div>
</div>
What is going on?
EDIT: Here is my CSS:
body {
background-image: url("http://always4free.org/site/images/bg.jpg");
background-size: cover;
font-family: "Mouse Memoirs",sans-serif;
}
.wrapper {
margin: 0 auto;
width: 850px;
}
#header {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
border-bottom: 3px solid green;
box-shadow: 0 2px 10px #888888;
height: 50px;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
#logo {
color: rgba(255, 255, 255, 0.7);
float: left;
font-family: "Wendy One",sans-serif;
font-size: 30px;
line-height: 50px;
width: 250px;
}
#logo a:hover {
color: #FFFFFF;
}
#nav {
float: right;
line-height: 50px;
width: 600px;
}
#nav a:first-child {
margin-left: 0;
}
#nav a:last-child {
margin-right: 0;
}
#nav a:link, #nav a:visited {
color: rgba(255, 255, 255, 0.9);
font-family: "Mouse Memoirs",sans-serif;
letter-spacing: 1px;
margin-left: 10px;
margin-right: 10px;
}
#nav a:hover {
border-bottom: 2px solid #FFFFFF;
color: #FFFFFF;
padding-bottom: 1px;
}
#nav a.detect {
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 2px 2px 2px 2px;
color: rgba(0, 0, 0, 0.7);
padding: 5px;
}
#nav a.detect:hover {
color: #000000;
}
#content {
font-family: "Mouse Memoirs",sans-serif;
letter-spacing: 1px;
margin-top: 70px;
}
.page {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
border: 1px solid green;
color: #FFFFFF;
font-size: 20px;
padding: 10px;
}
.alert {
background: none repeat scroll 0 0 #AD2E1D;
border: 1px solid #911E0F;
color: white;
font-size: 20px;
padding: 10px;
text-align: center;
}
#categories {
margin-top: 20px;
}
#categories h2 {
color: rgba(255, 255, 255, 0.7);
font-family: "Wendy One",sans-serif;
font-size: 26px;
}
#categories a:link, #categories a:visited {
background: none repeat scroll 0 0 white;
color: black;
padding: 3px;
}
#categories .block {
line-height: 35px;
}
You have all of your content wrapped inside an element of position: fixed;. The body is not able to retrieve the height of fixed or absolute children and is therefore set to an actual height of 0 - thus eliminating any need for scrolling.
If you move your #content element outside of the fixed header things should be working as expected.
Move your div with id content outside of your header div.
It will solve your problem.
Add a clearfix class with your .wrapper so that it have a height and then use:
.wrapper{
overflow: scroll;
}
add overflow: scroll; in your #header style and change position to relative.
#header {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
border-bottom: 3px solid green;
box-shadow: 0 2px 10px #888888;
height: 50px;
left: 0;
position: **relative**;
top: 0;
width: 100%;
**overflow: scroll;**
}