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/
Related
I want the "Login/Sign up" button in the navigation bar to change to "My Account" after the user logs in. I have a problem as my index.html page does not display the navigation bar.
index.html page:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Index Page</title>
</head>
<body>
<?php include("navigation.php"); ?>
</body>
</html>
navigation.php
<?php
include("check.php");
?>
<?php
if ($loginst == 1){ ?>
<div id="nav">
<ul >
<li class="navbar-left">Page 2</li>
<li class="navbar-left">Page 3</li>
<li class="navbar-right">My Account</li>
<li class="navbar-right"><a href="logout.php">Sign Out</a</li>
</ul>
</div>
<?php } else { ?>
<div id="nav">
<ul >
<li class="navbar-left">Page 2</li>
<li class="navbar-left">Page 3</li>
<li class="navbar-right"><a href="login.php">Login</a</li>
</ul>
</div>
<?php } ?>
check.php
<?php
include('connection.php');
session_start();
$loginst = 0;
if ($_SESSION['username']){
$user_check = $_SESSION['username'];
$ses_sql = mysqli_query($db,"SELECT username FROM users WHERE username='$user_check' ");
$row=mysqli_fetch_array($ses_sql,MYSQLI_ASSOC);
$login_user=$row['username'];
if(!empty($login_user))
{
$loginst = 1;
}
}
?>
If I go to index.html then nav bar is not displayed. What am I doing wrong? Thanks.
Because your file format is html and does not support php tags :
<?php include("navigation.php"); ?>
rename index.html to index.php for support php include.
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 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.
I have a variable called $cat(which stands for 'category') in the URL.
Depending on whether it is "a" or "b" I swap the stylesheet using a link:
<?php
if($cat == "a") { ?>
<link rel="stylesheet" href="/css/styleA.css">
<?php }
elseif($cat == "b") { ?>
<link rel="stylesheet" href="/css/styleB.css">
<?php } ?>
styleA.css makes the background-color of the header blue, and styleB.css makes it red
<div id="header" data-role="header" data-position='fixed'>...</div>
if I click on a link that looks like this:
Click for red
Click for blue
the URL actually works (content is incuded depending on $cat) and I do get the value of $cat but the stylesheet does not seem to have swapped, since the color doesn't change. But if I reload the page (with the URL given by the link before) the stylesheets swap and everything works perfectly.
I used the same method for the desktop version of the website I'm working on and everything works perfectly fine.
This issue seems to only appear if I use jquery mobile.
Does anyone see why this isn't working as it should?
EDIT (adding html):
This is pretty much it, but here's the rest of it:
headpart:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<!-- Extra Codiqa features -->
<link rel="stylesheet" href="/css/codiqa.ext.css">
<link rel="stylesheet" href="/css/style.css">
<?php if($cat == "a") { ?> <link rel="stylesheet" href="/css/styleASS.css"> <?php }
if($cat == "b") { ?> <link rel="stylesheet" href="/css/styleBB.css"> <?php }
?>
<!-- jQuery and jQuery Mobile -->
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<!-- Extra Codiqa features -->
<script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script>
</head>
<div data-role="page" id="page">
<div id="panel_menu" data-role="panel" data-display="overlay">
<ul data-role="listview">
<li role="heading">Navigation</li>
<li>Home</li>
<li>Products</li>
<li>Service</li>
<li>Contact</li>
<li>Login</li>
</ul>
</div>
<div id="header" data-role="header" data-position='fixed'>
<h1>Header</h1>
Menu
</div>
<div data-role="content">
<?php include "$menu_page_content";?>
a
b
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" class="ui-icon-nodisc">
<ul>
<li><a href="#" id='language' data-icon='custom'>Change Language</a></li>
<li><a href="#" id='category' data-icon="custom" >Change Category</a></li>
<li><a href="#" id='contact' data-icon="custom" >Contact</a></li>
</ul>
</div>
</div>
</div><!-- page -->
EDITIT:
Uploaded it to a free hoster: here
You may either click on one of the links in the content area, or on "category" in the footer area. Click & reload the page.
If most of your styles are the same with the exception of the color I would suggest putting them in a single style sheet and writing in a class to the body.
For Example
.header {
/* general header styles margins paddings and whatnot */
}
.cat-a .header {
background-color: red;
}
.cat-b .header {
background-color: blue;
}
Then variably write the class in on the body
<body class='cat-<?php echo $cat; ?>'>
It must depends on how data are cached on the browser you're using.
Several solutions are possible.
You could not swap CSS stylesheet, but add style properties using PhP or Javascript. That way you'll be 100% sure it will change. (As long as the user has javascript by the way, PhP would make it really 100% sure)
Or force the browser to reload CSS sheets everytime, but it's not a bandwidth friendly solution, I would not recommend that.
In case you want to use it to save user's choice and reload the correct background everytime, give a look at this :
http://www.dynamicdrive.com/forums/archive/index.php/t-44389.html
Didn't find any SO link though
I'm working on my own personal site here. If you hover over any of the nav bar elements you will notice there is some flicker and not all of the elements are visible. You can verify this via F12. It seems to me that the <aside> tag is "hiding" the info I'm looking for.
Would someone please tell me how to bring the nav bar to the front of something. I'm not really sure what's going on here.
index.php:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Grown Kidd Creations</title>
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</head>
<body>
<header>
<img alt="Picture of me and Cian" src="img/caindaddysleepin.jpeg" title="Cian and Daddy">
<?include_once 'nav/nav.php';?>
</header>
<aside class="left"><p>No idea what to put here. how about you fill out the form and tell me?</p></aside>
<aside class="right">
Recent News/Updates:<br/>
<span class="undercon">This will be updated soon with links and maybe a blog.</span>
<ul>
<li>Cian</li>
<li>Work</li>
<li>Family</li>
</ul>
</aside>
<footer>
Send me some love at BillyThaKidd04#gmail.com<br/>
Or find me at:<br/>
<div class="g-plus" data-href="https://plus.google.com/109325835178774768962?prsrc=3" data-theme="dark" rel="author"></div>
Follow #ThaKidd04
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</footer>
</body>
</html>
nav.php
<?//navigation bar?>
<script>
var el = document.getElementsByTagName("body")[0];
el.className = "";
</script>
<noscript>
<!--[if IE]>
<link rel="stylesheet" href="nav/css/ie.css">
<![endif]-->
</noscript>
<link rel="stylesheet" href="nav/css/nav.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<nav id="topNav" class="no-js">
<ul>
<li>Home</li>
<li>Projects
<ul>
<li>Personal Projects</li>
<li>Work Projects</li>
<li class="last">This Site</li>
</ul>
</li>
<li>Contact Me
<ul>
<li>FaceBook</li>
<li>Google +</li>
<li>LinkedIn</li>
<li class="last">Email Me</li>
</ul>
</li>
<li>About Me
<ul>
<li>Blog</li>
<li>Resume</li>
<li class="last"><a target="new" href="https://github.com/billythakidd04" title="GitHub">GitHub</a></li>
</ul>
</li>
</ul>
</nav>
<script src="nav/js/modernizr.custom.69568.js"></script>
<script>
(function($)
{
//cache nav
var nav = $("#topNav");
//add indicators and hovers to submenu parents
nav.find("li").each(function()
{
if ($(this).find("ul").length > 0)
{
$("<span>").text("").appendTo($(this).children(":first"));
//show subnav on hover
$(this).mouseenter(function()
{
$(this).find("ul").stop(true, true).slideDown();
});
//hide submenus on exit
$(this).mouseleave(function()
{
$(this).find("ul").stop(true, true).slideUp();
});
}
});
})(jQuery);
</script>
You should post your css since it seems that the whole issue is connected—or at least can be solved—by a z-index adjustment:
The z-index CSS property specifies the z-order of an element and its
descendants. When elements overlap, z-order determines which one
covers the other. An element with a larger z-index generally covers an
element with a lower one.