Поскольку я не смог создать горизонтальную навигационную панель с нужным текстом, мне пришлось создать новый иллюстратор navbar и сохранить его как jpeg. Я планирую использовать горячие точки над словами home и products. Конечно, теперь проблема заключается в том, что, когда пользователь изменяет размер своего браузера, им все равно нужно щелкнуть ссылки. Каков наилучший способ сделать это? Нужно ли мне наметить каждое место, где слова могут быть на странице, так как пользователь изменяет размер своего браузера?Создание горячих точек для изменения размера изображения?
Здесь три разных места, где слова home и products появятся на странице по мере изменения размера пользователя. Home и Products перемещаются влево и вправо между первым и вторым скриншотами и вверх и вниз между вторым и третьим скриншотами. Кроме того, слова в значительной степени фиксируются на странице.
Мой страх является то, что пользователь может найти точку доступа для слова, которое не существует. Как я могу это предотвратить? Спасибо.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
#banner {width:100%}
#banner img {width:100%;height:auto}
nav {width:100%;display:block;}
nav ul {list-style-type:none;margin:0;padding:0;text-align:center;
background-color:#c0872e;}
nav li {display:inline-block;background-color:#c0872e;
font-family:Georgia;}
nav a {line-height:35px; color:white; padding: 0 30px; font-size:22px;
font-family:Georgia; background-color:#c0872e;}
nav a:hover {text-decoration:none}
a{float:left;margin-right:58px; margin-left:58px;color:#000;
text-decoration:none;
}
body {background-image: url("daikinbackground1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
-->
</style>
<meta charset="utf-8"/>
<title>daikininc.com</title>
</head>
<body>
<div id="body">
<header>
<div>
<div style="text-align:center" id="banner">
<title="daikinincbanner">
<img src="daikinbanner1.jpg" border="0" alt="daikinbanner1">
</div>
<!--
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
</ul>
</nav>
-->
<nav style="text-align:center">
<img style ="height:300px" width="1355" src="navbarimage1.jpg">
</nav>
<br>
<p style="text-align:center;font-family:WindsorDemi;">
<font size="4">
Welcome to daikininc.com! Home to the world's greatest eggorll
wrappers and noodles.
</font>
</p>
<br><br><br><br><br><br><br><br><br>
</nav>
</header>
<section>
<aside>
</aside>
<article>
</article>
<footer>
</footer>
</div>
</body>
</html>
Что вы подразумеваете под «Поскольку я не смог создать горизонтальную навигационную панель с нужным текстом»? [Это упрощенный пример] (http://output.jsbin.com/vusuqa/1/) ... Чего вы пытаетесь достичь, чего нельзя сделать с помощью CSS и без изображений? – misterManSam
Я попытался использовать Windsor Bold в качестве шрифта в панели навигации. Несмотря на то, что я загрузил его на свой компьютер, он не появлялся в браузере (он по-прежнему отображался как шрифт по умолчанию), и я знаю, что существует ограниченное количество шрифтов, которые будут отображаться на всех браузерах Else, если только у них есть определенный шрифт. – HappyHands31
Шрифт внутри горизонтальной навигационной панели должен быть Windsor Bold. – HappyHands31