...

View Full Version : Li Menu & Text Alignment



username10
06-18-2010, 02:18 PM
Hi there, I'm pretty new to this, so please forgive me for my ignorance regarding valid code...

I'd greatly appreciate any feedback you could have for the following problem; I'm trying to make a menu bar work with a background image and text aligned correctly along the image for the links. I am trying to make this work with code inherited from a previous developer and the only way I can align the text correctly is by applying a block element within an inline element. Here's the code and CSS:


#main-menu2 li {
float:left;
display:block;
HEIGHT:48PX;
BACKGROUND-REPEAT:NO-REPEAT;
}
#main-menu2 li a {
display:block;
height:48px;
background-image:url(/images/menu4a.jpg);
background-color:#4B4B89;
background-repeat:no-repeat;
text-decoration:none;
}

#menu-home {
width:178px;
background-position:0px -48px;
font-family:trebuchet ms,helvetica,sans serif;
}
#menu-home:hover {
background-position:0px 0;
text-decoration:none;
border-bottom:none;
font-family:trebuchet ms,helvetica,sans serif;
}
#menu-business {
width:179px;
background-position:-178px -48px;
font-family:trebuchet ms,helvetica,sans serif;
}
#menu-business:hover {
background-position:-178px 0;
text-decoration:none;
border-bottom:none;
}
#menu-whatson {
width:180px;
background-position:-357px -48px;
font-family:trebuchet ms,helvetica,sans serif;
}
#menu-whatson:hover {
background-position:-357px 0;
text-decoration:none;
border-bottom:none;
}
#menu-offers {
width:180px;
background-position:-537px -48px;
font-family:trebuchet ms,helvetica,sans serif;
}
#menu-offers:hover {
background-position:-537px 0;
text-decoration:none;
border-bottom:none;
}
#menu-links {
width:197px;
background-position:-717px -48px;
font-family:trebuchet ms,helvetica,sans serif;
}
#menu-links:hover {
background-position:-717px 0;
text-decoration:none;
border-bottom:none;
}

--------------------------

Code for Menu:

<div style="height:48px;">
<ul id="main-menu2" style="width:914px;margin:auto;list-style:none;margin:0;padding:0;font-size:1.1em;font-weight:bold;font-family:trebuchet ms,helvetica,sans serif;">
<li><a id="menu-home" href="/<%=lcase(Session("PublicFranchiseName"))%>/pages/index.html"><div style="color:white;text-align:center;padding:13px 0 0px 0.1em;margin-left:-6px;border-bottom:none;">Home</div></a></li>
<li><a id="menu-business" href="/<%=lcase(Session("PublicFranchiseName"))%>/business-directory/index.html"><div style="color:white;text-align:center;padding:8px 0 0px 3.6em;line-height:16px;text-align:left;border-bottom:none;">Business<br />Directory</div></a></li>
<li><a id="menu-whatson" href="/<%=lcase(Session("PublicFranchiseName"))%>/pages/whats-on.html"><div style="color:white;text-align:center;padding:13px 0 0px 3.4em;border-bottom:none;text-align:left;">What's On</div></a></li>
<li><a id="menu-offers" href="/<%=lcase(Session("PublicFranchiseName"))%>/local-offers-and-discounts.html"><div style="color:white;text-align:center;line-height:16px;padding:8px 0 0px 3.5em;text-align:left;">Local offers<br />& Discounts</div></a></li>
<li><a id="menu-links" href="/Signup/Register.asp?f=<%=lcase(Session("PublicFranchiseGID"))%>"><div style="color:white;text-align:center;padding:13px 0 0px 3.5em;border-bottom:0;text-align:left;">Advertise</div></a></li>
</ul>
</div>

Any ideas would be such a help...

effpeetee
06-18-2010, 04:51 PM
I haven't the time or expertise to help you specifically, but I once cured an oddity by usind


Display:inline-block;

Other than that there is this collection of sites (http://www.exitfegs.co.uk/Sources.html) you can check>

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum