static and dynamic CSS components
Posted: Sun Apr 04, 2004 9:58 pm
I have a CSS that has 4 parts: header, menu, body, & footer.
(see below). The header, menu, and footer never change, the body does. I can't figure out to implement the php, ie, how to get header.htm into the header part of the CSS, menu.htm into the menu part, ...
This doesn't work:
<html>
<head>
<title>MyPage</title>
<style type="text/css" media="screen">@import "slikeco.css";</style>
</head>
<body>
<div class="header">
<?php require('html/header.htm'); ?>
</div>
<div class="menu">
<?php require('html/menu.htm'); ?>
</div>
<div class="content">
<?php require('html/main.php'); ?>
</div>
<div id="footer">
<?php require('html/footer.htm'); ?>
</div>
</body>
</html>
How is this accomplished?
------- CSS file -----------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>CSS Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
margin:0;
padding:0;
font-family: verdana, arial, helvetica, sans-serif;
color: #000;
background-color: #eee;
}
#menu {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 10px;
border: 5px solid #ccc;
background: #ccc;
height: 768px;
width: 190px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 738px;
width: 160px;
}
html>body #menu {
height: 738px;
width: 160px;
/* ie5win fudge ends */
}
#header {
margin: 0 0 0 190px;
padding: 10px;
border: 5px solid #aaa;
background: #eee;
width:834px;
height: 150px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width:804px;
height: 120px;
}
html>body #header {
width:804px;
height: 120px;
/* ie5win fudge ends */
}
#content {
margin: 0 0 0 190px;
padding: 10px;
border: 5px solid #888;
background: #ccc;
width:834px;
height: 540px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width : 804px;
height: 510px;
}
html>body #content {
width : 804px;
height: 510px;
/* ie5win fudge ends */
}
#footer {
margin: 0 0 0 190px;
padding: 10px;
border: 5px solid #666;
background: #eee;
width : 834px;
height: 78px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width : 804px;
height: 48px;
}
html>body #footer {
width : 804px;
height: 48px;
/* ie5win fudge ends */
}
</style>
</head>
<body>
<div id="menu">
Menu : 190 x 768
</div>
<div id="header">
Header : 834 x 150
</div>
<div id="content">
Content : 834 x 540
</div>
<div id="footer">
Footer : 834 x 78
</div>
</body>
</html>
(see below). The header, menu, and footer never change, the body does. I can't figure out to implement the php, ie, how to get header.htm into the header part of the CSS, menu.htm into the menu part, ...
This doesn't work:
<html>
<head>
<title>MyPage</title>
<style type="text/css" media="screen">@import "slikeco.css";</style>
</head>
<body>
<div class="header">
<?php require('html/header.htm'); ?>
</div>
<div class="menu">
<?php require('html/menu.htm'); ?>
</div>
<div class="content">
<?php require('html/main.php'); ?>
</div>
<div id="footer">
<?php require('html/footer.htm'); ?>
</div>
</body>
</html>
How is this accomplished?
------- CSS file -----------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>CSS Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
margin:0;
padding:0;
font-family: verdana, arial, helvetica, sans-serif;
color: #000;
background-color: #eee;
}
#menu {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 10px;
border: 5px solid #ccc;
background: #ccc;
height: 768px;
width: 190px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 738px;
width: 160px;
}
html>body #menu {
height: 738px;
width: 160px;
/* ie5win fudge ends */
}
#header {
margin: 0 0 0 190px;
padding: 10px;
border: 5px solid #aaa;
background: #eee;
width:834px;
height: 150px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width:804px;
height: 120px;
}
html>body #header {
width:804px;
height: 120px;
/* ie5win fudge ends */
}
#content {
margin: 0 0 0 190px;
padding: 10px;
border: 5px solid #888;
background: #ccc;
width:834px;
height: 540px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width : 804px;
height: 510px;
}
html>body #content {
width : 804px;
height: 510px;
/* ie5win fudge ends */
}
#footer {
margin: 0 0 0 190px;
padding: 10px;
border: 5px solid #666;
background: #eee;
width : 834px;
height: 78px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width : 804px;
height: 48px;
}
html>body #footer {
width : 804px;
height: 48px;
/* ie5win fudge ends */
}
</style>
</head>
<body>
<div id="menu">
Menu : 190 x 768
</div>
<div id="header">
Header : 834 x 150
</div>
<div id="content">
Content : 834 x 540
</div>
<div id="footer">
Footer : 834 x 78
</div>
</body>
</html>