Trying to include a header with its own CSS in several pages
I made a header for various parts of my website, all of which run on different software (mediawiki, phpbb, regular html, etc.). I want it to be the absolute top of every page.
What would be the easiest way to include it in whichever pages I would want, and how can I include its CSS attributes without conflicting with other elements of the same type? I tried both classes and IDs to no avail. For example, keeping these ul and li CSS attributes without having a conflict with ul and li elements that are already on a given page.
Here's the code, CSS included:
<head>
<style>
* {
padding: 0;
margin: 0;
}
body {
font-family: Tahoma;
}
a {
text-decoration: none;
color: #ffffff;
font-size: 20px;
font-family: Tahoma;
}
ul {
display: inline;
margin: 0 auto;
}
ul li {
list-style: none;
display: inline;
margin-left: 6px;
margin-right: 6px;
padding-left: 3px;
padding-right: 3px;
padding-top: 3px;
border-bottom: 3px solid #34549F;
}
ul li:hover {
background-color: #7FBCF9;
border-bottom: #ffffff;
color: #000000;
border-bottom: 3px solid #ffffff;
color: black;
}
#fullNav {
text-align: center;
width: 100%;
border-bottom: 2px solid;
background-color: #34549F;
}
</style>
</head>
<body>
<div id="fullNav">
<ul>
<li><a href="foo">foo</a></li>
<li><a href="foo2">foo2</a></li>
<li><a href="foo3">foo3</a></li&开发者_C百科gt;
<li><a href="foo4">foo4</a></li>
</ul>
</div>
</body>
It seems you have a little quagmire from not planning the implementation all that well. I'm going to assume you have PHP on your server because you are running phpBB.
I would think the easiest way to include the code is to edit the templates for each of your different softwares, and include("example.php") or require("example.php") the template all from the same place.
In your PHP file you can create the template for the header
<? function makeHeader(){
/* header html which only includes <div>, etc and
not the full html required to generate a page layout. */
<div id="fullNav">
<ul >
<li ><a href="foo">foo</a></li>
<li ><a href="foo2">foo2</a></li>
<li ><a href="foo3">foo3</a></li>
<li ><a href="foo4">foo4</a></li>
</ul>
</div>
}
?>
And in your various HTML templates, you can call it using <? makeHeader() ?> which will bring in your HTML.
The CSS for your header should be bundled all together, then can also be referenced from one place for the entire site using:
<link rel="stylesheet" type="text/css" href="example.css" />
To avoid CSS name collisions, use unique names for the id and classes for the headers. So instead of #header, you can use something like #AndreisGlobalHeader. It isn't foolproof, but it should save you the time of having to go through the existing CSS looking for a collision. Also using class and id in your CSS for the links will help eliminate any problems.
加载中,请稍侯......
精彩评论