PDA

View Full Version : Neewbie question


emerald
01-29-2010, 05:45 PM
Maybe I'm just too old for this.

Trying to mock up a basic page, but I cannot get the #content to display correctly. i.e. between the sidebars.

I trying to create a liquid/flexible page width.

Thanks for looking....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>myindex.html</title>
<style type="text/css">
<!--
#header {
background-color: #EDF8CB;
height: 80px;
width: 100%;
}
#logo {
background-color: #FFF;
float: left;
height: 80px;
}
#bannerfloatright {
background-color: #D4BFFF;
float: right;
height: 80px;
width: 60%;
}
#menu {
background-color: #E10000;
height: 30px;
width: 100%;
border: thin solid #000;
}
#body {
background-color: #FFF;
padding: 10px;
width: auto;
}
#bar_left {
background-color: #FCF;
padding: 10px;
float: left;
width: 180px;
}
#bar_right {
padding: 10px;
float: right;
width: 180px;
background-color: #FCF;
}
#content {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000;
background-color: #FFF;
padding: 10px;
float: left;
width: auto;
}
#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
background-color: #A0FEC6;
text-align: center;
clear: both;
height: 20px;
width: 100%;
font-style: italic;
}
#container {
background-color: #FFF;
width: 100%;
}
-->
</style>
</head>
<body>
<div id="container">
<!--header wrapper -->
<div id="header">
<div id="logo">logo Goes Here</div>
<div id="bannerfloatright">Content for id "bannerfloatright" Goes Here</div>
</div>
<!--header wrapper end-->
<div id="menu">Content for id "menu" Goes Here</div>
<!--body wrapper -->
<div id="body">
<div id="bar_left">Content for id "bar_left" Goes Here
<ul>
<li>Working through a top-down, bottom-up approach</li>
<li>The vitality of conceptual synergies is of supreme importance</li>
<li>Building a dynamic relationship between the main players</li>
<li>Quantitative analysis of all the key ratios has a vital role to play in this</li>
</ul>
</div>
<div id="bar_right">Content for id "bar_right" Goes Here
<p>Eu fugiat nulla pariatur. Quis nostrud exercitation sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat qui officia deserunt ullamco laboris nisi. Ut aliquip ex ea commodo consequat.</p>
<p>Excepteur sint occaecat ut enim ad minim veniam, in reprehenderit in voluptate. Sunt in culpa quis nostrud exercitation qui officia deserunt. Excepteur sint occaecat eu fugiat nulla pariatur. Duis aute irure dolor mollit anim id est laborum. Quis nostrud exercitation ullamco laboris nisi in reprehenderit in voluptate.</p>
<p>Ut aliquip ex ea commodo consequat. Excepteur sint occaecat mollit anim id est laborum. Duis aute irure dolor ut labore et dolore magna aliqua. Velit esse cillum dolore sunt in culpa quis nostrud exercitation.</p>
</div>
<div id="content">Content for id "content" Goes Here
<p>Organizations capable of double-loop learning, working through a top-down, bottom-up approach, motivating participants and capturing their expectations. Highly motivated participants contributing to a valued-added outcome. To ensure that non-operating cash outflows are assessed. An investment program where cash flows exactly match shareholders' preferred time patterns of consumption in order to build a shared view of what can be improved, from binary cause and effect to complex patterns.</p>
<p>Benchmarking against industry leaders, an essential process, should be a top priority at all times the strategic vision - if indeed there be one - is required to identify whether the organization's core competences are fully in line, given market realities. Motivating participants and capturing their expectations, the vitality of conceptual synergies is of supreme importance empowerment of all personnel, not just key operatives. An investment program where cash flows exactly match shareholders' preferred time patterns of consumption the balanced scorecard, like the executive dashboard, is an essential tool by moving executive focus from lag financial indicators to more actionable lead indicators. Quantitative analysis of all the key ratios has a vital role to play in this working through a top-down, bottom-up approach, the new golden rule gives enormous power to those individuals and units.</p>
<p>The three cs - customers, competition and change - have created a new world for business the strategic vision - if indeed there be one - is required to identify combined with optimal use of human resources. Taking full cognizance of organizational learning parameters and principles, an investment program where cash flows exactly match shareholders' preferred time patterns of consumption building a dynamic relationship between the main players. Presentation of the process flow should culminate in idea generation, working through a top-down, bottom-up approach, while those at the coal face don't have sufficient view of the overall goals. That will indubitably lay the firm foundations for any leading company taking full cognizance of organizational learning parameters and principles, motivating participants and capturing their expectations.</p>
<p>Maximization of shareholder wealth through separation of ownership from management the strategic vision - if indeed there be one - is required to identify by adopting project appraisal through incremental cash flow analysis. Working through a top-down, bottom-up approach, to experience a profound paradigm shift, taking full cognizance of organizational learning parameters and principles. Organizations capable of double-loop learning, whether the organization's core competences are fully in line, given market realities. The balanced scorecard, like the executive dashboard, is an essential tool in a collaborative, forward-thinking venture brought together through the merging of like minds.</p>
<p>An important ingredient of business process reengineering presentation of the process flow should culminate in idea generation, highly motivated participants contributing to a valued-added outcome. Building flexibility through spreading knowledge and self-organization, an investment program where cash flows exactly match shareholders' preferred time patterns of consumption the components and priorities for the change program. That will indubitably lay the firm foundations for any leading company through the adoption of a proactive stance, the astute manager can adopt a position at the vanguard. The three cs - customers, competition and change - have created a new world for business from binary cause and effect to complex patterns, the strategic vision - if indeed there be one - is required to identify.</p>
</div>
</div>
<!--body wrapper end-->
<!--footer -->
<div id="footer">Copyright &copy;2010 blah blah blah...</div>
<!--footer end-->
</div>
</body>
</html>

