Hi,
I have a working version (Firefox 3) of the fixed size left and right images and the stretchable gradient middle column:
Here is the html:
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>El template</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<LINK rel="stylesheet" type="text/css" href="./css/import.css" title="import stylesheets used for this page" />
</head>
<body>
<div id="header_outer_wrapper">
<div id="head_inner_wrapper">
<div id="header">
<div id="leftcol"><!-- begin leftcol -->
<img src='./images/el_logo_header.jpg' />
</div>
<div id="rightcol">
<img src='./images/el_tagline_header.jpg' />
</div>
<div id="centercol">
<img src='./images/el_mid_top_header.jpg' width='100%' height='107px'/>
</div>
</div><!-- end header area -->
</div><!-- end head_inner_wrapper -->
</div><!-- end header_outer_wrapper -->
<!-- menu centralized file
require_once('menu.php')?>-->
<div id="left_menu">
<ul class="nav">
<li id='mm_home' class='arrow'><a href="#1">Home</a></li>
<li id='mm_view_contacts' class='arrow'><a href="#2">View Contacts</a></li>
<li id='add_contacts' class='arrow'><a href="#3">Add Contacts</a></li>
<li id='download_contacts' class='arrow'><a href="#4">Download Contacts</a></li>
<li id='reports' class='arrow'><a href="#4">Reports</a></li>
<li id='profile' class='arrow'><a href="#4">Profile</a></li>
<li id='admin' class='arrow'><a href="#5">Administration</a></li>
</ul>
</div>
<div id='content_wrapper'>
<div id='content'>
<h2>Contact</h2>
<img class='left' src='./images/top_wide_corners.jpg' />
<p>
Lorem ipsum vel admodum probatus conclusionemque cu, tale propriae reprimique in
sea, exerci molestie verterem est cu. Dolor nostrum eloquentiam et sea,
in affert salutandi consequat eam. Ei adhuc graecis menandri sea, ceteros insolens
corrumpit eam id. Ut qualisque consulatu nam, cu sea hinc rebum minimum, per ut
repudiare dissentiet. Possim mediocrem adipiscing id sea, patrioque delicatissimi id ius.
</p>
<p>
Has idque liber mollis ad. Usu tollit cetero mandamus ne, ei usu nobis voluptatum.
Ut vel virtute alienum luptatum, legere partiendo democritum has ut, est no explicari
maluisset. Nibh similique vel et, et sed posse vulputate. Has legere corpora et.
</p>
</div>
</div>
</body>
</html>
And here is the CSS
HTML Code:
html,body{margin:0;padding:0}
body{
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
background:#fff;
font: 76% arial, sans-serif;
/*background-image: url('../images/el_header.jpg');
background-repeat:no-repeat;*/
}
/* Header styles */
#header_outer_wrapper{
position:relative;
width:100%;
}
#wrapper2 {
position:relative;
width:100%;
}
#header{
position:relative;
padding:10px;
min-width: 800px;
}
#leftcol {
position:relative;
float:left;
}
#rightcol {
position:relative;
float:right;
width:476px;
}
#centercol {
position:relative;
padding:0 476px 0 293px;
}
#centercol img { width: 100%; height: 107px; }
/* Content styles */
#content_wrapper {
overflow: hidden;
}
#content {
float: left;
width:700px;
}
#content p, #content h2{
margin-left: 20px;
margin-right: 20px;
}
Here is it working http://64.201.38.109:12342/el/template.php... I have to make adjustments for IE7 and IE8 (haven't looked at these yet) but this looks to be on the right track.
Regards,
Steve
Originally Posted by ralph.m
Bookmarks