Ok, ive spent a few days trying to figure out why this isnt working, and so far Google has gave me nothing of use. Maybe there is a built in rule that I just am not aware of. I hate posting on sites like this with questions that could be trivial but ive exhausted my own efforts.
So I have placed a background in my CSS and it works on the alotted tag, but it is adding some padding that is not specified. Trying to change it does nothing. The background for the body stretches the duration of the screen but not this one.
Here is where the header is being included.
<?php
require_once 'classes/Membership.php';
$membership = new Membership();
$loggedin = $membership->confirm_loggedin();
if(!$loggedin){
ob_start();
header("Location: http://lolteamrecruiter.com/login.php");
ob_end_flush();
}
?>
<!DOCTYPE html>
<?php
include # 'header.php';
?>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<div id="Login">
<!--LOGOUT BUTTON -->
<p>
Results Page
</p>
</div>
</body>
</html>
Here is the php file being included.
<link href="css/header.css" rel="stylesheet" type="text/css" />
<div id="header">
<img src="css/images/angel.png" height="40px" width="20px">
<?php
require_once 'classes/Membership.php';
$membership = new Membership();
$loggedin = $membership->confirm_loggedin();
if($loggedin){
echo ' <div id="header-right-account">
<ul id="nav">
<li>My Account
<ul>
<li>Edit</li>
<li>Tacos</li>
<li>Burritos</li>
<li>Log Out</li>
</ul>
</li>
</ul>
</div>';
}else{
echo '<div id="header-right">Log In</div>';
}
?>
</div>
This is the css file thats applying the background
#header{
background-image : url(images/black.png);
background-repeat : no-repeat;
background-size: 100% 100%;
background-attachment : fixed;
background-origin:border-box;
margin: 0 auto;
padding: 0;
top:0;
}
The site to see this is at http://lolteamrecruiter.com/
Do you mean the spacing around the logo? Just add display:block to the image.
Edit
Okay, add margin:0 to the body.
Your image is aligned to the baseline by default, which means that gap below it is space for the lower part of letters like p, g, j, etc.
Try this:
#header a img { vertical-align: middle; }
body {
background-image : url(images/login-box-backg2.png) no-repeat;
background-size: 100% 100%;
background-attachment : fixed;
margin: 0;
padding: 0;
}
Related
I have this CSS for FULL Background image. Now i want to pass PHP variable to this URL to change the background image dynamically. Plz let me know . my codes are..
.imgback {
padding-top:140px;
height:100vh;
min-height:400px;
background-size:cover;
background-image:url("../img/picmax/6.jpg");
}
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
You can use Inline or internal css as follow:
Internal
<style>
div { background-image: url(<?php echo $imageURL;?>); }
</style>
Inline
<div style="background-image:url(<?php echo $imageUrl?>) no-repeat center center fixed">
</div>
Reference from Change css background-image with php
you can use php variable in your style code but must need to write css code after php variable . something like this
<?php
$bg_image = '../img/picmax/6.jpg'; // this is static value for test
?>
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
and add style after define php value then you can use this code
<style>
.imgback {
padding-top: 140px;
height: 100vh;
min-height: 400px;
background-size: cover;
background-image: url("<?=$bg_image?>");
}
</style>
of you can use this php value in your html code
<?php
$bg_image = '../img/picmax/6.jpg';
?>
<section class="imgback" style="background-image: url('<?php echo $bg_image ?>')">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
hope it will help you.
You can simply load a data from database and place it inside everywhere you like.
`<?php
$a = "6.jpg";
?>`
then insert it into your css
.imgback {
padding-top:140px;
height:100vh;
min-height:400px;
background-size:cover;
background-image:url("../img/picmax/");
}
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
But that won't be good enough because php only runs once on every refresh or load. (you can use jQuery) or you better use JavaScript for these type of works as because they are triggered by events so you can change images without refreshing the page
I've performed a query from a mySQL database and the results are returned correctly. I have this formatted with responsive CSS columns - three on a desktop and as the screen width decreases, the number of columns decrease. EZ PZ. HOWEVER, I want all the results from a single row to stay together and not get split between the columns. What happens currently is that I may have a Category and Name at the end of a column and the Address and other info jumps to the top of the next column. Is there any way to keep the info for each row together?
I'm a total noob at PHP and CSS, so please feel free to critique everything so I can learn. EDIT: Added HTML
The PHP: (EDITED back to original since it was working better)
<?php
$mysqli = NEW MySQLi ( 'localhost', 'user', 'password', 'db' );
$resultSet = $mysqli->query("
SELECT Category, Name, Address, City, State, Zip, Phone, Website
FROM Table
WHERE ColumnName = 'SomeCity'
");
if($resultSet->num_rows != 0) {
while($rows = $resultSet->fetch_assoc())
{
$Category = $rows['Category'];
$Name = $rows['Name'];
$Address = $rows['Address'];
$City = $rows['City'];
$State = $rows['State'];
$Zip = $rows['Zip'];
$Phone = $rows['Phone'];
$Website = $rows['Website'];
echo "<h1>$Category</h1><p>$Name<br>$Address $City $State $Zip<br>$Phone<br>$Website</p>";
}
}
?>
The CSS:
#listings {
-webkit-columns: 3 200px;
-moz-columns: 3 200px;
columns: 3 200px;
-webkit-column-gap: 3em;
-moz-column-gap: 3em;
column-gap: 3em;
-webkit-column-rule: 1px dotted #ddd;
-moz-column-rule: 1px dotted #ddd;
column-rule: 1px dotted #ddd;
-moz-column-fill: auto;
column-fill: auto;
}
#media (min-width: 500px) {
listings {
height: 350px;
}
}
The HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>TITLE</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="homepage">
<div id="page-wrapper">
<!-- Header -->
<div id="header-wrapper">
<header id="header" class="container">
<!-- Logo -->
<div id="logo">
<h1><img src="images/logo.png" /></h1>
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li>Home</li>
<li class="current">Page</li>
<li>Page</li>
</ul>
</nav>
</header>
</div>
<!-- Main -->
<div id="main-wrapper">
<div class="container">
<h3>Listings</h3>
<div id="listings">
<?php require_once('my-php-listings.php'); ?>
</div>
</div>
</div>
<!-- Footer -->
</div>
<!-- Scripts -->
</body>
</html>
Instead of using <pre>, put each record in its own <div>. Remove your height of 350px from your CSS unless you know for fact that each record is no more than 350px tall. You can then assign it a class and even go as far as adding a unique identifier as you loop through the records if you need further control over one or more specific boxes.
I would also recommend wrapping each record in its own <div> and applying the style display: inline-block. This will ensure that the blocks do not wrap over columns.
If you're still having issues after making the above changes, try also applying the break-inside CSS property to the <div> record elements:
div.record-class {
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
}
i would to create a pdf file from html with mpdf library. i would to set a background image just to 2'nd page of rendered pdf(not all pages). i use the following code:
$mpdf=new mPDF('');
$html = '
<body>
<style>
#page {
background: url("../mpdf60/bg1.jpg") 50% 0 no-repeat;
}
</style>
<div style="margin-bottom:50px"> </div>
<div align="center" style=" margin-bottom:350px"><img src="../mpdf60/pdffirst1.jpg" height="100" width="190" alt=""></div>
<pagebreak />
<div>
</div>
</body>';
in this code the background image set on all pages of rendered pdf(with #page selector).
how can i set the background image just for one page(2'nd page)? thanks...
According to the documentation, mPDF supports named #page selectors, so you could do this:
<style>
#page second {
background: url("../mpdf60/bg1.jpg") 50% 0 no-repeat;
}
</style>
and then:
div.second {
page: second;
}
and then your second page should be within a div with a second class. Look at the example given at the link with Chapter.
I am developing a website and including two menus into a Home page. The Home page, and both menus have the extension .php. I am testing locally on Apache Server.
The issue: One of my menus, which is a top navigation bar, displays correctly on my local server but its menu items / links are not clickable and do not show the rollover effect. This is ONLY when I load the Home page with the menu included via PHP.
When I load the menu page itself (still on my local server), the issue is not present, my menu displays and works fine, including the links.
Please see the code below:
Home Page
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Home</title>
<!-- various css imports, removed for readability -->
</head>
<body id="home">
<?php include('top-bar.php'); ?>
<!-- Container div -->
<div id="container">
<?php include('menu.php'); ?>
<!-- Container div -->
</div>
</body>
</html>
Menu bar
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- various css imports, removed for readability -->
<title>Topbar</title>
</head>
<body id="home">
<div id="headerbar">
<!-- Centered container -->
<div id="container">
<!-- Top bar -->
<div id="header">
<div id="maintitle">
<span style="color: #499DF5">My</span><span style="color: #FFFFFF"> Name</span> </div>
<!-- Second menu bar -->
<div id="menutop">
<ul>
<li id="contactme" title="Write me an email"><a href='#'><span>Contact me</span></a></li>
<li class="last" id="vcf"><a href="#" onClick="MyWindow=window.open('contact-card-popup.html','MyWindow','width=300,height=150'); return false;" title="Download my contact card (.vcf or .csv)">Download
contact card</a></li>
<li class="last" style="float: right;" id="googleplus"><a target="_blank" title="Follow me on Google+" href="https://plus.google.com/u/0/114402922247766544960/posts">
<i class="fa fa-google-plus fa-fw"></i></a></li>
<li style="float: right;" id="linkedin"><a target="_blank" title="View my LinkedIn profile" href="http://www.linkedin.com/in/myprofile">
<i class="fa fa-linkedin fa-fw"></i></a></li>
<li style="float: right;" id="visualize.me"> <a target="_blank" href='http://vizualize.me/myprofile?r=myprofile' title='View my infographic resume on Vizualize.me'><span style="font-weight:bold">Visualize.me</span></a></li>
</ul>
</div> <!-- End Second menu bar -->
<div id="jobtitle">Jobtitle</div>
<!-- End header div -->
</div>
<!-- End Centered container -->
</div>
<!-- End headerbar div -->
</div>
</body>
</html>
And CSS:
/* Layout
-----------------------------------------------------------------------------*/
body {
}
#container {
width:1020px;
position:relative;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
}
#headerbar{
width:100%;
min-width:500px;
height:130px;
position:absolute;
background: #414141;
}
#menutop {
min-width:500px;
width:1020px;
position:absolute;
margin-top:20px;
}
#wrapper {
clear:both;
height:900px;
width:1020px;
position:relative;
margin: 0 0 0 -25px;
}
/* Top menu: header
-----------------------------------------------------------------------------*/
#header {
font-family:'Open Sans', sans serif;
}
#maintitle {
font-weight:bold;
font-size:34px;
width:250px;
height:40px;
min-height:60px;
position:relative;
margin-left:40px;
margin-top:25px;
}
#jobtitle {
color: #FFFFFF;
font-size: 14px;
width: 230px;
height: 25px;
position: absolute;
margin-left: 270px;
margin-top: 9px;
left: 16px;
top: 36px;
}
I tried replacing my php include
<?php include('top-bar.php'); ?>
with the link relative to the root:
<?php include($_SERVER['DOCUMENT_ROOT']."/my-website/top-bar.php"); ?>
This did not change anything.
I also validated against W3C, just in case it would throw any obvious errors, which it did not.
Any ideas on why the PHP menu works in standalone but not when included? Thank you.
Edit:
On a good suggestion of Moshe I updated the JSFiddle he created. Since it seems I cannot use several files in there, I put the code of the top menu inside the home page, where the php import is performed. Doing so clearly makes the links in the menu non-working so it sounds like a CSS issue. I however do not see where the issue is.
http://jsfiddle.net/0ows5vym/4/
And this is the menu only, working fine in standalone: http://jsfiddle.net/fdbvwL3t/
Note: Please diregard the icons not displayed at the far right of the menu, they are based on other imports I cannot easily reproduce here. That part works fine locally.
You would use dirname(FILE) to get current directory.
try using
include(dirname(__FILE__). "/my-website/top-bar.php")
instead of $_SERVER['DOCUMENT_ROOT']
FILE constant will give you absolute path to current file
and dirname(FILE) to get the directory of current included file
In which file are you trying to load your php file?
if it is in your index.php (probably),
then you need to take in account your path facing the file where you have it
lets suppose that:
you have a absolute path for your index.php like
/var/www/html/thisismywebsite/index.php
and your file is in
/var/www/html/thisismywebsite/project/someinnerfolder/topbar.php
the above would not solve it.
Instead, you may opt for a solution like
<?php
define('BASEPATH', dirname(__FILE__) . "/");
include(BASEPATH . "project/someinnerfolder/topbar.php");
Just remember, the includes must be relative to the entry point of your application, so your include must be relative to where you start your app.
BONUS:
Don't start all your files with the tag, and so on, since it will give you issues later on. rather, opt to use a master to keep this kind of html
I finally got it. Playing with the JsFiddle here: http://jsfiddle.net/0ows5vym/4/ put me on the right track.
I have a "container" element that was called twice, once in my php menu and then again in the main page. I made the mistake of giving that container a unique ID where it should be a class, if I want to be able to call it several times.
Replacing the container "id" with "class" fixes it, cf here. http://jsfiddle.net/0ows5vym/6/
<!-- Container div -->
<div class="container">
<?php include('menu.php'); ?>
<!-- Container div -->
</div>
Moshe - thank you for letting me know about JsFiddle. I like that tool. Also your suggestion helped me find the answer.
I have a popup window that with the following source code ("likes.php"):
<!DOCTYPE html>
<html>
<head>
<title>Like</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<ol>
<?php for($i=0;$i<500;$i++){ ?>
<li><p><?php echo $i ?></p></li>
<?php } ?>
</ol>
</body>
</html>
Now the problem is that although all the paragraphs are created, I can't see them, because there is no scrollbar. How can I attach a scrollbar to my page?
Link to printscreen
It is working on chrome, but not in firefox IF it comes in a popup window (other file calls window.open("likes.php"). Works in both browsers in regular windows.
Use the css overflow property. Add this to your <head> tag:
<style type="text/css">
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.scroller {
overflow: scroll;
padding: 5px;
height: 100%;
}
</style>
To specifically add a horizontal or vertical scrollbar, use overflow-x or overflow-y, respectively.
You'll also want to fix the close tag of your <li> element, and wrap it in a proper container, like this
<div class="scroller">
<ul>
<?php for($i=0;$i<500;$i++)
echo "<li>".$i."</li>";
?>
</ul>
</div>
To control overflow, you generally need to use the CSS overflow property
overflow: scroll
as stated by p.s.w.g., but you would never need to apply this to the whole body like (s)he suggests. The browser should add a scrollbar to the full page on it's own if your code is formatted properly.
The current issue is likely caused by your not closing the second <li> tag and by the PHP being improperly formatted. You don't need a break at the end of each line. The reason the lines aren't breaking is that you haven't enclosed the <li> elements inside an <ol> or <ul>. Also, putting the beginning of your if statement, the filler, and the end inside separate php tags will just confuse the computer. Instead use:
<?php
echo "<ul>";
for( $i=0; $i<500; $i++) {
echo "<li>" . $i . "</li>";
}
echo "</ul>";
?>