edbr
01-30-2010, 01:29 AM
the auto is not going to work i would assign width in px or use percentages like below
#bar_left {
background-color: #FCF;
padding: 10px;
float: left;
width: 15%;
}
#bar_right {
padding: 10px;
float: right;
width: 15%;
background-color: #FCF;
}
#content {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000;
background-color: #FFF;
padding: 10px;
float: left;
width: 60%;

}

emerald
01-30-2010, 01:17 PM
Thank you, that works.the auto is not going to workSo much for Auto ...

I have a follow up question though,
How can I fix width one column (i.e. the #bar_left - it might contain a menu for example) and let the other two contract/expand ?

domedia
01-30-2010, 09:02 PM
How can I fix width one column (i.e. the #bar_left - it might contain a menu for example) and let the other two contract/expand ?
Set the width for the column that you want a set width for, and don't set it for the other ones.

emerald
01-30-2010, 09:27 PM
Set the width for the column that you want a set width for, and don't set it for the other ones.Is this the correct format? #bar_left {
background-color: #FCF;
padding: 10px;
float: left;
width: 180px;
}
#bar_right {
padding: 10px;
float: right;
width: 15%;
background-color: #FCF;
}
#content {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000;
background-color: #FFF;
padding: 10px;
float: left;
width: 60%;

}

domedia
01-30-2010, 10:30 PM
Yes, but make sure you wrap the #bar_right and #content in a separate div that you float next to #bar_left.

emerald
01-31-2010, 12:06 AM
Beats me! :confused::confused::confused:

When I narrow the browser window, the #content dives under the left hand column.

Here is the page ...<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>myindex.html</title>
<style type="text/css">
<!--
#header {
background-color: #EDF8CB;
height: 80px;
width: 100%;
}
#logo {
background-color: #FFF;
float: left;
height: 80px;
}
#bannerfloatright {
background-color: #D4BFFF;
float: right;
height: 80px;
width: 60%;
}
#menu {
background-color: #E10000;
height: 30px;
width: 100%;
border: thin solid #000;
}
#body {
background-color: #FFF;
width: auto;
}
#bar_left {
background-color: #FCF;
padding: 10px;
float: left;
width: 160px;
}
#bar_right {
padding: 10px;
float: right;
width: 15%;
background-color: #FCF;
}
#content {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000;
background-color: #FFF;
padding: 10px;
float: left;
width: 60%;
}
#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
background-color: #A0FEC6;
text-align: center;
clear: both;
height: 20px;
width: 100%;
font-style: italic;
}
#container {
background-color: #FFF;
width: 100%;
}
#wrapper {
float: left;
}


</style>
</head>
<body>
<div id="container">
<!--header wrapper -->
<div id="header">
<div id="logo">logo Goes Here</div>
<div id="bannerfloatright">Content for id "bannerfloatright" Goes Here</div>
</div>
<!--header wrapper end-->
<div id="menu">Content for id "menu" Goes Here</div>
<!--body wrapper -->
<div id="body">
<!--bar_left -->
<div id="bar_left">Content for id "bar_left" Goes Here
<ul>
<li>Working through a top-down, bottom-up approach</li>
<li>The vitality of conceptual synergies is of supreme importance</li>
</ul>
</div>
<!--end bar_left -->
<!--wrapper -->
<div id="wrepper">
<!--bar_right -->
<div id="bar_right">Content for id "bar_right" Goes Here
<p>Eu fugiat nulla pariatur. Quis nostrud exercitation sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat qui officia deserunt ullamco laboris nisi. Ut aliquip ex ea commodo consequat.</p>
<p>Ut aliquip ex ea commodo consequat. Excepteur sint occaecat mollit anim id est laborum. Duis aute irure dolor ut labore et dolore magna aliqua. Velit esse cillum dolore sunt in culpa quis nostrud exercitation.</p>
</div>
<!--end bar_right -->
<!--content -->
<div id="content">Content for id "content" Goes Here
<p>Maximization of shareholder wealth through separation of ownership from management the strategic vision - if indeed there be one - is required to identify by adopting project appraisal through incremental cash flow analysis. Working through a top-down, bottom-up approach, to experience a profound paradigm shift, taking full cognizance of organizational learning parameters and principles. Organizations capable of double-loop learning, whether the organization's core competences are fully in line, given market realities. The balanced scorecard, like the executive dashboard, is an essential tool in a collaborative, forward-thinking venture brought together through the merging of like minds.</p>
<p>An important ingredient of business process reengineering presentation of the process flow should culminate in idea generation, highly motivated participants contributing to a valued-added outcome. Building flexibility through spreading knowledge and self-organization, an investment program where cash flows exactly match shareholders' preferred time patterns of consumption the components and priorities for the change program. That will indubitably lay the firm foundations for any leading company through the adoption of a proactive stance, the astute manager can adopt a position at the vanguard. The three cs - customers, competition and change - have created a new world for business from binary cause and effect to complex patterns, the strategic vision - if indeed there be one - is required to identify.</p>
</div>
<!--end content -->
</div>
<!--end wrapper -->
</div>
<!--body wrapper end-->
<!--footer -->
<div id="footer">Copyright &copy;2010 blah blah blah...</div>
<!--footer end-->
</div>
</body>
</html>

emerald
02-02-2010, 09:43 AM
OK, I suppose I had better look elsewhere for a solution, before I move on to the next battle with CSS. :sad: :(