Welcome to WebmasterWorld Guest from 34.225.194.144

Forum Moderators: not2easy

Message Too Old, No Replies

Spacing issue of navigational menu items

     
8:17 pm on Jun 23, 2008 (gmt 0)

New User

10+ Year Member

joined:Feb 17, 2005
posts: 28
votes: 0


I have a navigational menu with several items. It's hard to explain I guess, without posting the URL you can't see what I'm talking about, but 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.

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>

4:20 am on June 24, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 29, 2003
posts: 1676
votes: 0


I may not correctly understand the question, so the solution may not be appropriate. (May not be appropriate even if I do understand the question, but the hack seems to meet the criteria.

I assume that the dotted lines are from the background-images, so have to kind of guess at what it should look like. (Would {border-bottom: .1em dotted #000;} or some such be workable? Don't know, just asking.)

The display: block; and margin: - hacks will let you move the positioning of "Services".

span.services {
padding:17px 0px 7px 0px;

color:#56251E;
font-size:13px;
display: block; margin: -1em 0;
}

12:19 pm on June 24, 2008 (gmt 0)

New User

10+ Year Member

joined:Feb 17, 2005
posts: 28
votes: 0


I tried as you suggested, and it did fix the space ABOVE Services. It made it the same amount of space between "About" and the dotted line above it. But now, there is a huge space between "Services" and the submenu item directly below it "Financial Accounting..."

Thank you!

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members