static and dynamic CSS components
Moderator: General Moderators
static and dynamic CSS components
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>
i see the contents of each html file, but they are not displayed in the arrangment described by the CSS. This is hard to describe...they are displayed kinda in one column...i would expect to see the top left corner of the menu at (0,0), but it is not, the title is there. And I expect to see the body and the menu side by side, but the body is below the menu.
- no_memories
- Forum Contributor
- Posts: 145
- Joined: Sun Feb 01, 2004 7:12 pm
- Location: New York City
I just wrote this for simple modulation of a dynamic PhP site.
http://forums.thexvector.us/viewtopic.php?t=63
http://forums.thexvector.us/viewtopic.php?t=63
- no_memories
- Forum Contributor
- Posts: 145
- Joined: Sun Feb 01, 2004 7:12 pm
- Location: New York City
yes to Netscape 7 and CSS 2. It should work well in Opera 7, since it's even more compliant than Mozilla 1.6 It will degrade gracefully into text only for older browsers like Netscape 4.
Generally speaking, use as simple CSS as possible. The fancier you get, the less likely it will cross browser. Make sure all markup and CSS validate. If you can get your site to look great in Mozilla, then most likely it will appear correctly in Apple's Safari, Opera 7, and KDM for Linux. I.E. is quirky as hell, but it can be easily worked around, not by fancy tricks but simply using imbedded DIVs.
Say you want a DIV with padding and a border, make a fixed width DIV, then place a DIV with a % value inside with the padding and border. Works much better than the so called I.E. hacks.
Look at my site in Netscape 4; you will not get a mass of garble, just nice text. That's the beauty of a well designed CSS layout. It looks fantastic in modern browsers and "should" degrade in older less compliant browsers.
http://www.thexvector.us/
Generally speaking, use as simple CSS as possible. The fancier you get, the less likely it will cross browser. Make sure all markup and CSS validate. If you can get your site to look great in Mozilla, then most likely it will appear correctly in Apple's Safari, Opera 7, and KDM for Linux. I.E. is quirky as hell, but it can be easily worked around, not by fancy tricks but simply using imbedded DIVs.
Say you want a DIV with padding and a border, make a fixed width DIV, then place a DIV with a % value inside with the padding and border. Works much better than the so called I.E. hacks.
Look at my site in Netscape 4; you will not get a mass of garble, just nice text. That's the beauty of a well designed CSS layout. It looks fantastic in modern browsers and "should" degrade in older less compliant browsers.
http://www.thexvector.us/
alternately, if it's that important to you, and depending on your workflow, it might be worthwhile to sniff the user-agent (browser) on page load and load alternate stylesheets immediately. then you wouldn't need any hacks... but on the other hand you have to update 2 stylesheets if you make changes instead of just one.