SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Sprite Position and Menu LI width

    Hi,

    I'm applying css sprites to my custom html menu. I'm unable to figure out how to position the sprite above the content of the line item, without losing visibility of the image. When I apply a background position of 0 -25px, the image locates above the content, however the image does not display properly.

    I have a sprite that is 80px wide, with 2 images inside it, each 40px wide. When I set the width of line item to 40px, the menu item's content does not have enough width, and squeezes together.

    How should I display the image on top of the menu content?

    How can I display only 40px of the sprite, while the menu item has a width of about 55px, so the content of the menu item displays correctly?

    My site is at infinitesolutionsonline(.)com

    Thank you very much!

    Ty

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fAdEd247 View Post
    Hi,


    How can I display only 40px of the sprite, while the menu item has a width of about 55px, so the content of the menu item displays correctly?

    My site is at infinitesolutionsonline(.)com

    Thank you very much!

    Ty
    You'd need to nest an inner element and put the image on that (width:40px).
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for your reply.

    How do I update the inner element background upon hovering on the anchor text?

    <li><a><span id="inner-element"></span><br />Anchor Text</a></li>

    #mymenu li a:hover inner-element {
    background:url..

    Thanks for your help.

    Ty

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Wel you'd need to make that #inner-element instead of inner-element but yes
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan,

    Thank you very much!! I have been able to successfully display all the sprites!

    I only have 2 more questions(I think)

    I'm unable to figure the correct syntax to display the hover image when hovering over the sub menu anchor text. I tried applying;

    #mymenu a.topb ul li:hover #computer-element {
    background:url("http://infinitesolutionsonline.com/images/menu-sprite-1.jpg") no-repeat scroll -68px -48px transparent;
    }

    But this doesn't work..

    And lastly, to align these images, I can apply margin-left to the spans.

    Do you have better advise to align these images?

    Thanks again.

    Ty

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Give the span a display:inline-block and you can use the margin-left then

    Your CSS code there indicates that a <ul> is a child of an anchor.

    Unable to see your CSS code (but assuming you have a valid structure) I think you meant this?
    Code:
    #mymenu ul li:hover #computer-element {
    background:url("http://infinitesolutionsonline.com/images/menu-sprite-1.jpg") no-repeat scroll -68px -48px;
    }
    I'd need to see the HTML for that entire #mymenu element if that above doesn't work
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help.

    Wow. display:inline-block is beautiful!

    I have id'd each anchor within the parent ul of my menu. Each Li of the parent ul has a child ul, and each anchor within those parent li's contains a unique id'd span.

    Is is necessary to address the anchor id? I guess not since the background is not applied to it anymore?

    I kind of see how your code "ul li:hover #element" should work, but it's not working on my end.

    My HTML:
    Code:
    <div class="menudiv">
    <ul class="menuclass" id="mymenu">
    <li class="top width1"><a href="http://infinitesolutionsonline.com/" class="topa"><span id="about-element"></span><br />About Us</a></li>
    <li class="top width2"><a href="computer-repair-and-maintenance.html" class="topb"><span id="computer-element"></span><br />Computer Solutions</a> 
    <ul>
    <li><a href="computer-repair-and-maintenance/parts-and-systems.html">Parts &amp; Systems</a></li>
    <li><a href="computer-repair-and-maintenance.html#DataRecovery">Data Recovery</a></li>
    <li><a href="computer-repair-and-maintenance.html#viruslink">Virus Removal</a></li>
    </ul>
    </li>
    <li class="top width3"><a href="internet-services.html" class="topc"><span id="internet-element"></span><br />Internet Solutions</a> 
    <ul>
    <li><a href="internet-services/custom-web-site-designing.html">Custom Web Sites</a></li>
    <li><a href="internet-services.html#advlink">Internet Advertising</a></li>
    <li><a href="internet-services.html#marketinglink">Internet Marketing</a></li>
    </ul>
    </li>
    <li class="top width4"><a href="custom-professional-printing.html" class="topd"><span id="print-element"></span><br />Creative Printing</a> 
    <ul>
    <li><a href="custom-professional-printing.html#bizcardslink">Business Cards</a></li>
    <li><a href="custom-professional-printing.html#letterslink">Letterheads &amp; Envelopes</a></li>
    <li><a href="custom-professional-printing.html#flyerslink">Brochures</a></li>
    <li><a href="custom-professional-printing.html#flyerslink">Flyers</a></li>
    </ul>
    </li>
    <li class="top width5"><a href="contact-us.html" class="tope"><span id="contact-element"></span><br />Contact Us</a> 
    <ul>
    <li><a href="javascript:window.external.addFavorite('http://www.infinitesolutionsonline.com','Infinite Solutions Online - Computer Repair, Web Design, Professional Printing, and more!');">Bookmark Us <img src="images/heartimage.jpg" alt="Tiny Heart Image" /></a> </li>
    <li><a href="contact-us/frequently-asked-questions.html">Common Questions</a></li>
    </ul>
    </li>
    </ul>
    </div>
    My CSS:
    Code:
    #mymenu{
    text-align:center;
    width: 50em;
    position:absolute;
    z-index:120;
    margin-top:-2%;
    }
    #mymenu li{
    float:left;
    padding:0 10px;
    list-style:none;
    font-size:13px;
    }
    #mymenu a{
    text-decoration:none;
    color:#000000;
    }
    #mymenu li ul{
    padding:0;
    display:none;
    }
    #mymenu li:hover ul{
    display:block
    }
    #mymenu li ul li{
    float:none;
    font-size:12px;
    }
    #mymenu li ul li a {
    background:#FFFFFF;
    }
    #mymenu li ul li a:hover {
    background:#FFFFFF;
    }
    #mymenu ul li a:hover {
    text-decoration: underline;
    color:#3366FF;
    }
    #mymenu li a:hover {
    font-weight:bold;
    }
    #mymenu li a:active {
    font-weight:bold;
    }
    #about-element {
    background:url("http://infinitesolutionsonline.com/images/menu-sprite-1.jpg") no-repeat scroll -10px -4px transparent;
    display:inline-block;
    height:35px;
    width:40px;
    }
    #mymenu a.topa:hover #about-element {
    background:url("http://infinitesolutionsonline.com/images/menu-sprite-1.jpg") no-repeat scroll -10px -51px transparent;
    }
    #computer-element {
    background:url("http://infinitesolutionsonline.com/images/menu-sprite-1.jpg") no-repeat scroll -68px -3px transparent;
    display:inline-block;
    height:35px;
    width:40px;
    }
    #mymenu a.topb:hover #computer-element {
    background:url("http://infinitesolutionsonline.com/images/menu-sprite-1.jpg") no-repeat scroll -68px -48px transparent;
    }
    #internet-element {
    background:url("http://infinitesolutionsonline.com/images/menu-sprite-1.jpg") no-repeat scroll -134px -6px transparent;
    display:inline-block;
    height:35px;
    width:40px;
    }
    #mymenu a.topc:hover #internet-element {
    background:url("http://infinitesolutionsonline.com/images/menu-sprite-1.jpg") no-repeat scroll -134px -51px transparent;
    }
    #print-element {
    background:url("http://infinitesolutionsonline.com/images/menu-sprite-1.jpg") no-repeat scroll -190px -6px transparent;
    display:inline-block;
    height:35px;
    width:40px;
    }
    #mymenu a.topd:hover #print-element {
    background:url("http://infinitesolutionsonline.com/images/menu-sprite-1.jpg") no-repeat scroll -190px -53px transparent;
    }
    #contact-element {
    background:url("http://infinitesolutionsonline.com/images/menu-sprite-1.jpg") no-repeat scroll -247px -6px transparent;
    display:inline-block;
    height:35px;
    width:40px;
    }
    #mymenu a.tope:hover #contact-element {
    background:url("http://infinitesolutionsonline.com/images/menu-sprite-1.jpg") no-repeat scroll -247px -51px transparent;
    }
    #mymenu .top:hover .topa, #mymenu .top:hover .topb, #mymenu .top:hover .topc, #mymenu .top:hover .topd, #mymenu .top:hover .tope  {
    display:block;
    font-size:13px;
    font-weight:bold;
    ;
    }
    #mymenu .top:hover .topb img {
    margin-left:0;
    }
    .menudiv{
    height:20px;
    margin:0 21em;
    padding:0;
    width: 100%;
    }

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, which particular hover statement isn't working? You have a lot there .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for the sloppy css

    Well, when I hover on a #mymenu li ul li the image should remain the same as when I hove on a #mymenu ul li..

    In more vagueness, when I hover on computer solutions, the computer screen image turns on. When I hover over a submenu li of computer solutions, the computer screen image turns off.

    I can't figure out how to make the computer screen image stay on when hovering on Parts and systems, virus removal, etc.

    Thanks.

    Ty

  10. #10
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just move the hover to the LI, that would keep the image on.

    Example:
    Code:
    #mymenu li:hover a.topb #computer-element {
    background:url("http://infinitesolutionsonline.com/images/menu-sprite-1.jpg") no-repeat scroll -68px -48px transparent;
    }
    Happy ADD/ADHD with Asperger's

  11. #11
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you RyanReese & Erik J for the help.

    Really wish I could of solved that last one myself, but I've learned a lot from you guys.

    Hope you both are blessed with a beautiful day.

    On to another challenge!



    Ty


Bookmarks

Posting Permissions

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