Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Li Menu & Text Alignment

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

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I haven't the time or expertise to help you specifically, but I once cured an oddity by usind

    Code:
    Display:inline-block;
    Other than that there is this collection of sites you can check>

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •