Menu Active Item Background

Menu Active Item Background

Post by MelTayAs » Thu, 24 Jul 2008 04:19:52


I am new to CSS and I'm trying to get an image behind the active menu item to
show. It is working when I hover over it but once on that page there is no
indication that that is where I am. I've gone through quite a few tutorials,
but nothing is producing the desired effect.

Also, I'd like to put one line under all the inactive links on the top menu
bar, any idea on what I should do.

It is posted at www.melandderek.com/gmc

Thanks for any guidance you can provide.

Melanie
 
 
 

Menu Active Item Background

Post by Ken Binne » Thu, 24 Jul 2008 04:24:52

The page you tried to access does not exist on this server. This page may
not exist due to the following reasons:

1.. You are the owner of this web site and you have not uploaded (or
incorrectly uploaded) your web site. For information on uploading your web
site using FTP client software or web design software, click here for FTP
Upload Information.

2.. The URL that you have entered in your browser is incorrect. Please
re-enter the URL and try again.

3.. The Link that you clicked on incorrectly points to this page. Please
contact the owner of this web site to inform them of this situation.

 
 
 

Menu Active Item Background

Post by Ken Binne » Thu, 24 Jul 2008 04:25:49


 
 
 

Menu Active Item Background

Post by MelTayAs » Thu, 24 Jul 2008 04:34:53

It is correct now
 
 
 

Menu Active Item Background

Post by Ken Binne » Thu, 24 Jul 2008 04:53:40

Nope
 
 
 

Menu Active Item Background

Post by MelTayAs » Thu, 24 Jul 2008 05:07:12

'm not sure why it isn't working because I'm getting it here (not just on my
computer). Here is the code.

<!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/WM_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Global Mission Conference</title>
<!-- InstanceEndEditable -->
<style type="text/css">
.menu4 {
width: 100%;
margin: 0em 0;
padding: 0px 0em;
}
.menu4 ul {
margin: 0;
padding: 0;
list-style-type: none;
font:Arial, Helvetica, sans-serif;
}

.menu4 {
padding: 20px, 0, 0, 0;
background: #fff none;
}
.menu4 li {
float:none;
margin-right: 0em;
text-align:center;
vertical-align:baseline;
font:Arial, Helvetica, sans-serif;
font-size:small;
color: #267584;
}
.menu4 a {
float:left;
display: block;
width: 139px;
height: 35px;
text-decoration: none;
vertical-align:bottom;
line-height:300%;
}
.menu4 a:hover {
background:url(images/blueBk.jpg) no-repeat;
}
.menu4 a:active {
background:url(images/blueBk.jpg) no-repeat;
}

h1 {
font-size: large;
color: #267584;
vertical-align:middle;
}
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}

a {
font-family: Arial, Helvetica, sans-serif;
color: #267584;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #000000;
}
a:active {
text-decoration: none;
color: #000000;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #000000;
margin-left: 20px;
margin-right: 20px;
}
body {
background-color: #267584;
}
h2 {
font-size: medium;
color: #C4471C;
}
#footer {
align:center;
}
h4 {
font-size: small;
color: #FFFFFF;
padding: 10px, 0, 0, 0;
line-height: 10%;
}
h4 a:hover {
color:#FFFFFF
}
#content {
padding: 0, 0, 0, 10px;
margin-left: 20px;
margin-right: 20px;
}
.style2 {color: #FFFFFF}
.style2 a:hover {
color:#FFFFFF;
}
.style2 a:active {
color:#FFFFFF
}
.menu4 a:active {
background:url(images/blueBk.jpg)) no-repeat;
}
.subnav {
width: 660px;
margin: 0em 0;
padding: 0px 0em;
}
.subnav ul {
margin: 0;
padding: 0;
list-style-type: none;
font:Arial, Helvetica, sans-serif;
}
.subnav li {
margin-right: 0em;
text-align:center;
font:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}
.subnav a {
float:left;
display:inline;
width: 32%;
height: 25px;
text-decoration: none;
line-height:185%;
}
.subnav a:hover {
color:#cc4471C;
}
.subnav a:active {
color:#cc4471C;
}
-->
</style>
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>

<body><table width="700" border="0" cellspacing="0" cellpadding="0, 0