Currently attempting to adjust the layout of my webpages in order to enable scrolling for dynamic content across various pages. I have made adjustments to the header, footer, and sidebar elements, but am facing issues with implementing proper overflow properties such as overflow: auto or overflow: scroll. Some pages are not displaying all content correctly. As a non-professional enthusiast managing a couple of websites, I am constrained from hiring a professional due to financial reasons.
A recent discovery that caught my attention was a fiddle demo that functions without any overflow settings at all. I included a footer component to accurately replicate the behavior observed on my own site. Notably, the scroll bars persist along the sides despite the presence of both header and footer sections.
http://jsfiddle.net/inquii/Nrs2u/4/
CSS:
html, body {
height: 100%;
}
body {
height: 100%;
}
.static {
width:996px;
z-index:2;
height:150px;
position: fixed;
}
#header {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-style: normal;
height: 172px;
width: 996px;
min-width: 850px;
margin-bottom: 0px;
padding-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
background-image: url(images/wga_banner.jpg);
position: fixed;
top:0px;
}
#wrapper {
background-color: #FFF;
margin-top: 0px;
padding-top: 0px;
width: 994px;
margin-left: auto;
margin-right: auto;
position: relative;
height: auto;
}
#sidebar {
background-color: #FFF;
width: 202px;
float: left;
margin-top: 0px;
margin-right: 0px;
height: 100%;
min-height: 700px;
position: fixed;
top: 202px;
bottom: 35px;
}
.main_content {
background-color: #FFF;
padding-right: 20px;
padding-left: 20px;
float: left;
width: 752px;
padding-top: 40px;
color: #000;
border-left-width: 2px;
border-left-style: solid;
border-left-color: #A9B2B1;
height: 100%;
position: absolute;
top: 3px;
left: 202px;
overflow-y: scroll;
}
.container {
background-color: #FFF;
width: 996px;
min-height: 100%;
height: 100%;
position: fixed;
top: 202px;
}
#footer {
background-color: #772432;
clear: both;
height: 35px;
margin: 0;
color: #FFF;
padding-top: 10px;
padding-bottom: 10px;
width: 996px;
position: fixed;
bottom: 0;
}
HTML & PHP:
<body style="margin: 0; background-color: #A9B2B1;">
<div id="wrapper">
<?php
$path = $_SERVER['toast'];
$path .= "_includes/header.php";
include_once($path);
?>
<?php
$path = $_SERVER['toast'];
$path .= "_includes/sidemenu.php";
include_once($path);
?>
</div>
<div class="main_content">
<p>Don't worry; there's no capital punishment during Toastmasters meetings. Unless, of course, the grammarian is in a bad mood.</p>
<p>If you think of a club meeting as a project, then you can see the general evaluator as a kind of project manager. As GE, your responsibilities include:</p>
<ul type="disc">
<li>Ensuring the speech and leadership project evaluators know their responsibilities</li>
<li>Supervising the timer, grammarian and Ah-Counter</li>
<li>Evaluating everything that takes place during the club meeting </li>
<li>Making sure each activity is performed correctly</li>
</ul>
<p>Several days before the meeting, contact the person who will be Toastmaster of the meeting and confirm the meeting program. You should also develop a checklist to follow during the meeting so you don't have to keep all the details in your head. Some clubs have a prepared checklist. If your club doesn't have one, ask the Toastmaster to help you create your own checklist.</p>
<p>When discussing the meeting program with the Toastmaster, ask what evaluation format to use. Typically, an evaluator is assigned to an individual, but sometimes evaluations are done by panels. The general evaluator may set up any evaluation procedure he or she chooses, but it should fit into the meeting program. Remember, too, that every evaluation must be brief and complete. Review the <em>Effective Evaluation</em> manual for different evaluation formats.</p>
<p>You'll also need to contact members serving as:</p>
<ul>
<li>Timer</li>
<li>Grammarian</li>
<li>Ah-Counter </li>
<li>Individual evaluators</li>
</ul>
<p>Remind them of their assignments, and brief evaluators on their responsibilities, the members they will evaluate and the evaluation format to use. Make sure the evaluators understand that evaluation is a positive, helping act that enables fellow Toastmasters to develop their skills. Point out that an evaluation should enhance the speaker's self-esteem and encourage evaluators to prepare thoroughly for their role. Recommend that they call the member they've been assigned to evaluate to discuss specific project objectives.</p>
<p>Your final task <em>before</em> the meeting is to prepare a brief verbal explanation detailing:</p>
<ul>
<li>The purpose, techniques and benefits of evaluation so guests and new members will better understand the function of evaluations. </li>
<li>How evaluation is a positive experience designed to help people overcome flaws and reinforce good habits in their presentations.</li>
</ul>
<p>On meeting day:</p>
<ul>
<li>Arrive early. </li>
<li>Make sure all evaluators are present and that they have the appropriate speaker or leader's manual. </li>
<li>If an evaluator is absent, consult with the vice president education and arrange for a substitute. </li>
<li>Ask each evaluator if he or she has any questions about the project objectives to be evaluated, verify each speaker's time and notify the timer if there are any changes. </li>
<li>Take your seat near the back of the room. This will ensure you have a good view of the meeting and all its participants.</li>
</ul>
<p>The Toastmaster of the meeting usually introduces the general evaluator before the Table Topics portion of the meeting. But your club may have a different order for introductions, so check with the Toastmaster or VPE before the meeting if you're not sure when you'll be introduced.</p>
<p>When you're introduced:</p>
<ul type="disc">
<li>Stand by your chair and deliver the explanation you prepared. </li>
<li>Identify the grammarian, Ah-Counter and timer and have these members briefly state the purpose of their jobs. </li>
<li>Request the word of the day, if your club has one, from the grammarian and then be seated.</li>
</ul>
<p>During the meeting, use your checklist and take notes on everything that happens (or doesn't, but should). For example: Is the club's property (e.g. trophies, banner, educational material) properly displayed? Were there unnecessary distractions that could have been avoided? Did the meeting, and each segment of it, begin and end on time?</p>
<p>Study each participant on the program, from the person giving the invocation or thought for the day to the last report by the timer. Look for good and less than desirable examples of preparation, organization, delivery, enthusiasm, observation and general performance of duties. When it's time to begin the evaluation portion of the meeting, the Toastmaster will introduce you, again. This time, you'll go to the lectern and introduce each evaluator. After each recitation, thank the evaluator for his or her efforts.</p>
<p>Finally, give your general evaluation of the meeting:</p>
<ul type="disc">
<li>Use your checklist and the notes you took during the meeting. </li>
<li>Phrase your evaluation so it is helpful, encouraging and motivates club members to implement the suggestions. </li>
<li>You may wish to comment on the quality of evaluations. Were they positive, upbeat, helpful? Did they point the way to improvement? </li>
<li>When you've completed your evaluation, return control of the meeting to the Toastmaster.</li>
</ul>
<p>Being general evaluator is a big responsibility and it is integral to the success of every single club member. People join Toastmasters because they have a goal – they want to learn something. The club is where they learn. If the learning environment isn't focused and fun, members won't learn what they joined to learn. Your observations and suggestions help ensure the club is meeting the goals and needs of each member.</p>
<p>And what do <em>you</em> get out of the deal? You get the chance to practice and improve your skills in critical thinking, planning, preparation and organization, time management, motivation and team building!</p>
</div>
</div>
<!-- ends container-->
<?php
$path = $_SERVER['toast'];
$path .= "_includes/footer.php";
include_once($path);
?>
</div> <!-- ends wrapper-->
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>