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.
Related
I am trying to create a dynamic website using PHP, but I have encountered a problem - all descendants of <nav>, <footer> and <header> are ignoring their class CSS formatting, but not class-specific CSS is taking effect on them. For example:
This formatting is not affecting elements inside <footer>:
footer section #main-footer-section
{
background-color: #444554;
height: 50px;
width: 100%;
}
<footer>
<section id="main-footer-section">
</section>
<section id="bottom-footer-section">
<p id="copyright-mark"><?php echo date("Y") ?>©</p>
</section>
</footer>
But this is affecting the <footer> contents:
footer section
{
background-color: #444554;
height: 50px;
width: 100%;
}
<footer>
<section id="main-footer-section">
</section>
<section id="bottom-footer-section">
<p id="copyright-mark"><?php echo date("Y") ?>©</p>
</section>
</footer>
Could anyone please advise if I'm doing something wrong?
Your id is attached to the footer so it's
footer section#main-footer-section
{
background-color: #444554;
height: 50px;
width: 100%;
}
Your code snippet is looking for Footer > Section > element with #main-footer-section instead of Footer > Section with #main-footer-section
Using it like that:
footer section #main-footer-section
would require a structure like
<footer>
<section>
<div id="main-footer-section">
</section>
</footer>
Every whitespace in CSS definitions stands for another level down.
Your structure would be matched by this:
footer section#main-footer-section { /* ... */ }
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 am trying to add '+' Symball in front of category navigation on left side
I am using magento 1.9.x
This code i fount in category-navigation.phtml
I want to know how <?php echo $_menu ?> this comes from?
<div class="block vertical-menu">
<div class="title-block" style="margin-bottom:0px;"><h4><?php echo $this->__($title) ?></h4></div>
<div class="block-content">
<ul id="content-navigation">
<?php echo $_menu ?>
</ul>
</div>
</div>
My suggestion would be to do it in CSS. You can use Ionicons or something similar.
The $_menu html is generated inside the block class, rather than using a phtml file. So, you could extend that block and customize it, but this can also be achieved using CSS without having to worry about extending the block.
An example would be the following:
Example HTML
<nav id="nav">
<ol>
<li>Plus Sign</li>
<li class="active">Minus Sign</li>
</ol>
</nav>
Example CSS - This requires Ionicons
ol {
list-style: none;
}
#nav li::before {
font-family: Ionicons;
content: '\f489';
padding-right: 10px;
}
#nav li.active::before {
content: '\f209';
}
JS Fiddle - A working sample
https://jsfiddle.net/adpro/5xbw80b1/
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;
}
Hi Is there any of you out there that is able to assist me on this. I'm experimenting with the fluid layout of bootstrap on my wordpress site. Apparently the isn't working properly. I created a .span 12 column and its not taking up the full width of the browser. Instead its width shrank. Is there a way around this?
Heres the experiment which i created using a custom page template
<?php
/*
Template Name: page-work
*/
?>
<?php get_header(); ?>
<h1><?php the_title(); ?></h1>
<style type="text/css">
.span12{
background:black;
color:white;
padding:20px 0;
text-align:center;
margin-top:15px;
}
.span6{
background:blue;
color:white;
padding:20px 0;
text-align:center;
margin-top:15px;
}
</style>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">span 12</div>
</div>
<div class="row-fluid">
<div class="span6">span 6</div>
<div class="span6">span 6</div>
</div>
</div>
This is because bootstrap has a fixed width of span12 as
.span12 {
width: 1170px;
}
for bigger screens.
If you still want, you can try this:
#media (min-width: 1200px) {
.span12 {
width: 100%;
}
}
Always create a child css file and put that below the bootstrap file.
I would recommend upgrading to Bootstrap 3 as it handles fluid-containers in a much better way and you wouldn't have this problem in the first place.
.span12 becomes col-xx-12 (xx is either xs, sm, md and lg...read up on that!) and has a width of 100%. BS3 uses percentage widths rather than fixed widths as mentioned in the answer above. It's also not too difficult to move from BS2 to 3.
http://getbootstrap.com/ - download here
http://getbootstrap.com/getting-started/ - documentation
As a general rule, wordpress won't really change how your website looks. It's the styles you put around it so Wordpress in this case is irrelevant.