View Full Version : Content Div under-lapping Nav Div.

10-17-2006, 11:08 PM
I am trying to fix this: http://iamglenn.com/storage/msi/new/construction.html

When you make the width of your browser smaller, the content div will under lap the nav div, any help is much appreciated! Thank you in advance. I would like it to stop moving once it's at the edge of the navigation.

Link to style sheet: http://iamglenn.com/storage/msi/new/style.css

10-18-2006, 01:48 AM
give the #nav th esame with as your navbuttons at top left. and then give your #content a margin-left equal to the width of the #nav maybe add a few pixeld just in case.

i ddint look at your code but it appears the buttons have a width and the div #nav doesnt or is percentage. Give it a fixed width and see how it goes.

10-18-2006, 06:00 PM
didn't seem to work, any other suggestions?

thank you harbingerOTV

edit: getting closer!

10-19-2006, 04:07 PM
any other suggestions?

I want my sidebar to come up with the content.

10-19-2006, 07:55 PM
I do think you have to put the links and the left pane contents in a separate div under the header and float them left. Your CSS is unnecessarily complicated. You should also validate your page.

10-20-2006, 01:54 AM
I played with it a bit last night. Had one issue I didnt figure out though.


you can switch the position of the nav and the content in the html (nav then content istead of the other way around). Give the nav a width of 181px and float it left. Give the content a left-margin of 181px and it plays sort of nice.

IE was a real fan of putting like 2px of spacing on the left of your content headers that were next to the nav and i couldnt really figure out why.

10-21-2006, 10:44 PM
I was playing with your site layout and since it has not changed since your post, did this (you would have to add the links, images, etc. to complete it and separate the css from the html, of course):



<title>Equipment Dealer Software AGILIS - Mark Systems Dealer Accounting Software</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<style type="text/css">

