Forum Moderators: not2easy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/strict.dtd"><html>
<head>
<title></title>
<style type="text/css">
body {
font-size: 9pt;
font:70% Arial, Helvetica, sans-serif;
background-color: #A9A59C;
margin: 1px 1px 1px 1px; padding:1px; /* centers page */
text-align: center;
line-height:150%;
}
#container {
position: relative;
width: 760px;
text-align: left;
border: 1px solid #676767; /* medium gray */
background-color: #E8E6DE; /* light gray */
margin:0 auto; /* THIS IS NECESSARY TO CENTER PAGES IN FIREFOX! */
}
#search_feature { /* prototype.php */
color: #858585;
position: absolute;
top: 42px;
left: 0px;
width: 736px;
height: 80px;
padding: 0px 24px 0px 0px;
text-align: right;
}
#header {
height: 80px;
width: 100%;
position: relative;
border: 1px none #fff;
border-top: 18px solid #E8E6DE;
border-bottom: 18px solid #E8E6DE;
background-color: white;
}
#internal_container {
position: relative;
width: 712px;
background-color: #E8E6DE;
border-left: 24px solid #4A4342; /* dark gray */
border-right: 24px solid #4A4342;
}
#contents {
float: right;
margin: 0 4px 0 0; /* outside the border */
width: 464px; /* this changes the width of the content area */
min-height: 312px;
padding: 18px;
border: 1px solid #cccccc;
background-color: green;
}
#menu {
margin-left:4px; /* outside the border */
width: 196px;
/*height: 312; /* must be set for this value or the brown vertical columns extend past the menu area */
}
#footer {
clear: both; /* NEEDED TO EXTEND FOOTER PAST COLUMNS IN FIREFOX! */
font-size: 9pt;
font-family: Arial, Helvetica, sans-serif;
border-top: 18px solid #E8E6DE;
border-bottom: 18px solid #E8E6DE;
background-color: white;
height: 60px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
Logo Goes Here
</div> <!-- header -->
<div id="search_feature">
<?php echo "April 1, 2008"; ?>
</div> <!-- search_feature -->
<div id="internal_container">
<div id="contents">
<?php
// This is used to fill up the content area with text. //
$counter=0;
while ( $counter<24){
$counter++;
echo "TEXT GOES HERE!<br>";
}
?>
</div> <!-- contents -->
<div id="menu">
<A HREF="index.php"><IMG SRC="images/off-button-home.gif" WIDTH=195 HEIGHT=70 BORDER=0 ALT=""></A><A HREF="company.php"><IMG SRC="images/off-button-company.gif" WIDTH=195 HEIGHT=72 BORDER=0 ALT=""></A><A HREF="portfolio.php"><IMG SRC="images/off-button-portfolio.gif" WIDTH=195 HEIGHT=70 BORDER=0 ALT=""></A><A HREF="products.php"><IMG SRC="images/off-button-products.gif" WIDTH=195 HEIGHT=69 BORDER=0 ALT=""></A><A HREF="communication.php"><IMG SRC="images/off-button-contact.gif" WIDTH=195 HEIGHT=69 BORDER=0 ALT=""></A>
</div> <!-- menu -->
</div> <!-- internal container -->
<div id="footer">
Footer Stuff Goes Here
</div> <!-- footer -->
</div> <!-- container -->
</body>
</html>
#internal_container {
float: left;
Unless you're directly dealing with positioning elements/layers you'll want to make good use of floats.
- John
Hell, I hear that even most browsers (except I think konquerer and NS ,which make up for around 0% of users) run in standards mode if you just go <!DOCTYPE html>, which is HTML5, but obviously HTML5 doesn't need to be supported by the browser for it to run in standards mode.
On a side note,I personally recommend not to be using a 9pt font, especially with that 70%. Run browser default by just specifying font-size:100% for main/body text, and you can shrink it for other things, like notes, footer text, etc.
[edited by: Xapti at 6:34 am (utc) on April 2, 2008]
