how to fix header and footer in php file - php

I am Developing a code using php . In which I am importing two files (header.php and footer.php) in another php file index.php.
Now I want that header.php and footer.php should be fixed while scrolling horizontally. can you suggest me the code. I am using the following code
Header.php
code here
footer.php
code here
index.php
<?php include("header.php"); ?>
welcome to index file
welcome to index file
welcome to index file
<?php include("footer.php"); ?>
In this file index.php, I want that header and footer should be fixed while scrolling horizontally and others css should also not be disturbed.

try this.,
<div id="header">
<?PHP include_once('header.php');?>
</div>
<div id="wrap">
welcome to index file
</div>
<div id="footer">
<?PHP include_once('foo.php');?>
</div>
css:
#header{position:fixed;top:0px;}
#footer{position:fixed;bottom:0px;}
or
header.php
<div id ="header"></div><div id="content">
footer.php
</div><div id="footer"></div>
index.php
<?PHP include_once('header.php');?>
content here.,
<?PHP include_once('footer.php');?>

Your solucion is ok.
only i recomend use something like this:
<div id="header">
<?PHP include_once('header.php');?>
</div>
<div id="wrap">
here is my html content
</div>
<div id="footer">
<?PHP include_once('foo.php');?>
</div>
the use of include_once is for not repeat the include of some file
and with a good css obtains a excelent layout

use HTML5 and use include_once
<header>
<?PHP include_once('header.php');?>
</header>
<div id="wrap">
here is my html content
</div>
<footer>
<?PHP include_once('foo.php');?>
</footer>
Here is just a sample FIDDLE DEMO
html,body{
margin:0;padding:0;
}
header{
background:Green;
height:50px;
}
footer{
position:absolute;
width:100%;
bottom:0;
background:Red;
height:50px;
}

In your css, just put the following attribute:
position:fixed; and that should do the trick.

Related

How can I apply CSS Style to my second page [about.php]?

