Menu
Community /Pin to ProfileBookmark
I dont understand, in the code you posted you only are calling for one CSS file?
Do you mean the php include template.inc is a css file?No. template.inc is a html file that contains a header for all the html pages for the site. Inside the template.inc it references another .css file just for itself to position the header image, etc. This works fine. Next I'm trying to include a .css file to control the main content of this page. The php to include template.inc just imports the header portion for the page.
<link href="index.css" rel="stylesheet" type="text/css" />
is to link the .css file specific to index.php.
Hopefully this is clearer.
Thanks and the file exsists in the same location as the file that is calling it?
Why dont you just insert the code directly into the index.php page?
including multiple stylesheets via <link> elements:
Internet Explorer:
the first most <link> has priority over any other <link> (not exactly cascading lol)
Mozilla:
the last most <link> has priority over any preceeding <link> (cascading) It doesn't work in either IE or firefox
Just trying to keep the style sheets external to the php/html pages.
Looks like it should work. well let's delve deeper into the style sheets in question
are they referencing the same class names?
here is index.php
<!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=iso-8859-1" />
<?php
$page_title = 'Reidsville Christian Church';
include('./include/template.inc');
include('./index.css');
?>
</head>
<body id="body">
<div id="main">
<div id="main-content">
<img src="churchbuilding.jpg" />
<!--main-content-->
<!--hr class="cleaner" /-->
</body>
</html>
here is index.css
#main {
margin:0 0 0 25%;
padding:0;
}
#main-content{
margin:0;
font-size: 100%;
padding-top: 13em;
padding-bottom: 0em;
padding-right: 0px;
border-right-color: #333366;
border-right-style: solid;
border-right-width: 0px;
color: #FFFFFF;
}
here is template.inc
<!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=iso-8859-1" />
<link href="template.css" rel="stylesheet" type="text/css" />
<title> <?php echo $page_title; ?></title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
</head>
<body id="body" onload="MM_preloadImages('home_mouseover.jpg','news_mouseover.jpg','members_mouseover.jpg','youth_mouseover.jpg','directions_mouseover.jpg','contact_mouseover.jpg','ministries_mouseover.jpg')">
<div id="header">
<div id="header-text">
<br />
<h4>Reidsville Christian Church</h4>
<h5>2020 South Park Drive</h5>
<h5>Reidsville, NC 27320</h5>
<h5>(336) 349-6616</h5>
<h5>Sunday School 10:00 am Worship 8:30 11:00 am</h5>
</div>
</div>
<div id="navbar">
<div id="navbar-content">
<a href="index.html" target="_top" onclick="MM_nbGroup('down','group1','Home','',1)" onmouseover="MM_nbGroup('over','Home','home_mouseover.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="home.jpg" alt="Home" name="Home" width="145" height="55" border="0" id="Home" onload="" /></a><br />
<a href="news.html" target="_top" onclick="MM_nbGroup('down','group1','News','',1)" onmouseover="MM_nbGroup('over','News','news_mouseover.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="news.jpg" alt="News" name="News" width="145" height="50" border="0" id="News" onload="" /></a><br />
<a href="members.html" target="_top" onClick="MM_nbGroup('down','group1','Members','',1)" onMouseOver="MM_nbGroup('over','Members','members_mouseover.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img name="Members" src="members.jpg" border="0" alt="" onLoad="" /></a><br />
<a href="ministry.html" target="_top" onClick="MM_nbGroup('down','group1','Ministries','',1)" onMouseOver="MM_nbGroup('over','Ministries','ministries_mouseover.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img name="Ministries" src="ministries.jpg" border="0" alt="" onLoad="" /></a><br />
<a href="youth.html" target="_top" onClick="MM_nbGroup('down','group1','Youth','',1)" onMouseOver="MM_nbGroup('over','Youth','youth_mouseover.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img name="Youth" src="youth.jpg" border="0" alt="" onLoad="" /></a><br />
<a href="directions.html" target="_top" onClick="MM_nbGroup('down','group1','Directions','',1)" onMouseOver="MM_nbGroup('over','Directions','directions_mouseover.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img name="Directions" src="directions.jpg" border="0" alt="" onLoad="" /></a><br />
<a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','contact','',1)" onMouseOver="MM_nbGroup('over','contact','contact_mouseover.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img name="contact" src="contact.jpg" border="0" alt="" onLoad="" /></a><br />
</div> <!-- navbar-content-->
</div> <!-- navbar-->
<div id="main">
<div id="main-content">
</div>
<!--hr class="cleaner" /-->
</body>
</html>
here is template.css
#header {
position: absolute;
top: 0px;
float: left;
left: 0px;
height: 12.5em;
width: 102%;
background-image: url(Lighthouse.jpg);
border: 0px none;
margin-left: 1.4em;
text-align: center;
font-style: normal;
line-height: 1;
background-color: #990000;
z-index: 1;
background-repeat: no-repeat;
font-family: "Trebuchet MS";
}
#navbar {
float: left;
width: 25%;
margin:0;
left: 0px;
padding-top: 15em;
padding-right: 1em;
padding-bottom: 0em;
visibility: visible;
height: 300px;
}
#navbar-content {
margin:0;
padding: 0.5em 1em 0em 1.5em;
font-size: 70%;
text-align: center;
}
#body {
background-image: url(include/bkgroundstripe.jpg);
background-repeat: repeat-y;
background-position: 35%;
}
#header-text {
color: #FFFFFF;
}
#footer {
color: #FFFFFF;
background-color: #990000;
padding-right: 0px;
padding-left: 10%;
padding-bottom: 5%;
}
I'm assuming the index.css overrides the template.css.you can not include a css file like that,The problem proberly is you are using the same reference names in both style sheets. you will have to take the section that the index.css replaces out of the template.css and put it in a seperate file and include it in every other page. Oh and please start using VB Tags, like [ php ] and [ /php ] tags. PLEASE ok. I think I have it working by putting all of the style stuff in one css file.
Next question is can I call in the css file using php like I'm doing the title:
This is in template.inc:
<title> <?php $page_title; ?></title>
$page_title is defined in index.php.
Is there a way to put this in template.inc
<link href= $page_css rel="stylesheet" type="text/css">
and set $page_css in the index.php also?
I've tried this but it doesn't work. I don't think I'm referencing the variable correctly. Also, the css page would normally have double quotes around it:
<link href= "index.css" rel="stylesheet" type="text/css">
Thanks 
@NogDogNov 27.2005 — #Don't know if this could be causing your problem, but you need a unit of measure for line-height:
http://jigsaw.w3.org/css-validator is useful for finding these sorts of things.
<php/css question
I’m trying to use php to include a template html file that contains a header for all the pages. The template references it’s own .css page and then I’m trying to include an additional .css page. I’m using this code:
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<?php
$page_title = ‘Reidsville Christian Church’;
include(‘./include/template.inc’);
?>
<link href=”index.css” rel=”stylesheet” type=”text/css” />
</head>
This works ok but the inclusion of the second .css file doesn’t seem to work. None of it’s properties seem to take affect.
Any suggestions?
Thanks,
Rut
Sign in
to post a comment13 Comments(s) ↴
0
@SheldonNov 27.2005 — #
This works ok but the inclusion of the second .css file doesn't seem to work. None of it's properties seem to take affect.
[/QUOTE]
I dont understand, in the code you posted you only are calling for one CSS file?
Do you mean the php include template.inc is a css file?
reply?
0
@rutledjauthorNov 27.2005 — #<link href="index.css" rel="stylesheet" type="text/css" />
is to link the .css file specific to index.php.
Hopefully this is clearer.
Thanks
reply?
0
@SheldonNov 27.2005 — #reply?
0
@SheldonNov 27.2005 — #Well i cant see any reason why the css file isnt being included,Why dont you just insert the code directly into the index.php page?
<style type="text/css">
.body {
//stlyes
}
</style>reply?
0
@ShrineDesignsNov 27.2005 — #Internet Explorer:
the first most <link> has priority over any other <link> (not exactly cascading lol)
Mozilla:
the last most <link> has priority over any preceeding <link> (cascading)
reply?
0
@rutledjauthorNov 27.2005 — #Just trying to keep the style sheets external to the php/html pages.
Looks like it should work.
reply?
0
@chazzyNov 27.2005 — #are they referencing the same class names?
reply?
0
@rutledjauthorNov 27.2005 — #Well, I hate to post it all here but here they are:here is index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php
$page_title = 'Reidsville Christian Church';
include('./include/template.inc');
include('./index.css');
?>
</head>
<body id="body">
<div id="main">
<div id="main-content">
<img src="churchbuilding.jpg" />
<div id="footer">
<p>Reidsville Christian Church exists to share the good news<br />
of Jesus with people everywhere, to teach and strengthen <br />
the believers, to minister to the needs of others, and to <br />
be a Christian influence in the community.</p>
</div> <!--footer -->
</div> <!--main-content-->
<!--hr class="cleaner" /-->
</body>
</html>
here is index.css
#main {
margin:0 0 0 25%;
padding:0;
}
#main-content{
margin:0;
font-size: 100%;
padding-top: 13em;
padding-bottom: 0em;
padding-right: 0px;
border-right-color: #333366;
border-right-style: solid;
border-right-width: 0px;
color: #FFFFFF;
position: relative;}
here is template.inc
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="template.css" rel="stylesheet" type="text/css" />
<title> <?php echo $page_title; ?></title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
</head>
<body id="body" onload="MM_preloadImages('home_mouseover.jpg','news_mouseover.jpg','members_mouseover.jpg','youth_mouseover.jpg','directions_mouseover.jpg','contact_mouseover.jpg','ministries_mouseover.jpg')">
<div id="header">
<div id="header-text">
<br />
<h4>Reidsville Christian Church</h4>
<h5>2020 South Park Drive</h5>
<h5>Reidsville, NC 27320</h5>
<h5>(336) 349-6616</h5>
<h5>Sunday School 10:00 am Worship 8:30 11:00 am</h5>
</div>
</div>
<div id="navbar">
<div id="navbar-content">
<a href="index.html" target="_top" onclick="MM_nbGroup('down','group1','Home','',1)" onmouseover="MM_nbGroup('over','Home','home_mouseover.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="home.jpg" alt="Home" name="Home" width="145" height="55" border="0" id="Home" onload="" /></a><br />
<a href="news.html" target="_top" onclick="MM_nbGroup('down','group1','News','',1)" onmouseover="MM_nbGroup('over','News','news_mouseover.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="news.jpg" alt="News" name="News" width="145" height="50" border="0" id="News" onload="" /></a><br />
<a href="members.html" target="_top" onClick="MM_nbGroup('down','group1','Members','',1)" onMouseOver="MM_nbGroup('over','Members','members_mouseover.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img name="Members" src="members.jpg" border="0" alt="" onLoad="" /></a><br />
<a href="ministry.html" target="_top" onClick="MM_nbGroup('down','group1','Ministries','',1)" onMouseOver="MM_nbGroup('over','Ministries','ministries_mouseover.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img name="Ministries" src="ministries.jpg" border="0" alt="" onLoad="" /></a><br />
<a href="youth.html" target="_top" onClick="MM_nbGroup('down','group1','Youth','',1)" onMouseOver="MM_nbGroup('over','Youth','youth_mouseover.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img name="Youth" src="youth.jpg" border="0" alt="" onLoad="" /></a><br />
<a href="directions.html" target="_top" onClick="MM_nbGroup('down','group1','Directions','',1)" onMouseOver="MM_nbGroup('over','Directions','directions_mouseover.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img name="Directions" src="directions.jpg" border="0" alt="" onLoad="" /></a><br />
<a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','contact','',1)" onMouseOver="MM_nbGroup('over','contact','contact_mouseover.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img name="contact" src="contact.jpg" border="0" alt="" onLoad="" /></a><br />
</div> <!-- navbar-content-->
</div> <!-- navbar-->
<div id="main">
<div id="main-content">
</div>
<!--hr class="cleaner" /-->
</body>
</html>
here is template.css
#header {
position: absolute;
top: 0px;
float: left;
left: 0px;
height: 12.5em;
width: 102%;
background-image: url(Lighthouse.jpg);
border: 0px none;
margin-left: 1.4em;
text-align: center;
font-style: normal;
line-height: 1;
background-color: #990000;
z-index: 1;
background-repeat: no-repeat;
font-family: "Trebuchet MS";
}
#navbar {
float: left;
width: 25%;
margin:0;
left: 0px;
padding-top: 15em;
padding-right: 1em;
padding-bottom: 0em;
visibility: visible;
height: 300px;
}
#navbar-content {
margin:0;
padding: 0.5em 1em 0em 1.5em;
font-size: 70%;
text-align: center;
}
#body {
background-image: url(include/bkgroundstripe.jpg);
background-repeat: repeat-y;
background-position: 35%;
}
#header-text {
color: #FFFFFF;
}
#footer {
color: #FFFFFF;
background-color: #990000;
padding-right: 0px;
padding-left: 10%;
padding-bottom: 5%;
}
I'm assuming the index.css overrides the template.css.
reply?
0
@SheldonNov 27.2005 — #reply?
0
@SheldonNov 27.2005 — #reply?
0
@rutledjauthorNov 27.2005 — #Next question is can I call in the css file using php like I'm doing the title:
This is in template.inc:
<title> <?php $page_title; ?></title>
$page_title is defined in index.php.
Is there a way to put this in template.inc
<link href= $page_css rel="stylesheet" type="text/css">
and set $page_css in the index.php also?
I've tried this but it doesn't work. I don't think I'm referencing the variable correctly. Also, the css page would normally have double quotes around it:
<link href= "index.css" rel="stylesheet" type="text/css">
Thanks
reply?
0
@NogDogNov 27.2005 — #Don't know if this could be causing your problem, but you need a unit of measure for line-height:<i>
</i>#header {
position: absolute;
top: 0px;
float: left;
left: 0px;
height: 12.5em;
width: 102%;
background-image: url(Lighthouse.jpg);
border: 0px none;
margin-left: 1.4em;
text-align: center;
font-style: normal;
[color=red]line-height: 1;[/color] /* 1em, perhaps? */
background-color: #990000;
z-index: 1;
background-repeat: no-repeat;
font-family: "Trebuchet MS";
}
reply?