New Topic/Question
Reply
What I have is two files. One is called main (it's the main header that will be on every page). The other is the actual page where I want content to be (there will be many of these pages but right now I'm only working with one).
The header has a whole bunch of CSS going on in 1 file, styleOne.css
body {
margin: 0;
padding: 0;
background: white;
}
#header {
background: #000;
}
h1{
font-size: x-large;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
background: black url(applePic.jpg) no-repeat top right;
font-family: "Trerbuchet MS", Arial, Helvetica, sans-serif;/*Two words for font names need quotes*/
}
#menuline {
background: #222;
}
/* This clears the floating elements at the very end of the
* #menuline div, so the div's height is set correctly. If
* this is not done, the height will be 0 and the floating
* elements will bleed over into the elements below it. */
#menuline:after {
display: block;
clear: both;
content: ".";
visibility: hidden;
height: 0;
}
#menuline ul {
padding: 0;
margin: 0;
list-style: none;
}
/* By using the ">" char here, we are specifying only <ul>
* elements that are direct childern of #menuline, whereas
* the above style covers all descendents of it. */
#menuline > ul {
/* Float this <ul> to the left, allowing the following
* elements to move to the right of it. */
float: left;
list-style:none;
font-size: 1.2em;
}
/* This clears the floating <li> elements. Like the above
* #menuline:after style, this corrects the height of the
* <ul> element that contains the floating <li> elements.
* Without this the <ul> elemet's height would be 0, and the
* <li> elements would bleed over into the elements below. */
#menuline > ul:after {
display: block;
clear: both;
content: ".";
visibility: hidden;
height: 0;
}
#menuline > ul li {
float:left;
display:block;
width:100px;
background:#222;
position:relative;
z-index:500;
margin:0 1px;
}
#menuline > ul a {
display: block;
padding:8px 5px 0 5px;
font-weight:700;
height:23px;
text-decoration:none;
color: white;
text-align:center;
}
#menuline > ul li a:hover {
color: #F53131;
}
#menuline > ul li ul {
position: absolute;
left: -999em;
width: 140px;
}
#menuline > ul ul {
font-size: small;
padding-top: 17px;
}
#menuline > ul li:hover ul,
#menuline > ul li ul:hover {
left:auto;
}
#controls {
/* Float this element to the right, so that it's
* syblings (the <ul> element) move to the left of it. */
float: right;
width: 260px;
height: 50px;
padding: 0 15px 0 0;
}
#controls input {
width: 250px;
margin: 0px;
}
#controls a {
font-size: small;
color: white;
text-decoration: none;
text-align: right;
display: block;
padding: 8px 5px 0 5px;
font-weight:700;
}
#controls a:link {
color: white;
}
#controls a:visited {
color: white;
}
#controls a:hover {
color: #F53131;
}
#controls a:active {
color: red;
}
Here's the HTML for that header:
<head> <link href="styleOne.css" rel="stylesheet" type="text/css" /> <script language="Javascript" src="menujs.js"></script> <script language="Javascript" src="searchBox_js.js"></script> <?php $token = $_SESSION['fName']; ?> </head> <body> <div id="header"> <div id="menuline"> <ul> <li><a href="applelearningmain.php"><?echo $token?></a></li> <li><a href="someting1.html">Groups</a> <ul> <li><a href="s1_sub1">My Groups</a></li> <li><a href="s1_sub2">Create Group</a></li> </ul> </li> <li><a href="something2.html">Forums</a> <ul> <li><a href="s2_sub1">High School</a></li> <li><a href="s2_sub2">College</a></li> <li><a href="s2_sub3">Off Topic</a></li> </ul> </li> <li><a href="something3.html">Tools</a> <ul> <li><a href="s2_sub1">Flash Cards</a></li> <li><a href="s2_sub2">Games</a></li> <li><a href="s2_sub3">More</a></li> </ul> </li> <li><a href="something4.html">Evaluation</a> <ul> <li><a href="s2_sub1">High School</a></li> <li><a href="s2_sub2">College</a></li> </ul> </li> <li><a href="something4.html">Tutoring</a></li> </ul> <div id="controls"> <a href="appleLogout.php">Logout</a> <input type="text" id="searchText" value="Search" onfocus = "focusChangeVal()" onblur = "blurChangeVal()" /> </div> </div> </div> </body>
Now here's the code I have for my page where the real content will be:
<?
include_once("gmain.php")
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="cotentCss.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Resume</h1>
</body>
</html>
Now the problem is, the CSS from the header stuff is carrying over into this file:
Everything above the gray band in the middle is the header which will be on every page. Below that is what the problem is.
I tried doing a CSS-reset, like this (file linked to in the real content page):
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
h1 {
color: red;
But that leads to the header css being changed:
Is there a good way to get around all this? There must be a way to have multiple CSS files working at the same time.
This post has been edited by eZACKe: 24 May 2011 - 02:54 PM
MultiQuote
| 