5 Replies - 4661 Views - Last Post: 24 May 2011 - 06:06 PM

#1 eZACKe  Icon User is offline

  • Garbage Collector

Reputation: 120
  • View blog
  • Posts: 1,278
  • Joined: 01-June 09

Can you ignore CSS from included files?

Posted 24 May 2011 - 02:53 PM

I Google searched this and couldn't find anything about it, but I know there's got to be a way to do this.

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:

Posted Image

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:


Posted Image


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


Is This A Good Question/Topic? 0
  • +

Replies To: Can you ignore CSS from included files?

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,991
  • Joined: 08-June 10

Re: Can you ignore CSS from included files?

Posted 24 May 2011 - 03:40 PM

Hey.

Could you show us the combined HTML of the page that's having the problem?
It almost looks like you are combining two complete HTML documents into a single HTML page. (Each page should only have one HTML structure.)

I don't see the <h1> element in the header code, the one that would show the apple image.

In any case. The trick is not to ignore the CSS from other files, but to have the CSS styles target the right elements. For instance, in your styleOne.css file you define styles for the <h1> element, so that it shows an apple image. The problem is that you define it on the "global" <h1> element, which means it will target all h1 elements in the document. - What you need to do is make it more targeted either by setting an id on the h1 element this is supposed to affect, add a class to the element that your CSS can target (the ID suggestion is better for unique elements), or by nesting it within other elements that you can target (like your #menuline div).

For instance, if you added a <h1 id="apple_h1"> id to the element, you could alter your CSS to target that by simply doing:
h1#apple_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*/
}


Which would then only apply it to that single element, and leave the rest of the document alone.
Was This Post Helpful? 0
  • +
  • -

#3 eZACKe  Icon User is offline

  • Garbage Collector

Reputation: 120
  • View blog
  • Posts: 1,278
  • Joined: 01-June 09

Re: Can you ignore CSS from included files?

Posted 24 May 2011 - 03:53 PM

Well then I think that is a problem. I suppose I am kind of combining two HTML documents. The document main is right here:

<?php include_once("appleHeader.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtmli/DTD/xhtmli-strict.dtd">
<!-- Started 5/22/2011 2:05PM EST -->
<html xmlns="http://www.w3.org/1999/xhtml">
	<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="profile.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>
</html>



And then the profile document is here:
<?
include_once("main.php")
?>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<link href="styleOne.css" rel="stylesheet" type="text/css" />
	</head>
	<div id="body1">
	<body>
	<div id="resumebody">
		<fieldset>
			<legend>Something</legend>
			<div>
			<p>Personal Information</p><!-- perhaps a Person table to store all the data in -->
			<pre>
					 
			</pre>
			<p>Objective</p>
			<p>Professional Achievements</p>
			<p>Skills</p>
			<p>Work History</p>
			<p>Education</p>
			<p>References</p>
			</div>
			</fieldset>
	</div>
	</body>
	</div>
</html>



What I'm attempting to do is have the 2nd one be the real page, and the 1st one be the header of that page. Both have their own HTML though. How can I fix this? Can you just simple write html tags without actually have <html> at the start?

Thanks.

This post has been edited by eZACKe: 24 May 2011 - 03:59 PM

Was This Post Helpful? 0
  • +
  • -

#4 eZACKe  Icon User is offline

  • Garbage Collector

Reputation: 120
  • View blog
  • Posts: 1,278
  • Joined: 01-June 09

Re: Can you ignore CSS from included files?

Posted 24 May 2011 - 04:15 PM

Well this is what I came up with. It all works. Just don't know how efficient it is, and I guess I'll find out in a little while how scalable it is haha. :bigsmile:

I got rid of most of the HTML in the profile page:

<?
include_once("main.php")
?>
	
<body>
	<div id="resumebody">
		<fieldset>
			<legend>Profile</legend>
			<div>
			<p>Personal Information</p><!-- perhaps a Person table to store all the data in -->
			<pre>
					   
			</pre>
			<p>Objective</p>
			<p>Professional Achievements</p>
			<p>Skills</p>
			<p>Work History</p>
			<p>Education</p>
			<p>References</p>
			</div>
			</fieldset>
	</div>
</body>
	



I added a link to the profile pages' css sheet in the header file:
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		
		<link href="styleOne.css" rel="stylesheet" type="text/css" />
		<link href="profileCss.css" rel="stylesheet" type="text/css" />



And I made some more specific css names for the profile page:
#resumebody {
	position: relative;
	top: 80px;
	background-color: white;
}

