Hello Everyone,
I am pretty new to web design and CSS.
I am having issues with setting a height of my css to 100%.
in my example page here:
< sorry, no personal URLs > i have my side nav bar set to be fixed position as viewers of the page scroll down. the problem i run into is when the viewer goes down to far the top color stop being generate and above the login div it only shows white and does not go 100% like i have stated in my css.
it seems like the 100% only goes so far then stops. i've been looking at this for 2 days now and have tried changing numerous things but nothing seems to work.
can someone please help me with this.
Thanks,
i am providing my css code below:
main.css
@charset "UTF-8";
/* ===== global styles ===== */
html , body{
font-family: Verdana, Geneva, sans-serif;
margin: 0;
padding: 0;
font-size: 12px;
height: 100%;
}
p, h1, h2, h3, h4, h6, li {
margin: 1ex 1em;
}
#footerWrapper {
}
a {
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
color: #000;
}
a:hover {
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
color: #F00;
}
/* ===== header ===== */
#header {
height: 89px;
width: 100%;
}
#wrapper {
width: 740px;
height: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#footerWrapper {
position:absolute;
bottom:0px;
left:0px;
width:100%;
}
@media screen {
body>div#footerWrapper {
position:fixed;
}
}
* html body{
overflow:hidden;
height: 100%;
}
* html div#wrapper{
height:100%;
overflow:auto;
}
#mainContent {
width: 100%;
float: left;
height: 100%;
clear: both;
}
#leftNav {
width: 200px;
height: 100%;
float: left;
background-color: #A6CCCD;
}
#leftNav1 {
width: 199px;
height: 100%;
float: left;
background-color: #E3E3E3;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #A6CCCD;
}
#content {
float: left;
width: 520px;
padding: 10px;
}
.clear {
clear: both;
font-size: 1px;
}
#footer {
width: 100%;
background-color: #CCE6E9;
text-align: center;
}
#topLogo {
background-image: url(/images/topLogo.png);
background-repeat: no-repeat;
float: left;
height: 65px;
width: 100%;
}
#topNav {
background-color: #CCE6E9;
float: left;
height: 24px;
width: 740px;
font-size: 13px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #A6CCCD;
}
#sideNav {
padding: 5px;
width: 189px;
float: left;
height: 100%;
background-color: #E3E3E3;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #A6CCCD;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #A6CCCD;
position: fixed;
top: 295px;
}
#sideNav1 {
padding: 5px;
width: 189px;
float: left;
height: 100%;
background-color: #E3E3E3;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #A6CCCD;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #A6CCCD;
position: fixed;
}
#logIn {
background-color: #A6CCCD;
float: left;
width: 190px;
clear: both;
padding: 5px;
position: fixed;
height: 205px;
}
h6 {
color: #FFF;
font: normal 22px arial, verdana;
}
#announcments {
float: left;
width: 319px;
padding: 5px;
}
#quote {
padding: 5px;
float: right;
width: 200px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #000;
text-align: center;
}
.title1 {
text-decoration: underline;
font-size: 14px;
font-weight: bold;
}
.title2 {
font-weight: bold;
color: #000;
font-size: 14px;
}
a.logo {
}
.sideNav {
padding-top: 2px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #A6CCCD;
}
.anchorLink {
text-align: right;
float: right;
width: 516px;
padding: 2px;
}
table {
margin-right: auto;
margin-left: auto;
}
.contentImage1 {
float: right;
margin-top: 0px;
margin-bottom: 5px;
margin-left: 15px;
}
.contentImage2 {
float: left;
margin-right: 15px;
margin-bottom: 5px;
}
.pageTitle {
font-size: 22px;
color: #000;
text-align: center;
float: right;
width: 520px;
margin-bottom: 10px;
border-bottom-width: medium;
border-bottom-style: double;
border-bottom-color: #CCC;
padding-bottom: 5px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bolder;
}
style.css
.forms {
background-color: #E4F8FA;
font: normal 12px arial,verdana;
padding: 3px;
border: 1px solid #CAE4FF;
}
.myaccount {
background-color: #E4F8FA;
font: normal 12px arial,verdana;
padding: 2px 5px;
border: 1px solid #CAE4FF;
}
.main {
font: normal 12px arial,verdana;
padding: 2px;
margin: 2px;
}
.titlehdr {
font: normal 22px arial, verdana;
color: #000;
}
.msg {
padding: 5px;
width: 190px;
margin: 2px;
color: #c00;
border: 1px solid #c00;
background-color: #FEF1ED;
font: bold 13px verdana;
}
.error {
font: normal 11px arial, verdana;
color: #c00;
border: 1px solid #c00;
padding: 2px;
margin: 5px;
float: left;
background-color: #FEF1ED;
}
.example {
font: normal 10px arial;
color: red;
}
.approved {
font: normal 10px arial;
color: green;
}
.loginform {
font: 16px normal arial;
background-color: #E4F8FA;
font: normal 12px arial,verdana;
padding: 3px;
border: 1px solid #CAE4FF;
}
.loginform #txtbox {
font: bold 16px arial;
color: #f00;
}
here is my xhtml
<!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"><!-- InstanceBegin template="/Templates/non-secure_pages.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Title Text</title>
<!-- InstanceEndEditable -->
<script language="JavaScript" type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#logForm").validate();
});
</script>
<link href="/css/main.css" rel="stylesheet" type="text/css" />
<link href="/css/styles.css" rel="stylesheet" type="text/css">
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="topLogo">
</div> <!-- end topLogo -->
<div id="topNav">
<div style="width:149px; float:left; text-align:center; margin-top:4px"><a href="information.php">Tri-Co Information</a></div>
<div style="width:59px; float:left; text-align:center; margin-top:4px"><a href="plans.php">Plans</a></div>
<div style="width:165px; float:left; text-align:center; margin-top:4px"><a href="handbook_manuals.php">Handbooks & Manuals</a></div>
<div style="width:128px; float:left; text-align:center; margin-top:4px"><a href="sales_services.php">Sales & Services</a></div>
<div style="width:161px; float:left; text-align:center; margin-top:4px"><a href="resources.php">Important Resources</a></div>
<div style="width:78px; float:left; text-align:center; margin-top:4px"><a href="events.php">Events</a></div>
</div> <!-- end topNav -->
</div> <!-- end header div -->
<div id="mainContent">
<div id="leftNav">
<div id="logIn">
<div style="color:#FFF; font-size:16px;">Please Login</div>
<div><p>
<?php
/******************** ERROR MESSAGES*************************************************
This code is to show error messages
**************************************************************************/
if(!empty($err)) {
echo "<div class=\"msg\">";
foreach ($err as $e) {
echo "$e <br>";
}
echo "</div>";
}
/******************************* END ********************************/
?>
</p></div>
<div style="padding-right:2px">
<form action="login.php" method="post" name="logForm" id="logForm" >
<div style="padding:2px;">Username:</div>
<div style="padding:2px;"><input name="usr_email" type="text" class="required" id="txtbox" size="25"></div>
<div style="padding:2px;">Password:</div>
<div style="padding:2px;"><input name="pwd" type="password" class="required password" id="txtbox" size="25"></div>
<div style="text-align:center; padding:2px;"><input name="doLogin" type="submit" id="doLogin3" value="Login"></div>
<div style="text-align:center; padding:2px;"> <input name="remember" type="checkbox" id="remember" value="1">Remember me</div>
<div style="text-align:center; padding:2px;"><a href="forgot.php">Forgot Password</a></p></div>
</form>
</div>
</div> <!-- end logIn-->
<div id="sideNav">
<div class="sideNav"><a href="login.php">Home</a></div>
<div class="sideNav"><a href="myaccount.php">My Account</a></div>
<div class="sideNav"><a href="http://www.example.com/" target="_blank">Company Website</a></div>
<div class="sideNav"><a href="gallery.php">Photo Gallery</a></div>
<div class="sideNav"><a href="rates.php">Rates</a></div>
<div class="sideNav"><a href="industrylinks.php">Industry Links</a></div>
<div class="sideNav"><a href="logout.php">Logout</a></div>
</div> <!-- end sideNav -->
</div> <!-- end leftNav div -->
<!-- InstanceBeginEditable name="contentRegion" -->
<div id="content"><a name="top" id="top"></a>
<div class="pageTitle">Tri-Co Information</div>
<div class="anchorLink"><a href="#aboutTriCo">About</a> </div>
<div class="anchorLink"><a href="#purposeProfile">Purpose & Profile</a></div>
<div class="anchorLink"><a href="#history">History</a></div>
<div class="anchorLink"><a href="#board">Board & Management</a></div>
<div class="anchorLink"><hr /></div>
<p> </p>
<p class="title2"><a name="aboutTriCo" id="aboutTriCo"></a>About Company. . . a few words from your company:</p><img class="contentImage1" src="/images/intpic_about.jpg" width="246" height="167" />
<p align="justify">text text text</p>
<p align="justify">text text text</p>
<p align="justify">text text text</p>
<p align="justify">Ftext text text</p>
<p align="justify">text text text</p>
<p align="justify">Ctext text text</p>
<div class="anchorLink"><a href="#top">back to top</a></div>
<div class="anchorLink"><hr /></div>
<p class="title2"><a name="purposeProfile" id="purposeProfile"></a>Purpose & Profile</p>
<p align="justify"><strong><img class="contentImage2" src="/images/86.jpg" width="300" height="303" />Purpose</strong></p>
<p align="justify">text text text</p>
<p align="justify"><strong>Profile</strong></p>
<p align="justify">text text text</p>
<div align="justify">
<ul>
<li>text text text</li>
<li>text text text</li>
<li>text text text</li>
<li>text text text</li>
<li>text text text</li>
<li>text text text</li>
<li>text text text</li>
<li>text text text</li>
<li>text text text</li>
<li>text text text</li>
</ul>
</div>
<div class="anchorLink"><a href="#top">back to top</a></div>
<div class="anchorLink"><hr /></div>
<p class="title2"><a name="history" id="history"></a>History</p><img class="contentImage1" src="/images/64.jpg" width="300" height="201" />
<p align="justify">text text text</p>
<p align="justify" style="margin-bottom: 0;">text text text</p>
<div class="anchorLink"><a href="#top">back to top</a></div>
<div class="anchorLink"><hr /></div>
<p class="title2"><a name="board" id="board">Board & Management</a></p>
<p><strong>Board of Directors</strong></p>
<img class="contentImage2" src="/images/17.jpg" width="300" height="199" />
<p align="justify">text text text</p>
</p>
<div align="justify">
<ul>
<li>text text text</li>
<li>text text text</li>
<li>text text text</li>
<li>text text text</li>
</ul>
</div>
<p align="justify"><strong>Members of the Board </strong></p>
<p align="justify">First Last<br />
<strong>Chairman of the Board</strong></p>
<p align="justify">First Last<br />
<strong>Vice Chairman</strong></p>
<p align="justify">First Last<br />
<strong>Secretary</strong></p>
<p align="justify">First Last<br />
<strong>President/CEO/Treasurer</strong></p>
<p align="justify">First Last<br />
<strong>Director</strong></p>
<p align="justify">First Last<br />
<strong>Director</strong></p>
<p align="justify">First Last<br />
<strong>Director</strong></p>
<p align="justify">First Last<br />
<strong>Director</strong></p>
<p align="justify">First Last<br />
<strong>Director</strong></p>
<p align="justify">First Last<br />
<strong>Emeritus</strong><br />
<br />
<strong> Management</strong></p>
<p align="justify">text text text</p>
<p align="justify"><strong>Management</strong><br />
First Last<br />
President and Chief Executive Officer<br />
</p>
<p align="justify">First Last<br />
Vice President Finance/Administration<br />
Chief Financial Officer<br />
</p>
<p align="justify">First Last<br />
Vice President Operations<br />
</p>
<p align="justify">First Last<br />
Vice President Marketing<br />
</p>
<p align="justify" style="margin-bottom: 0;">First Last<br />
Assistant Vice President</p>
<div class="anchorLink"><a href="#top">back to top</a></div>
<div class="anchorLink"><hr /></div>
<p align="justify"> </p>
<p align="justify"><br />
</p>
</div>
<!-- InstanceEndEditable -->
<!-- end content div -->
</div> <!-- end mainContent div -->
<div class="clear"></div>
</div> <!-- end wrapper div -->
<div id="footerWrapper">
<div id="footer">"To provide each and every member with extraordinary value whenever we have the opportunity to server them"</div> <!-- end footer div -->
</div> <!-- end footerWrapper -->
</body>
<!-- InstanceEnd --></html>
[edited by: tedster at 9:10 pm (utc) on Jun 10, 2010] [edited by: bill at 12:10 am (utc) on Jun 11, 2010]
[edit reason] remove specifics [/edit]
