1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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

Discussion in 'HTML & Website Design' started by Matt Crux, Aug 27, 2019.

  1. #1
    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>
    /* 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 */
    Code (CSS):
    Matt Crux, Aug 27, 2019 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Likes Received:
    Best Answers:
    Trophy Points:
    Generally this is -- along with the accessibility woes -- why images for text are an epic /FAIL. at web development. On the whole that entire page is painfully and agonzingly image heavy, with whatever PSD jockey vomited up the design having no real business making websites -- aka "stick to DeviantArt".

    The use of pixel metrics in general increasingly has no place in modern design, hence all those "px' measurements in the stylesheet are inaccessible trash.

    You could try to correct it with the new(ish) background-size properly, but I'd seriously try replacing those (pointless) images with a webfont and see how far text-shadow could be pushed...

    though really given how agonizingly slow loading and painfully illegible the entire page is, I'd suggest just putting the entire site down like Old Yeller and starting over from scratch. There is little if anything there I'd try to keep.
    deathshadow, Aug 28, 2019 IP