body {
div#header {width:100%; margin-top: 40px; height: 100px; background:#eaeae2;}

div#container {position: relative; width 100%; margin-top: 0px;}

div#leftpane {float: left; clear:right; width: 180px; height: 100%; background-color: #d4d2c5; font: 75%/1.5 lucida grande,Geneva,Verdana,Arial,Helvetica,sans-serif; padding: 5px;min-height:70%;background:url(bg.gif) repeat-y;}

div#mainpane {clear float: left; margin-left: 180px; height:100%; width: auto; background-color: #ffffff; border: 0px; padding: 5px; line-height: 16px;}

div#subcontainer {float: left; margin-left: 180px; margin-top: -3px; height: 100%; width: auto; background-color: #ffffff;}

table {margin-right: 5px;}
th {background-color: #bbcfe8; border: 0px;font-size:0.8em; font-family: "lucida grande", geneva, verdana, arial, helvetica, sans-serif; padding-left: 8px; height: 24px;}
td {background-color: #ffffff; padding: 10px; border: 0px; font-size:0.8em; font-family: "lucida grande", geneva, verdana, arial, helvetica, sans-serif; padding-left: 8px; line-height: 18px; vertical-align: top;}

div#footer {float: left; clear: right; width:99%; height: 35px; background-color:#666666; color: #ffffff; padding:5px; border-top: #000 1px solid;
h2 {font-size:1.1em; font-family: lucida grande, geneva, verdana, arial, helvetica,sans-serif;
background-color:#bbcfe8; padding-left: 8px; padding-top: 9px;
border-bottom:1px dotted #fff;
h3 {font-size:0.8em; font-family: lucida grande, geneva, verdana, arial, helvetica,sans-serif;
height: 20px;
background-color:#bbcfe8; padding-left: 8px; padding-top: 8px;
border-bottom:1px dotted #fff;

p {font-size:0.8em; font-family: "lucida grande", geneva, verdana, arial, helvetica, sans-serif; padding-left: 8px; padding-top: 9px;}

ul {font-size:0.8em; font-family: "lucida grande",geneva, verdana, arial, helvetica,sans-serif;
padding:0 0 0 2em;
margin:1em 0
a:visited {
border-bottom:1px dotted;

a:visited {color:#FFFFFF}
a:hover {
hr {margin-left: 0px; width: 140px; }
dt{margin-left: 5px; font-weight: bold; height: 24px;}
dd{margin-left: 20px;}

div#navbar1, div#navbar2, div#navbar3, div#navbar4, div#navbar5 {float: left; clear: right; width: auto; font-family:"lucida grande", geneva, verdana, arial, helvetica, sans-serif; font-size: 0.6em; margin-left: 20px; background-color:#666666;}

div#navbar6 {float: right; margin-left: 50px; width: auto; font-family:"lucida grande", geneva, verdana, arial, helvetica, sans-serif; font-size: 0.6em; background-color:#666666;}


<div id="header">Your images and banner come here
<div id="container">

<div id= "leftpane"><br><br>
<dl><dt>Compare AGILIS to other systems<dt>
<dd>Drill-down to original source document</dd>
<dd>Segmented Work Orders</dd>
<dd>Microsoft Client/Server</dd>
<dd>SQL Server database</dd>
<dd>Service Shop Work Order</dd>
<dd>Rental Management</dd>
<dd>Preventative Maintenance</dd>
<dd>Complete Accounting</dd>
<dd>GPS Tracking</dd>
<dd>Dispatch / Scheduling</dd>
<dd>Human Resources / Insurance</dd></dl>
<dl><dt>Mark Systems Inc.</dt>
<dd>1550 Monte Vista Drive
<dd>Annex B
<dd>Reno, Nevada 89511
<dd>(775) 852-0528 (sales)</dd>
<p><a href="moreinfo.asp">Request more info</a><br>
<a href="mailto:sales@mark-systems.com">sales@mark-systems.com</a>

<div id="mainpane">
<h2>AGILIS Construction Software</h2>
<p>AGILIS wasn't designed in a vacuum like most other products, instead our programmers worked directly with a real equipment dealer, so we could ensure you have the best software possible. The fully integrated dealer business management solution links the key areas of your real time accounting, equipment sales, part sales and equipment work orders to allow you to operate efficiently and most profitably.</p>
AGILIS uses Microsoft SQL Server and .NET technologies ensuring you will have a state of the art software solution! Modern databases, modern programming, modern security and modern productivity utilized in AGILIS will ensure that your business has access to the technology of tomorrow.</p>
Best of all, AGILIS software is backed by Mark Systems Inc., a company that has been in business since 1983 providing high end full redundant software systems to airlines and 911 public safety centers. AGILIS is a state of the art software package designed from the ground up utilizing the latest Microsoft technologies. Other systems might have new faces, but the underlying heart of other software is still old technology. Here at Mark Systems we keep updated with MS SQL Server and MS VB dotNET.
<h2>Profit Center Accounting</h2>
Purchase Order, Receivables, Payables, Payroll, Human Resources, General Ledger, Cash Management, Insurance Claims. Stay on top of your #1 asset equipment, labor, and work orders. Know where you stand on actual and committed costs. Certified payroll, no problem! Keep a careful watch on cash flow and cost forecasts. Instantly click between an overall results to small details. Personalize your computer with AGILIS for easy access to the information most important to you. With Mark Systems - AGILIS, it's all possible.
AGILIS is a TOTAL SOLUTION. This means that it has everything you will ever need to run your business. You don't have to purchase other packages and try and integrate them, as everything is included!
AGILIS was developed and designed to afford the construction industry an asset management tracking and accounting system. The implementation provides total, all inclusive, easy-to-use software solution for the construction industry. It reduces unplanned equipment downtime resulting in unrecoverable lost revenue. It also maximizes the return on fixed assets by reducing maintenance and equipment costs through accurate and real time information on vital statistics.
Your equipment is probably your #1 asset... are you really managing that asset properly? Your jobs also need to be managed well in today's market, do you know up to the minute exactly what is happening on your jobs? These major problems and lots more management needs are resolved using AGILIS!
<h2>Flexibility to choose</h2>
<p>AGILIS is fully integrated profit center accounting and operations modules that links every part of your business, eliminating redundancies and instantly providing information between departments. The modular design means you only need to see the parts of AGILIS that is needed for your job, with the advantage of tying everything together into real-time access and simplified control.
<h2>Real Time Profit Center Accounting</h2>
<p>View cost at any stage of the job using one of the many Work In Progress reports. Integrated AIA reporting, prevailing wages, insurance claims are just a few of the many unique modules found in AGILIS!
<h2>Asset Management</h2>
Know where your equipment is and if it's being utilized 100%. AGILIS has fully integrated equipment work order repair system. Machine to Machine (M2M) wireless connectivity monitors your equipment in real time! Real time truck and equipment dispatch. Real time equipment management, all to help you SAVE MONEY!<p>

<h2>Project Management</h2>
Manage subcontracts and change orders, project documentation and scheduling. Remote entry via laptops and phone VRU (Voice Response Unit) all using the remote job management software, and the remote time entry software, all which is included in AGILIS
Contractors can count on outstanding service before, during and after they purchase AGILIS construction software. Mark Systems offers services to help contractors get up and running quickly and grow their business profitably. Our experienced training staff will be on site to help you get online quickly and start saving money by using AGILIS Construction Software!
AGILIS construction accounting software suite was designed especially for general engineering, construction contractors, infrastructure construction software for earthwork, concrete, paving, utilities & pipe, general contractor, corporate owners, commercial and industrial contractors, subcontractor , specialty contractor, specialty construction, electrical contractor, electrical construction, mechanical contractor, mechanical construction, and heavy highway software, to name a few!
<li>Easily Comprehensible - Detailed asset reporting. Minimize risk management and human error with Crystal Reports &#174;, the premier report writing tool.
<li>Powerful and Flexible - Infinite scalability, common to all users, based on the Microsoft Office look and feel. Fast and accurate reporting for management information and decision-making.
<li>Security - Built-in monitoring of user assignment, calculations and error-checking for accuracy and prevention of unauthorized access.
<li>Seamless Communications between Applications - Customize single entry outputs of the Asset Management module to develop automatic inputs to multi-state and multi-company General Ledger and Payroll Accounting. Integrated Equipment Dispatch and Forecasting - Maximize the utility of each piece of equipment
<li>Dynamic Asset Management - Control the tracking, repair and maintenance, and sale of used equipment to reduce costs and downtime, thereby increasing profits.
<li>Dynamic Job Management - Real time analysis to reduce time requirements and meet schedules.

<div id="subcontainer">

<table width="99%" border="0px"><tr>
<th width= "50%" height= "24px">Protect Assets</th><th>Maximize Utilization of Assets</th>
Optimize all company assets, including:
<li>Customer Base
<li>Cash Flow
</td><td>Control business requirements throughout the asset lifecycle to:<br>
<li>Reduce Costs
<li>Improve Profits
<li>Manage Intelligently
<th>Managerial Solutions</th><th>Real Time Job Management</th></tr><tr>
<li>Equipment Asset Tracking
<li>Profit Management
<li>Real Time Dispatch
<li>Real Time Scheduling and Forecasting
<li>Lifetime Analysis
<li>Integrated Fuel Pump Data
<li>Maintenance, Work Orders, History
<li>Seamless Real Time Job Cost and Accounting Integration
<li>Multi-Level Job Costing
<li>Seamless integration to Bid2Win&#174; and Other Estimating Software.
<li>Full Multi-level Security
<li>Drill Down for Instant Access to Source data
<li>Dynamic Percent Complete and Profitability
<li>Remote Access
<th>Profit Center Construction Accounting</th><th>Labor Productivity</th></tr><tr>
<li>Purchase Order
<li>Work Order
<li>General Ledger
<li>Cash Management
<li>Insurance Claims
<li>Compensation Managerial Reporting Tools
<li>Asset Performance Reports
<li>Work Schedules
<li>Resource Plans Purchasing
<li>Vendor Information
<li>Price History
<li>Purchase Orders
<li>Vendor Analysis & Rating</li>


<div id="footer">
<div id="navbar1"><a href="index.html">home</a></div>
<div id="navbar2"><a href="about.html">about</a></div>
<div id="navbar3"><a href="construction.html">construction</a></div>
<div id="navbar4"><a href="equipment.html">equipment dealers</a></div>
<div id="navbar5"><a href="partners.html">partners</a></div>
<div id="navbar6">Copyright <b>MSI</b> 1984-2006





You can use it if it suits you. Good luck!

10-22-2006, 10:00 AM
Polished the code up some more. Let me know if you want it.