Меню CSS с фоновым изображением. Как сделать так, чтобы он правильно масштабировался с% и EM
У меня есть это меню; http://fhemmel.host56.com/stack/ Я хочу, чтобы масштабирование увеличивалось и уменьшалось при изменении размера окна, но все равно отображается правильно с% и EM. Я пытался исправить положение x и y, а также базовое положение, чтобы оно появилось, но я не могу его отобразить.
Кто-нибудь?
1 ответ
Я думаю, вам это нужно для мобильных телефонов:) Лучший способ - это сделать с%, и тогда все будет автоматически, НО для этого вместо изображения в качестве фона вам нужно будет сделать это как HTML-тег. Вы не можете изменить масштаб фонового элемента (хорошо, вы можете сделать это с помощью transform: scale, но в этом случае это вам не поможет).
Тогда у вас будет что-то вроде этого http://jsfiddle.net/55m8j/1/:
<nav>
<ul>
<li><a href="index.html" id="side1"><img src="image1.jpg"></a></li>
<li><a href="index.html" id="side2"><img src="image2.jpg"></a></li>
<li><a href="index.html" id="side3"><img src="image3.jpg"></a></li>
<li><a href="index.html" id="side4"><img src="image4.jpg"></a></li>
<li><a href="index.html" id="side5"><img src="image5.jpg"></a></li>
</ul>
</nav>
и в CSS
nav ul {list-style-type: none;}
nav ul li {width: 20%; float: left;}
nav ul li a {display: block;}
nav ul li a img {width: 100%; }
Другой способ - просто сделать меню не в виде изображений. Вы можете визуализировать шрифт с помощью squirell, добавить текстовую тень, некоторые градиенты, границы, и результат будет похожим:)