mlegg
01-28-2010, 04:51 AM
Thanks for the last help with my spacing. I made a horizontal navigation menu for the site now. I can't get it to fill the full width under the banner and above my content box. What did I do wrong? I would like the empty space to the left and right be in the same blue as the images/hmenu.jpg
http://i47.tinypic.com/2nvtiyq.png
CSS: the #nav1 is what I added new
body {
margin: auto;
background-image : url(images/greekkey.gif);
background-repeat : repeat;
max-width : 870px;
}
#mainPicture {
height : 170px;
width : 870px;
background : url(images/banner.gif) no-repeat;
padding-top: 0;
margin: 0;
}
#nav1 {
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:11px;
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 50px ;
line-height:40px;
font-weight:bold;
}
#nav1 ul li a:hover, #nav1 li#current a {
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 : #010101;
padding-top: 5px;
padding-bottom: 5px;
}
#footer A {
color : #010101;
}
HTML:
<!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="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>
edit: I forgot the link to my site is http://ahepa215.org/
http://i47.tinypic.com/2nvtiyq.png
CSS: the #nav1 is what I added new
body {
margin: auto;
background-image : url(images/greekkey.gif);
background-repeat : repeat;
max-width : 870px;
}
#mainPicture {
height : 170px;
width : 870px;
background : url(images/banner.gif) no-repeat;
padding-top: 0;
margin: 0;
}
#nav1 {
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:11px;
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 50px ;
line-height:40px;
font-weight:bold;
}
#nav1 ul li a:hover, #nav1 li#current a {
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 : #010101;
padding-top: 5px;
padding-bottom: 5px;
}
#footer A {
color : #010101;
}
HTML:
<!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="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>
edit: I forgot the link to my site is http://ahepa215.org/