How to Scale this Image Rollover CSS UL Menu? Disappearing Images when Browser Scaled Down

Hello, I’m having issues with this dictionary menu I’m working on. They are image rollovers using one image file and a ul list. However, when I scale the browser down the letters will disappear. I would like the whole menu to just scale down smaller to fit the screen. How can this be done? After doing some searches someone said it’s because of the float, what would need to be done to correct this issue from happening?
You can see my menu here to see what I mean… https://cruxmagic.com/lexicon

Here’s my List and CSS…
Thanks for any help you can provide!

<ul id="lettersan">
<li><a id="leta" href="#a">A</a></li>
<li><a id="letb" href="#b">B</a></li>
<li><a id="letc" href="#c">C</a></li>
<li><a id="letd" href="#d">D</a></li>
<li><a id="lete" href="#e">E</a></li>
<li><a id="letf" href="#f">F</a></li>
<li><a id="letg" href="#g">G</a></li>
</ul>
/* Start Main Menu */
#lettersan {
	list-style: none;
	width: 100%;
	height: 129px;
	padding: 0;
	margin: 15px 50px 0px 0px;
	overflow: hidden;
}
#lettersan li {
    float: left;
}
#lettersan a {
    display: block;
	height: 165px;
    background-image: url(https://cruxmagic.com/wp-content/uploads/2019/08/Lexicon-Letters-A-N.gif);
	text-indent: -9999px;
	outline-style: none;
}
#leta {
	width: 110px;
	background-position: 0px 0px;
}
#leta:hover {
	background-position: 0px -129px;
}
#letb {
	width: 107px;
	background-position: -110px 0px;
}
#letb:hover {
	background-position: -110px -129px;
}
#letc {
	width: 112px;
	background-position: -217px 0px;
}
#letc:hover {
	background-position: -217px -129px;
}
#letd {
	width: 108px;
	background-position: -329px 0px;
}
#letd:hover {
	background-position: -329px -129px;
}
#lete {
	width: 105px;
	background-position: -437px 0px;
}
#lete:hover {
	background-position: -437px -129px;
}
#letf {
	width: 102px;
	background-position: -542px 0px;
}
#letf:hover {
	background-position: -542px -129px;
}
#letg {
	width: 116px;
	background-position: -644px 0px;
}
#letg:hover {
	background-position: -644px -129px;
}
/* End Main Menu */

No its nothing to do with the float and the problem is the fixed px dimensions and the fact that you are using a sprite.

You would need to size each letter in percentages with width and height and then adjust the background-sizeand positions in percentages only. The maths very quickly become extremely complicated. :slight_smile:

It is also complicated by the fact that your sprite is not uniform with each letter taking up the exact same width in order to use percentages efficiently. If you want to continue with the sprite method then I suggest re-jigging the sprite so that all letters occupy the same amount of space within the sprite.

In fact it is so complex that I have not seen anyone else scale the individual components of a rollover sprite in this way :slight_smile:

As proof of concept (and because I like a challenge) I have used your existing image and you can see that the letters ‘I’ and ‘M’ are a little misplaced because the ‘I’ is smaller than the other letters and the ‘M’ is larger.

https://codepen.io/paulobrien/full/MWgmQEN

An easier to understand but more long-winded method of doing this would be to use single images for each letter and its rollover but of course will need 52 images instead of one :slight_smile:

Thanks for you response, I was just using that method because it’s what I know. Do you have a link to a tutorial or example of the other method you’re talking about? I don’t mind making a ton of images just as long as it works. Thanks for your help!

I just remade your image and have uploaded a demo page here.

http://www.pmob.co.uk/temp2/letters3.html

This one works better and you can do a little bit of kerning using a negative margin on the appropriate list item. The math is still a little complicated but you should get the picture.:slight_smile:

I’m offline until tomorrow afternoon now so will answer questions then.

Thanks for your help, That second method you showed me isnt really working either because some of the letters overlap when you scale the browser down. Im interested in knowing that other method you spoke of with the single images. Can you explain that one to me? Anything that will work properly will do for me. Thanks for your comments!

That’s just a minor adjustment with a media query and will look fine across the whole range of devices. It was just a proof of concept and you just needed to tweak a little.

I’ve updated the codepen with my image and it scales fine.

