mlegg
02-11-2011, 07:34 PM
I have a website and I want the height to adjust to 100% on various sized monitors.
http://ahepa215.org/ is the charity website I made.
CSS code
body {
margin: auto;
background-image : url(images/greekkey2.gif);
background-repeat : repeat;
max-width : 870px;
height: 100%;
}
#mainPicture {
height : 170px;
width : 870px;
background : url(images/banner.gif) no-repeat;
padding-top: 0;
margin: 0;
}
#nav1 {
background: transparent url(images/hmenu.jpg) repeat-x scroll left top;
height:40px;
margin:0 auto ;
width:870px;
text-align:center;
}
#nav1 ul {
display:table;
margin:0 auto;
padding:0;
list-style-type:none;
position:relative;
height:40px;
text-transform:uppercase;
font-size:13px;
font-family:Arial,sans-serif;
}
#nav1 ul li {
display:block;
float:left;
margin:0;
padding:0;
background:transparent url("images/hmenu.jpg") repeat-x top left;
}
#nav1 ul li a {
display:block;
float:left;
color:#ffffff;
text-decoration:none;
padding:0px 20px ;
line-height:40px;
font-weight:bold;
}
#nav1 ul li a:hover {
color:#ffffff;
background:transparent url("images/hmenu-sel.jpg") repeat-x top left;
}
.contentBox {
font-family: sans-serif;color:navy;
clear:both;
}
.innerBox {
background-color : #ffffff;
background-image : url(images/content_back.png);
background-repeat : repeat-y;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
padding-bottom : 1em;
}
#footer {
background : url(images/footer.png) no-repeat;
text-align : center;
font-size : small;
font-family : sans-serif;
color : #ED000B;
padding-top: 5px;
padding-bottom: 5px;
clear: both;
}
#footer A {
color : #ED000B;
}
HTML code:
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AHEPA 215</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<base href="http://ahepa215.org"></head><body>
<div id="mainPicture"></div>
<div id="nav1">
<ul>
<li id="current" style="border:none">
<a href="index.html" shape="rect">Home</a></li>
<li><a href="brothers.html" shape="rect">Brothers</a></li>
<li><a href="about.html" shape="rect">About</a></li>
<li><a href="scholarship.html" shape="rect">Scholarship</a></li>
<li><a href="join.html" shape="rect">Join</a></li>
<li><a href="contact.html" shape="rect">Contact</a></li>
</ul>
</div>
<div class="contentBox">
<div class="innerBox">
<div class="contentText">
<p>The Portsmouth Chapter #215 of the Order of AHEPA was founded on March 21, 1929, at which time the first meeting was held. On March 24, 1929 thirty four residents of Portsmouth and Dover were initiated into the Order.</p>
<p>In November of 2004, the Portsmouth Chapter was formally incorporated in the State of New Hampshire. The new corporate name is Portsmouth AHEPA 215, which is non-for-profit corporation under IRS Section 501(c)(10).</p>
<p>The chapters undertakings over the years have ranged from building floats for the annual Greek Indepedence Day parade in Boston to increasing financial support through out the Portsmouth area and the Metropolis of Boston.</p>
<p>The AHEPA 215 started its annual golf outing in 1999 to enable to start funding its Scholarship Fund. This Scholarship Fund provides annual scholarships to Greater Portsmouth graduating High School Seniors whom have met three requirements, excellent grades, community service (at St Nicholas Greek Orthodox Church and within the community) and financial need.</p>
<p>In 2008, through its fund raising efforts the chapter was able to create a new Charitable Endowment Fund, the income from this fund will be used to assist those in need throughout the Greater Portsmouth Area.</p>
<p>The AHEPA 215 has 42 active members and is growing. You do not have to be Greek or an Orthodox Christian to join AHEPA, but you must believe in our mission and the promotion of Hellenism.</p>
</div>
</div>
</div>
</div>
<div id="footer">Copyright © AHEPA 215</a> | <a href="mailto:ahepa215@gmail.com.com">E-Mail</a></div>
</body></html>
http://ahepa215.org/ is the charity website I made.
CSS code
body {
margin: auto;
background-image : url(images/greekkey2.gif);
background-repeat : repeat;
max-width : 870px;
height: 100%;
}
#mainPicture {
height : 170px;
width : 870px;
background : url(images/banner.gif) no-repeat;
padding-top: 0;
margin: 0;
}
#nav1 {
background: transparent url(images/hmenu.jpg) repeat-x scroll left top;
height:40px;
margin:0 auto ;
width:870px;
text-align:center;
}
#nav1 ul {
display:table;
margin:0 auto;
padding:0;
list-style-type:none;
position:relative;
height:40px;
text-transform:uppercase;
font-size:13px;
font-family:Arial,sans-serif;
}
#nav1 ul li {
display:block;
float:left;
margin:0;
padding:0;
background:transparent url("images/hmenu.jpg") repeat-x top left;
}
#nav1 ul li a {
display:block;
float:left;
color:#ffffff;
text-decoration:none;
padding:0px 20px ;
line-height:40px;
font-weight:bold;
}
#nav1 ul li a:hover {
color:#ffffff;
background:transparent url("images/hmenu-sel.jpg") repeat-x top left;
}
.contentBox {
font-family: sans-serif;color:navy;
clear:both;
}
.innerBox {
background-color : #ffffff;
background-image : url(images/content_back.png);
background-repeat : repeat-y;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
padding-bottom : 1em;
}
#footer {
background : url(images/footer.png) no-repeat;
text-align : center;
font-size : small;
font-family : sans-serif;
color : #ED000B;
padding-top: 5px;
padding-bottom: 5px;
clear: both;
}
#footer A {
color : #ED000B;
}
HTML code:
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AHEPA 215</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<base href="http://ahepa215.org"></head><body>
<div id="mainPicture"></div>
<div id="nav1">
<ul>
<li id="current" style="border:none">
<a href="index.html" shape="rect">Home</a></li>
<li><a href="brothers.html" shape="rect">Brothers</a></li>
<li><a href="about.html" shape="rect">About</a></li>
<li><a href="scholarship.html" shape="rect">Scholarship</a></li>
<li><a href="join.html" shape="rect">Join</a></li>
<li><a href="contact.html" shape="rect">Contact</a></li>
</ul>
</div>
<div class="contentBox">
<div class="innerBox">
<div class="contentText">
<p>The Portsmouth Chapter #215 of the Order of AHEPA was founded on March 21, 1929, at which time the first meeting was held. On March 24, 1929 thirty four residents of Portsmouth and Dover were initiated into the Order.</p>
<p>In November of 2004, the Portsmouth Chapter was formally incorporated in the State of New Hampshire. The new corporate name is Portsmouth AHEPA 215, which is non-for-profit corporation under IRS Section 501(c)(10).</p>
<p>The chapters undertakings over the years have ranged from building floats for the annual Greek Indepedence Day parade in Boston to increasing financial support through out the Portsmouth area and the Metropolis of Boston.</p>
<p>The AHEPA 215 started its annual golf outing in 1999 to enable to start funding its Scholarship Fund. This Scholarship Fund provides annual scholarships to Greater Portsmouth graduating High School Seniors whom have met three requirements, excellent grades, community service (at St Nicholas Greek Orthodox Church and within the community) and financial need.</p>
<p>In 2008, through its fund raising efforts the chapter was able to create a new Charitable Endowment Fund, the income from this fund will be used to assist those in need throughout the Greater Portsmouth Area.</p>
<p>The AHEPA 215 has 42 active members and is growing. You do not have to be Greek or an Orthodox Christian to join AHEPA, but you must believe in our mission and the promotion of Hellenism.</p>
</div>
</div>
</div>
</div>
<div id="footer">Copyright © AHEPA 215</a> | <a href="mailto:ahepa215@gmail.com.com">E-Mail</a></div>
</body></html>