Page 1 of 1

static and dynamic CSS components

Posted: Sun Apr 04, 2004 9:58 pm
by omom
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>

Posted: Mon Apr 05, 2004 1:23 am
by vigge89
why doesn't it work, what do you see in the output?

Posted: Mon Apr 05, 2004 9:08 am
by omom
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.

Posted: Mon Apr 05, 2004 10:54 am
by omom
i guess the <div> statements in both the css and the php file seem superfluous. the divs in the css are seemingly ignored. In fact, if i take them out, there is no change in the display.

Posted: Mon Apr 05, 2004 11:00 am
by andre_c
Are you having the same problem in all browsers?

Posted: Mon Apr 05, 2004 2:09 pm
by no_memories
I just wrote this for simple modulation of a dynamic PhP site.

http://forums.thexvector.us/viewtopic.php?t=63

Posted: Mon Apr 05, 2004 6:11 pm
by omom
is netscape 7.1 CSS2 compliant?

Posted: Mon Apr 05, 2004 6:37 pm
by no_memories
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/

Posted: Mon Apr 05, 2004 7:12 pm
by Unipus
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.

Posted: Tue Apr 06, 2004 4:00 pm
by omom
Thanks for all the advice, very helpful
I've found my original problem i was getting class/id and ./# mixed up