https://codepen.io/paulobrien/full/MWgmQEN

Here’s it as seen on a small device with the letter ‘I’ rolled over.

Ok make two images for each letter. One normal and one rollover image. make sure both images are the same size and use an image size that represents the largest you would want it seen at (note that you can vary the width of individual letters (like ‘I’) but the height must remain the same for all images ).

I’ve made letters A,B,C and their rollovers.

i.e.





I made them at 90px x 100px which seems large enough to me.

Once you have made the images put all the normal states in the html like this:

<ul id="lettersan">
  <li><a class="leta" href="#a"><img src="images/leta.gif" width="90" height="100" alt="Leter A"></a></li>
  <li><a class="letb" href="#b"><img src="images/letb.gif" width="90" height="100" alt="Leter B"></a></li>
  <li><a class="letc" href="#c"><img src="images/letc.gif" width="90" height="100" alt="Leter C"></a></li>
  <li><a class="letd" href="#d"><img src="images/letd.gif" width="90" height="100" alt="Leter D"></a></li>
  <li><a class="lete" href="#e"><img src="images/lete.gif" width="90" height="100" alt="Leter E"></a></li>
  <li><a class="letf" href="#f"><img src="images/letf.gif" width="90" height="100" alt="Leter F"></a></li>
  <li><a class="letg" href="#g"><img src="images/letg.gif" width="90" height="100" alt="Leter G"></a></li>
  <li><a class="leth" href="#h"><img src="images/leth.gif" width="90" height="100" alt="Leter H"></a></li>
  <li><a class="leti" href="#i"><img src="images/leti.gif" width="90" height="100" alt="Leter I"></a></li>
  <li><a class="letj" href="#j"><img src="images/letj.gif" width="90" height="100" alt="Leter J"></a></li>
  <li><a class="letk" href="#k"><img src="images/letk.gif" width="90" height="100" alt="Leter K"></a></li>
  <li><a class="letl" href="#l"><img src="images/letl.gif" width="90" height="100" alt="Leter L"></a></li>
  <li><a class="letm" href="#m"><img src="images/letm.gif" width="90" height="100" alt="Leter M"></a></li>
  <li><a class="letn" href="#n"><img src="images/letn.gif" width="90" height="100" alt="Leter N"></a></li>
</ul>

The images are set to a max-width of 100% which means that hey will render at natural height until such time as they don’t fit anymore and will then scale smaller as required. The height of the image is set to auto in the css to allow the image to maintain the correct aspect ratio.

You don’t need to put the text letters A,B,C etc text in the anchor because the alt attribute of the image will provide that information semantically. After all the image is really content in this case and probably should not be a background image.

However we will make the rollover a background image as that is only decoration.The rollovers will be absolutely placed under the image and then we simply switch opacity on hover to a, hide the real image and b, to reveal the rollover.

The rollover image takes up the same size as the normal image (because we absolutely placed it there) but the background image would be the wrong size which is why we use background-size:100% in order to make the background image fit exactly the space required. The aspect ratio is already correct because the normal image still holds the space open even though it is invisible on hover.

#lettersan{
	list-style:none;
	margin:1em 0;
	padding:0;
	display:flex;
}
#lettersan a{display:block;position:relative;}
#lettersan a img{max-width:100%;height:auto;transition:.5s ease;}

#lettersan a:after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	opacity:0;
	background-repeat:no-repeat;
	transition:.5s ease;
	background-size:100%;
}
.leta:after{background-image:url(images/leta-over.gif)}
.letb:after{background-image:url(images/letb-over.gif)}
.letc:after{background-image:url(images/letc-over.gif)}
/* and so on for every letter */

/* rollover magic */
#lettersan a:hover img{opacity:0}
#lettersan a:hover:after {opacity:1}

As you can see the CSS is much simplified without the need for all those numbers.

Here’s a full working example for the letters A, B & C only (I didn’t have time to make the whole alphabet).

http://www.pmob.co.uk/temp2/letters4.html

Just ‘view source’ to see the code as I have left it all in the head for ease of use.

The letters will render at their natural size if their is room but once the window width is full of letter the letters will scale smaller as required.

The downside of this multi image approach is of course the extra overhead in loading the extra images as opposed to the one sprite in the other example.