One more issue, this time with navigation menu and hover color

**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

CSS: the #nav1 is what I added new

Code:

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:

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="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 &copy 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/

**bluewalrus** · 01-28-2010, 05:06 AM

Code:

#nav1 {
background: transparent url(images/hmenu.jpg) repeat-x scroll left top;
}

**mlegg** · 01-28-2010, 05:18 AM

A million thanks, it worked great. You guys are the best.

**mlegg** · 01-28-2010, 04:35 PM

Now that I am looking at the site, I don't really like how the Home button stays red, as if it's hovered on all the time. How can I change the css to make it so the Home button looks like all the others? I still want the buttons to change to the red color when hovered over.

thanks again

**bluewalrus** · 01-28-2010, 08:10 PM

Delete

Code:

li#current a {

from

Code:

#nav1 ul li a:hover, #nav1 li#current a {

**mlegg** · 01-28-2010, 08:50 PM

That took the hover (red) off the Home button link although now none of the buttons have the red when you hover over them. How can I get the hover red to work on the navigation bar?

Sorry if this is too much to ask.

this is the current CSS

Code:

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 {
	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: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, 
	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;
}
#footer A {
  color : #ED000B;
}

**bluewalrus** · 01-28-2010, 09:19 PM

You deleted too much

Code:

#nav1 ul li a:hover {
	color:#ffffff;
	background:transparent url("images/hmenu-sel.jpg") repeat-x top left;
}

or I wasn't clear enough with my code you always need { and } the { starts the css properties of the element, class, id being targeted and the } closes it.