mickapoo
23 Jun 2008, 04:23 PM
I have a navigational menu with several items. I need the same spacing above and below the "Services" menu item (it's not a link, just text) as there is above and below the other menu items such as "About Us". Right now there is no space above the "Services" text- (between that and the dotted line) and the menu item below it (Financial Acctg & Consulting). I placed the "Services" menu item in it's one class as it does not have the dotted line directly below it as the other menu items do. I thought that by adding top padding or a top margin it would create a space but it doesn't.
Also, for some reason when you mouseover the menu the dotted line background image blinks- as if it turns off on hover?
Here is an excerpt from the stylesheet:
}
.menu{
padding:0px 0px 40px 0px;
}
a.menu {
display:block;
background-image:url(../images/menuBg.jpg);
background-position:left bottom;
background-repeat:repeat-x;
padding:7px 0px 7px 0px;
text-decoration:none;
color:#56251E;
font-size:13px;
}
.menu a:hover{
color:#000000;
}
.menu h3{
color:#381E05;
font-family:Arial, Helvetica, sans-serif;
font-size:28px;
font-weight:100;
}
a.servicesMenu {
padding:7px 0px 7px 0px;
text-decoration:none;
color:#56251E;
font-size:11px;
}
span.services {
padding:17px 0px 7px 0px;
text-decoration:none;
color:#56251E;
font-size:13px;
}
a.subBottom {
display:block;
background-image:url(../images/menuBg.jpg);
background-position:left bottom;
background-repeat:repeat-x;
padding:0px 0px 7px 0px;
text-decoration:none;
color:#56251E;
font-size:11px;
}
and then here is an excerpt from the HTML file with the menu:
<td class="menu">
<h3>Navigation</h3>
<a href="index.html" class="menu">Home</a>
<a href="about.html" class="menu">About Us</a>
<span class="services">Services</span><br><a href="services.html" class="servicesMenu">Financial Accounting & Consulting</a><br>
<a href="tax.html" class="servicesMenu">Tax & Advisory Services</a><br>
<a href="bookkeeping.html" class="subBottom">Accounting & Bookkeeping Services</a>
<a href="links.html" class="menu">Links/Resources</a>
<a href="contact.html" class="menu">Contact Us</a>
</td>
Thank you!
Also, for some reason when you mouseover the menu the dotted line background image blinks- as if it turns off on hover?
Here is an excerpt from the stylesheet:
}
.menu{
padding:0px 0px 40px 0px;
}
a.menu {
display:block;
background-image:url(../images/menuBg.jpg);
background-position:left bottom;
background-repeat:repeat-x;
padding:7px 0px 7px 0px;
text-decoration:none;
color:#56251E;
font-size:13px;
}
.menu a:hover{
color:#000000;
}
.menu h3{
color:#381E05;
font-family:Arial, Helvetica, sans-serif;
font-size:28px;
font-weight:100;
}
a.servicesMenu {
padding:7px 0px 7px 0px;
text-decoration:none;
color:#56251E;
font-size:11px;
}
span.services {
padding:17px 0px 7px 0px;
text-decoration:none;
color:#56251E;
font-size:13px;
}
a.subBottom {
display:block;
background-image:url(../images/menuBg.jpg);
background-position:left bottom;
background-repeat:repeat-x;
padding:0px 0px 7px 0px;
text-decoration:none;
color:#56251E;
font-size:11px;
}
and then here is an excerpt from the HTML file with the menu:
<td class="menu">
<h3>Navigation</h3>
<a href="index.html" class="menu">Home</a>
<a href="about.html" class="menu">About Us</a>
<span class="services">Services</span><br><a href="services.html" class="servicesMenu">Financial Accounting & Consulting</a><br>
<a href="tax.html" class="servicesMenu">Tax & Advisory Services</a><br>
<a href="bookkeeping.html" class="subBottom">Accounting & Bookkeeping Services</a>
<a href="links.html" class="menu">Links/Resources</a>
<a href="contact.html" class="menu">Contact Us</a>
</td>
Thank you!