static and dynamic CSS components

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
omom
Forum Newbie
Posts: 13
Joined: Sun Apr 04, 2004 9:58 pm

static and dynamic CSS components

Post 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>
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post by vigge89 »

why doesn't it work, what do you see in the output?
omom
Forum Newbie
Posts: 13
Joined: Sun Apr 04, 2004 9:58 pm

Post 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.
omom
Forum Newbie
Posts: 13
Joined: Sun Apr 04, 2004 9:58 pm

Post 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.
User avatar
andre_c
Forum Contributor
Posts: 412
Joined: Sun Feb 29, 2004 6:49 pm
Location: Salt Lake City, Utah

Post by andre_c »

Are you having the same problem in all browsers?
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post by no_memories »

I just wrote this for simple modulation of a dynamic PhP site.

http://forums.thexvector.us/viewtopic.php?t=63
omom
Forum Newbie
Posts: 13
Joined: Sun Apr 04, 2004 9:58 pm

Post by omom »

is netscape 7.1 CSS2 compliant?
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post 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/
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post 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.
omom
Forum Newbie
Posts: 13
Joined: Sun Apr 04, 2004 9:58 pm

Post by omom »

Thanks for all the advice, very helpful
I've found my original problem i was getting class/id and ./# mixed up
Post Reply