I am developing a website in php. I have a navigation.php page, a design.php page and a footer.php page. All the three pages have their own internal CSS. I am adding all the three pages in index.php using include command.
Something like this:
index.php :
<?php
include 'navigation.php';
include 'design.php';
include 'footer.php';
?>
But as some of the html elements in navigation.php and footer.php are identical like unordered lists ul or li but their CSS is different in both the files. But when I open index.php page some of the parts of footer.php get messed up due to different CSS for same html elements in navigation.php. But when I open them separately no problem is there.
Pages are like this:
navigation.php:
<style>
....css...
</style>
<body>
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>Log In</li>
</ul>
</body>
footer.php
<style>
...css...
</style>
<body>
<ul>
<li>Privacy Policy</li>
<li>Report Bug</li>
</ul>
</body>
This is just sample code. How can I solve this problem?
I dnt know what is inside your design.php but for index.php try this
<?php include_once( 'header.php');?>
<html lang="en">
<head>
<title>index.php</title>
</head>
<body>
..something....
</body>
<?php include_once('footer.php');?>
</html>
It looks like you are redefining the same styles in your various php files. Try to set a class on the ul element and define your styles for ul, e.g. likle this
header.php
<style>
.header {
color: red;
}
</style>
<ul class="header">
<li>blabla</li>
<li>bla</li>
</ul>
footer.php
<style>
.footer {
color: blue;
}
</style>
<ul class="footer">
<li>aaa</li>
<li>bbb</li>
</ul>
You should also remove the <body> tags from the includes. You can have only one body tag in the html page.
Related
I have this code for a dynamic menu using php:
menu.php:
<?php
// Get current page file name
$page = basename($_SERVER["PHP_SELF"]);
?>
<?php include "templates/header.php"; ?>
<?php include "templates/footer.php"; ?>
templates/header.php:
<h1>A Library</h1>
<div id="navigation">
<ul>
<li><a href="index.php" <?php if ($page == "index.php") echo 'class="current"' ?>>Products</a></li>
<li><a href="resume.php" <?php if ($page == "resume.php") echo 'class="current"' ?>>Resume</a></li>
<li><a href="photography.php" <?php if ($page == "photography.php") echo 'class="current"' ?>>Photography</a></li>
<li><a href="about.php" <?php if ($page == "about.php") echo 'class="current"' ?>>About</a></li>
<li><a href="contact.php" <?php if ($page == "contact.php") echo 'class="current"' ?>>Contact</a></li>
</ul>
</div>
</body>
</html>
templates/footer.php:
</body>
</html>
menu.php and file templates are in the same directory
This code creates a simple and small sized menu.How could i make this a bit better usng css?
I wrote this css code but i have no idea how to connect it with the menu:
#navigation ul li a.current {
background-color: #FFF;
border-bottom: 1px solid #FFF;
}
there are multiple ways to include CSS, in your case the simplest way would be to create a lets say style.css and include it in your main template inside the tags: <link href=/path/to/yourcss/style.css rel=stylesheet type='text/css'> this way it will affect all of your dynamically included CSS and it should be class locked for interchangeable components.
Example:
<html>
<head>
... other meta tags
<link href=/path/to/yourcss/style.css rel=stylesheet type='text/css'>
</head>
<body>
your php includes for content
</body>
</html>
you should use <link> Tag to include css file with html / php
<head>
<link rel='stylesheet' type='text/css' href='CSS/main.css'>
</head>
I was wondering how I could make my footer stick to the bottom of the page, no matter how long the page is. I'd include my footer.php file by using include('footer.php') at the bottom of every page. I have already searched for a good answer but nothing I found works because every tutorial assumes you make your footer on every single page instead of including it. Does anyone know what CSS i'd have to use to be able to do this?
Footer HTML:
<html>
<body>
<footer>This is my footer</footer>
</body>
</html>
Index.php example:
<html>
<head>
<?php
include('nav.php');
?>
</head>
<body>
<p>Blah blah blah</p>
<?php
include('footer.php')
?>
</body>
</html>
Thank you
I think your footer.php file should contain only footer element and its content:
<footer>...</footer>
then add to your css:
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; // or any suitable height
display: block;
}
html {
position: relative;
min-height: 100%;
}
I'm not sure, but you may also need to include white space at the bottom of your page content to avoid some of it being blocked by your footer.
I don't think you can close and open the body and the html twice, when you do it like this that's how the html page look like:
<html>
<head>
<?php
include('nav.php');
?>
</head>
<body>
<p>Blah blah blah</p>
<html>
<body>
<footer>This is my footer</footer>
</body>
</html>
</body>
</html>
so you should make the footer like this:
<footer>This is my footer</footer>
</body>
</html>
and your html page like this:
<html>
<head>
<?php
include('nav.php');
?>
</head>
<body>
<p>Blah blah blah</p>
<?php
include('footer.php')
?>
And if I understood you correctly your css should contain position:fixed as you can read here: https://www.w3schools.com/cssref/pr_class_position.asp
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body >
<?php
echo '<ul id="menu">
<li>first</li>
<li>second</li>
<li>third</li>
</ul>';
?>
</body>
</html>
This list.php is separate file.i have included this in my pages and trying to highlight the currentpage clicked using a:active but it is not working..help me out in this
<div class= "main-menu" id= "main-menu">
<?php include 'includes/list.php';?>
</div>
a:active is the state when you click on the link. (http://www.w3schools.com/cssref/sel_active.asp)
a:visited is the state if you clicked on the link before. (http://www.w3schools.com/cssref/sel_visited.asp)
You can add a class ("current" in this example) to highlight your current link
<li>first</li>
And with css:
.current {
color: yellow;
}
If you can use jquery, then you can use this solution:
The js script should be common in all the pages i.e. first.php, second.php,etc.
Below is the code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<style>
.active{ color:yellow; }
</style>
<body >
<?php
echo '<ul id="menu">
<li>first</li>
<li>second</li>
<li>third</li>
</ul>';
?>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul#menu li a').click(function() {
$('ul#menu li a').removeClass('active');
$(this).addClass('active');
});
});
</script>
</body>
</html>
Hope, this will help you.
i found your problem
in your li tag you should check anchor tag and check first.php page actually exists or not
it means : href="../first.php" that is your solution
but your code is like this means first.php not exists thats why the css not working properly
first
i hope you understand what i actually told you
I am working on an established website which has many problems in it. I am trying to incorporate a new navbar that will be coded in a 'header.php' file. I want to call it in the index.php and other pages using <?php include('header.php') ?> but there are differences in the pages and it needs the header.php to be dynamic. I want the header.php to have some slight changes when called by a specific page. How can I dynamically change the header.php file depending on what page called it?
This is my code:
HEADER.PHP
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/angel-header.css">
<!-- RENAME THIS CSS FILE APPROPRIATELY -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body class="m-price_update price_starway vb lang-en webp">
<header class="angelmod-site-header">
<div class="angelmod-wrapper">
<a href="#">
<img src="img/logo_sb.png" alt="Small Builders">
</a>
<nav class="angelmod-site-nav">
<ul class="angelmod-nav-list">
<li>Home
</li>
<li>Products
</li>
<li>Signup
</li>
<li>Login
</li>
</ul>
</nav>
<div class="angel-mod-navbtn">
<div class="angel-mod-navbtn-bars"></div>
<div class="angel-mod-navbtn-bars"></div>
<div class="angel-mod-navbtn-bars"></div>
</div>
</div>
<script src="js/angel-header.js"></script>
<!-- RENAME THIS JS FILE APPROPRIATELY -->
</header>
I have a products.php file that needs to change the body tag to: <body class="m-price_update price_starway vb lang-en webp"> right now the header.php only have <body>.
Please don't ask why the body differs from page to page, it's the previous dev's work and I am tasked to not change those.
Any variables defined in the file doing the including will be available in the included file. Just define a variable in the including file that identifies what needs to be done in the included file.
// products.php
$include_option = 'products';
include('header.php');
Then in the included file, refer to that variable at the appropriate place to conditionally do whatever needs to be done:
// header.php
...
<?php if ($include_option == 'products') { ?>
<body class="m-price_update price_starway vb lang-en webp">
<?php } else { ?>
<body class="something else">
<?php } ?>
...
I'm struggling with an issue for a while now, and I finally managed to figure out what caused it.
I've been trying to create a pretty dropdown menu in CSS3. I've tried several things, but for some reason I never got it working in Internet Explorer. I follow tutorials, I basically copy and pasted dropdown menu's from the internet, without any results.
A few minutes ago (from this post) I didn't see a single error in my script. I loaded my dropdown menu (placed in navigation.html) on it's own and the dropdown menu worked (in any browser). However, it didn't on my home page (index.php). It seems like including the page (navigation.html) causes the problem (just for Internet Explorer). So my question is: What is causing this? And is there any other way to include my Dropdown menu?
Here is the code of my navigation.html:
<!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" />
<link href="includes/navigation.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="navigation">
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Projects</span></a>
<ul>
<li><a href='#'><span>Windows Desktop</span></a></li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</div>
</body>
</html>
I am including the navigation.html in the file named "header.php". Header.php is being included in index.php
Index.php:
<?php
include("includes/credits.html");
include("includes/header.php");
include("includes/border.php");
?>
Header.php:
<div class="header" id="one">
<?php
include("includes/navigation.html");
?></div>
Thanks in advance
Edit: SOLVED
I solved it by adding this meta tag:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
I just read at an article that this could cause problems for Internet Explorer, if you forgot to 'define' it.
Sorry for wasting your time!
I could imagine older IEs having issues with CSS3, so could i'd recommend using jquery instead.
HTML
<ul id="navigation">
<li class="dropdown">Dropdown
<ul class="sub_navigation">
<li>Sub Navigation 1</li>
<li>Sub Navigation 2</li>
<li>Sub Navigation 3</li>
</ul>
</li>
<li class="dropdown">Dropdown 2
<ul class="sub_navigation">
<li>Sub Navigation 1</li>
<li>Sub Navigation 2</li>
<li>Sub Navigation 3</li>
</ul>
</li>
</ul>
JQUERY
$('.dropdown').hover(function() {
$(this).find('.sub_navigation').stop(true, true).fadeToggle(600);
});
CSS
ul {
margin:0;
padding:0;
list-style-type:none;
min-width:200px;
}
ul#navigation {
float:left;
}
ul#navigation li {
float:left;
border:1px black solid;
min-width:200px;
}
ul.sub_navigation {
position:absolute;
display:none;
}
ul.sub_navigation li {
clear:both;
}
a,
a:active,
a:visited {
display:block;
padding:10px;
}
http://jsfiddle.net/v5CsV/