My File names:
1.) about.php
2.) styles.css
The same stylesheet is also applied to index.php .
I want to style the section part of the page. I tried it by styling the [Eg.], .section-info{color:#555;}
but it didn't helped. Also should I change the stylesheet name to styles.php?
Thanks In Advance.
<?php
/* Website Header */
include ("include/header.php");
?>
<!-- Website Page-2 Main Content -->
<div class="wrapper">
<section>
<div class="section-info">
<h2>About Us</h2>
<p>blah...blah...bllah....</p>
</div>
</section>
</div>
<?php
/* Website Footer */
include ("include/footer.php");
?>
Try to give it different class or inline style.
I had a similar problem. I created a function here which I use.
Then I use $page = getPage("ab") which would return about and then you can check what page is in use using the below:
<?php
$page = getPage("ab");
if ($page == "about") { ?>
<style type="text/css">
.section-info {
background: #f00;
}
</style>
<?php } ?>
Put this code inside the <head> of your about.php page. This will apply whatever code you want to that page.

PHP Include slideshow—not lining up, simple css answer I'm sure

I have simple slideshow on my home page as a php include. It shows up, but it seems to be floating up to the top of the page, and not falling in line with all of the other includes, ie, header, menu, etc. In addition, the image isn't lined up with the arrows. Here is where it lives:
http://www.starhilldesignstudio.com/adventure-suites/index-test.php
And here is the slideshow solo (arrows line up):
http://www.starhilldesignstudio.com/adventure-suites/slideshow-home.php
My html code:
<div id="container">
<div id="header">
<?php include 'menu.php'; ?>
</div>
<div id="mainContent" style="position:relative; z-index:1;">
<div class="center margin-top "><?php include 'slideshow-home.php'; ?></div>
<?php include 'home-blurb.php'; ?>
<?php include 'home-list.php'; ?>
<?php include 'bottom-stripe.php'; ?>
<div id="footer2">
<?php include 'footer.php'; ?>
</div>
</div>
</div>
THANKS!!!
Looks like a misplaced include, place your include function where you wanted to put your file to.
Example you wanted to put it before your content in between your header and footer:
include "header.php"
include "slider.php"
include "content.php"
include "footer.php"
Let us know if this is not the case.
<div id="container">
<div id="header">
<?php include 'menu.php'; ?>
</div>
<div id="mainContent" style="position:relative; z-index:1;">
<!-- Add this... -->
<div style="clear:both;padding-bottom:10px"></div>
<!--<div class="clear"></div>consider making the above style into a class.-->
<div class="center margin-top "><?php include 'slideshow-home.php'; ?></div>
<?php include 'home-blurb.php'; ?>
<?php include 'home-list.php'; ?>
<?php include 'bottom-stripe.php'; ?>
<div id="footer2">
<?php include 'footer.php'; ?>
</div>
</div>
</div>

php included navigation menu not working

I have a php page that has many includes. The whole page runs fine, but for my navigation bar, it does not open any page when I click on it. Please, what is missing here. Any help will be appreciated. many thanks
Here are my codes for the includes
<div id='cssmenu'>
<ul>
<li class='active'><span>Home</span></li>
<li><span>About Us</span></li>
<li><span>Packages</span></li>
<li><span>Partners</span></li>
<li><span>Gallery</span></li>
<li class='last'><span>Contact Us</span></li>
</ul>
</div>
And here is my main page code:
<body>
<div id="wrapper">
<div>
<img src="images/banner.png" width="940" height="200" />
</div>
<?php include('includes/nav.php'); ?>
<?php include('includes/slider.php'); ?>
<?php include('includes/nav.php'); ?>
<?php include('includes/contents.php'); ?>
<?php include('includes/sidebar.php'); ?>
<?php include('includes/footer.php'); ?>
</div> <!-- End #wrapper -->
</body>
Not sure of your file structure, but try removing the '../' on all you links
Change this:
<li class='active'><span>Home</span></li>
to this:
<li class='active'><span>Home</span></li>
Take the ../ out of your path.
When you include the nav.htm to your main page it acts as if it is in the main folder
Therefore if you use '../' it won't find it.

Full Width colour sections but not full width page content

I am using Bootstrap but under the roots.io wordpress template using a 'wrapperless theme'
i am trying to achieve this http://roots.io/ - where there are sections of colour but the page content itself isn't full width.
the answer I have been given is to make the container class 100% - but this just makes all the content full width.
Im really stuck and ive been trying to figure this out for hours. - I know that sounds noobish and it is, but I can't get past this point.
all the page templates take their its style from base.php, code here
<?php get_template_part('templates/head'); ?>
<body <?php body_class(); ?>>
<!--[if lt IE 8]><div class="alert alert-warning"><?php _e('You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.', 'roots'); ?></div><![endif]-->
<?php
do_action('get_header');
// Use Bootstrap's navbar if enabled in config.php
if (current_theme_supports('bootstrap-top-navbar')) {
get_template_part('templates/header-top-navbar');
} else {
get_template_part('templates/header');
}
?>
<div class="wrap container" role="document">
<div class="content row">
<div class="main <?php echo roots_main_class(); ?>" role="main">
<?php include roots_template_path(); ?>
</div><!-- /.main -->
<?php if (roots_display_sidebar()) : ?>
<aside class="sidebar <?php echo roots_sidebar_class(); ?>" role="complementary">
<?php include roots_sidebar_path(); ?>
</aside><!-- /.sidebar -->
<?php endif; ?>
</div><!-- /.content -->
</div><!-- /.wrap -->
<?php get_template_part('templates/footer'); ?>
</body>
</html>
so Im just not sure how to get past it in any of the page templates
About the first part of your question: "100% width colored parts".
Cause Bootstrap use the box-sizing: border-box model every html-element gets 100% width of its parent by default. So wrap your .container div's in other element (div, header, etc). This wrapper is a direct child of the body and gets 100% width. See: http://bootply.com/87196
<header role="banner" class="banner">
<div class="container" style="background-color:red;">
Header example
</div>
</header>
<div style="background-color:blue;">Elements get 100% width by default</div>
The second part about your page templates. The code you show use the get_template_part(). This function is a core function of WordPress. See http://codex.wordpress.org/Function_Reference/get_template_part#Using_loop.php_in_child_themes. You will find where your templates should be located.
But i think read http://roots.io/roots-101/#theme-templates first.
Thank you, I had a few solutions offered to me yesterday also, in case anyone else looks at this.
my own was simply to remove the .container class from the base.php file. - this just stopped the content of every page being constrained in a container by default. - this way I was able to add sections to the page at full browser width, and add .container inside them to constrain the actual content.
lines 16 and 17 of original base.php
<div class="wrap <?php if ( ! is_front_page() ): ?>container<?php endif; ?>" role="document">
<div class="content <?php if ( ! is_front_page() ): ?>row<?php endif; ?>">
In app.less
.home .main {
padding: 0;
}
Then add your sections like so:
<section class="semantic-section-class">
<div class="container">
<!-- your content -->
</div>
</section>

Php different images in every page

I am designing my own site. First I created a template with header.php and footer.php I put them in the includes folder. So, everytime I am going to make a new page like "about page" all I have to do is to call them using the code below:
<body>
<?php include("includes/header.php"); ?>
<?php include("includes/footer.php"); ?>
</body>
</html>
Here is the code in my header.php
<div id="headwrapper">
<header>
<div id="logo"><img src="images/adlogo.png"/></div>
<div id="homefeature">622x82</div>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>portfolio</li>
<li>Blogs</li>
<li>Contact</li>
</ul>
</div>
</header>
</div><!--end of headwrapper-->
But my index.php and my about page have the same header image. Is there a way or code that can accomplish the work for different header images for every page? Example on index.php I want to have image1 and to my about page I want to have image2. That's all thank you by the way I am not using a wordpress my site is not a wordpress.
Another solution.
In header.php you call function $_SERVER['PHP_SELF'] for get page name and then selected image for that page. You could modify like this
<?php
$imageName = "";
if($_SERVER['PHP_SELF'] == "index.php")
{
$imageName = "images/1.png";
}
elseif($_SERVER['PHP_SELF'] == "aboutus.php")
{
$imageName = "images/2.png";
}
?>
<div id="headwrapper">
<header>
<div id="logo"><img src="'".<?=$imageName?>."'"/></div>
<div id="homefeature">622x82</div>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>portfolio</li>
<li>Blogs</li>
<li>Contact</li>
</ul>
</div>
</header>
</div><!--end of headwrapper-->
Given your structure, I think you can set your header file like this:
<body>
<?php $header_image = "about_us_header.jpg"; ?>
<?php include("includes/header.php"); ?>
<?php include("includes/footer.php"); ?>
</body>
and reference the variable in your header:
<div id="headwrapper">
<header style="background: url(<?php echo $header_image; ?>);">
But wait I thought of a better way
you can do it in css like this:
<body class="aboutus">
<?php include("includes/header.php"); ?>
<?php include("includes/footer.php"); ?>
</body>
and in your css stylesheet:
body.aboutus header {
background: url(whatever.jpg);
}

Categories