- 17, May 2024
- #1
Здравствуйте, у меня проблемы с меню словаря, над которым я работаю.
Это ролловеры изображений с использованием одного файла изображения и списка URL.
Однако, когда я уменьшаю размер браузера, буквы исчезают.
Я бы хотел, чтобы все меню просто уменьшилось до размера экрана.
Как это может быть сделано? После некоторых поисков кто-то сказал, что это из-за плавающего положения, что нужно сделать, чтобы исправить эту проблему? Вы можете посмотреть мое меню здесь, чтобы понять, что я имею в виду.
https://cruxmagic.com/lexicon
Вот мой список и CSS...
Спасибо за любую помощь, которую вы можете оказать!
HTML:
Код (CSS):
Это ролловеры изображений с использованием одного файла изображения и списка URL.
Однако, когда я уменьшаю размер браузера, буквы исчезают.
Я бы хотел, чтобы все меню просто уменьшилось до размера экрана.
Как это может быть сделано? После некоторых поисков кто-то сказал, что это из-за плавающего положения, что нужно сделать, чтобы исправить эту проблему? Вы можете посмотреть мое меню здесь, чтобы понять, что я имею в виду.
https://cruxmagic.com/lexicon
Вот мой список и CSS...
Спасибо за любую помощь, которую вы можете оказать!
/* 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([URL='https://lumtu.com/yti/an55naWZodHRwczovL2NydXhtYWdpYy5jb20vd3AtY29udGVudC91cGxvYWRzLzIwMTkvMDgvTGV4aWNvbi1MZXR0ZXJzLUEtTitEU']https://cruxmagic.com/wp-content/uploads/2019/08/Lexicon-Letters-A-N.gif[/URL]);
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 */HTML:
<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>Код (CSS):