#resumebody h1 {
	color: red;
	background: white no-repeat top right;
}

fieldset {
border: 2px solid navy;
padding: 10px;
width: 800px;
}

legend {
	font-weight: bold;
	font-size: x-large;
	color: navy;
	padding: 5px;
}

#resumebody p {
	background-color: navy;
	color: white;
	text-align: center;
	font-weight: bold;
	font-size: large;
}



Critique if you want. Otherwise, it works for now :bigsmile:

This post has been edited by eZACKe: 24 May 2011 - 04:16 PM

Was This Post Helpful? 0
  • +
  • -

#5 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1377
  • View blog
  • Posts: 3,502
  • Joined: 28-November 09

Re: Can you ignore CSS from included files?

Posted 24 May 2011 - 05:32 PM

Divide up the pages into more sections for maximum flexibility. I normally make at the least the following: Links, Header, Nav, Footer.

Links would be for things such as CSS and javascript includes. You can have functions inside links to change the style that is included depending on what call you make. That would be the most effective way to maintain multiple pages quickly.

Either that or set up a stylesheet with variables.
Was This Post Helpful? 2
  • +
  • -

#6 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,991
  • Joined: 08-June 10

Re: Can you ignore CSS from included files?

Posted 24 May 2011 - 06:06 PM

I usually define a main template that is included into the calling page, and which includes a content template.

For example, I might create this as main.tpl.php:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
    <title><?php echo $title; ?></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" media="all" href="main.css">
    <?php
    // Include other CSS files, defined by the calling PHP code.
    foreach ($css_files as $_file)
        echo "<link rel=\"stylesheet\" type=\"text/css\" media=\"all\" href=\"{$_file}\">\n";
    ?>
</head>
<body>
    <div id="main_header">
        <h1>Example Site</h1>
        <h1>Subtitle or slogan or something.</h1>
    </div>
    <ul id="main_navigation">
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a></li>
        <li><a href="/etc/">etc...</a></li>
    </ul>
    <div id="main_content"><?php
        // Inlucde the main content.
        include $content_tpl; 
    ?>
    </div>
    <div id="main_footer">
        <span>&copy; Foobar Corporation, 2011</span>
    </div>
</body>
</html>


There I include CSS files depending on a variable set outside the template. I might do the same thing for Javascript files and to alter the navigation.

Then I would define one template for every content page I wanted to show, like index.tpl.php:
        
        <h1>Index page</h1>
        <p>Welcome to my example page!</p>




So when the user requests the index.php file itself, I would have it set the variables for the main template and then include it.
<?php
// Define the content template to be used
$content_tpl = 'index.tpl.php';

// Set a list of CSS files unique to this page.
$css_files = array('index.css');

// Set the title to use for this page.
$title = 'Index | My Example Site';

// Fetch the main template, which will then
// put all of this together.
include "main.tpl.php";
?>



And the final results would be:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
    <title>Index | My Example Site</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" media="all" href="main.css">
    <link rel="stylesheet" type="text/css" media="all" href="index.css">
</head>
<body>
    <div id="main_header">
        <h1>Example Site</h1>
        <h1>Subtitle or slogan or something.</h1>
    </div>
    <ul id="main_navigation">
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a></li>
        <li><a href="/etc/">etc...</a></li>
    </ul>

    <div id="main_content">        
        <h1>Index page</h1>
        <p>Welcome to my example page!</p>
    </div>
    <div id="main_footer">
        <span>&copy; Foobar Corporation, 2011</span>
    </div>
</body>
</html>



A template system like Smarty can be useful for systems like this, but that's not really needed. Can make complex templates look... smoother though.
Was This Post Helpful? 2
  • +
  • -

Page 1 of 1