CSS Sprite Position and Menu LI width

[fAdEd247]

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

[RyanReese]

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

[fAdEd247]

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

[RyanReese]

Wel you'd need to make that #inner-element instead of inner-element but yes

[fAdEd247]

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

[RyanReese]

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?

#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

[fAdEd247]

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:

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

#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%;
}

[RyanReese]

Hi, which particular hover statement isn't working? You have a lot there .

[fAdEd247]

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

[Erik J]

Just move the hover to the LI, that would keep the image on.

Example:

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

[fAdEd247]

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