5 Replies - 228 Views - Last Post: 27 August 2019 - 11:43 AM

#1 CruxMagic   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 27-August 19

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

Posted 27 August 2019 - 10:54 AM

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 */


Is This A Good Question/Topic? 0
  • +

Replies To: How to Scale this Image Rollover CSS UL Menu? Disappearing Images when

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15225
  • View blog
  • Posts: 60,941
  • Joined: 12-June 08

Re: How to Scale this Image Rollover CSS UL Menu? Disappearing Images when

Posted 27 August 2019 - 11:19 AM

You would need to look at your wordpress theme's "responsive design" options.
Was This Post Helpful? 0
  • +
  • -

#3 CruxMagic   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 27-August 19

Re: How to Scale this Image Rollover CSS UL Menu? Disappearing Images when

Posted 27 August 2019 - 11:24 AM

View Postmodi123_1, on 27 August 2019 - 11:19 AM, said:

You would need to look at your wordpress theme's "responsive design" options.


Care to elaborate? I'm using the theme Flatsome. I'm manually putting this into my page so I'm not sure what you're talking about. I'm pretty sure there is a simple solution to make this work by just editing a little css.
Was This Post Helpful? 0
  • +
  • -

#4 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15225
  • View blog
  • Posts: 60,941
  • Joined: 12-June 08

Re: How to Scale this Image Rollover CSS UL Menu? Disappearing Images when

Posted 27 August 2019 - 11:30 AM

Sure. "responsive design" is all about how your website looks in different browser sizes. Be desktop, table, mobile, etc.

Longer explanation here:
https://www.smashing...ive-web-design/

There are nice options to add responsive design attributes out-of-the-box with javascript frameworks like 'boot strap', but if you are going with wordpress then you better keep to the straight and narrow or bork your whole theme and have to start from the ground up.
Was This Post Helpful? 0
  • +
  • -

#5 CruxMagic   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 27-August 19

Re: How to Scale this Image Rollover CSS UL Menu? Disappearing Images when

Posted 27 August 2019 - 11:41 AM

View Postmodi123_1, on 27 August 2019 - 11:30 AM, said:

Sure. "responsive design" is all about how your website looks in different browser sizes. Be desktop, table, mobile, etc.

Longer explanation here:
https://www.smashing...ive-web-design/

There are nice options to add responsive design attributes out-of-the-box with javascript frameworks like 'boot strap', but if you are going with wordpress then you better keep to the straight and narrow or bork your whole theme and have to start from the ground up.


Yes I know about that. That's not what I'm looking for though. I know how to use that part of my theme. I know there is a way to make image scale automatically based on any browser size. I'm looking to do the same thing with my imaged UL list so that the menu will scale automatically and I don't have to make a separate version for each browser size.
Was This Post Helpful? 0
  • +
  • -

#6 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15225
  • View blog
  • Posts: 60,941
  • Joined: 12-June 08

Re: How to Scale this Image Rollover CSS UL Menu? Disappearing Images when

Posted 27 August 2019 - 11:43 AM

As I said - refer to your wordpress theme. Read the documentation and find what responsive styling tag you need to add to those items to let the theme do its work.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1