С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.85/13: Рейтинг темы: голосов - 13, средняя оценка - 4.85
v_alena_d
0 / 0 / 1
Регистрация: 09.07.2013
Сообщений: 55
1

навигация без кнопок

09.07.2013, 21:09. Просмотров 2371. Ответов 40
Метки нет (Все метки)

Здравствуйте, сразу скажу что я совсем новичок в этом деле, просто очень нужно создать сайт. Проблема заключается в том что по задумке главная сайта это фото (кстати вот ссылка http://v-alena-d.myjino.ru/) надписи на так называемой "легенде" как раз и должны выполнять функцию кнопок, подскажите пожалуйста как это сделать, основная проблема в том что при изменении размера экрана "кнопки съезжают".
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
09.07.2013, 21:09
Ответы с готовыми решениями:

Навигация по сайту без перезагрузки фрейма
Есть сайт на вордпрессе. В одной из колонок имеется фрейм <iframe>. Нужно чтобы...

Как задать фиксированную ширину кнопок в две строки в горизонтальном меню (без скриптов, на CCS и HTML)?
Как задать фиксированную ширину кнопок в две строки в горизонтальном меню (без...

Навигация
Здравствуйте! Что-то пошло не так, помогите:) <div id="header"> ...

Навигация
Добрый день. Сначала хотел верхнюю полоску, с выпадающим меню, но отказался от...

постраничная навигация
сделал на сайте постраничную навигацию 1 | 2 | 3 | Следующая | Последня.когда...

40
v_alena_d
0 / 0 / 1
Регистрация: 09.07.2013
Сообщений: 55
12.07.2013, 16:27  [ТС] 21
т.е. пытаться задать map координаты в процентах без толку? И ещё вопросик если к примеру сделать таблицу её можно сделать так что бы не съезжала по высоте или таблицами тоже нет смысла заморачиваться?
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
12.07.2013, 17:06 22
про проценты для мар пока не знаю что сказать - не нашел информации ( видел один сайт с мар и похоже резиновая верстка - не могу найти чтобы глянуть как они там реализовали этот момент. С таблицей лучше почитать - знаю резиновую можно делать.

Добавлено через 24 минуты
найдите внизу страницы про тег мар
http://big-wap.net/info/Web-master/gl6/gl6.html внизу страницы пишут что можно применять проценты , правда как еще не понял - главное что можно - если это осуществить все встанет на свои места и сможете закончить .

Добавлено через 2 минуты
Координаты х и у могут быть также заданы в процентах от реального размера изображения, например: SHAPE="RECT" COORDS="0.0.50Я.50Ж".
вот что обозначает я и ж пока не пойму
0
v_alena_d
0 / 0 / 1
Регистрация: 09.07.2013
Сообщений: 55
12.07.2013, 17:24  [ТС] 23
я пробовала пересчитать координаты в процентах, но dreamweavere почему то так называемые "кнопки" просто исчезли, может для этого ещё что-то нужно изменить ширина и высота у меня заданны 100% а координаты почему-то считает только в пикселах.
на месте Я и Ж обычно % вроде ставится
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
12.07.2013, 17:44 24
попробуйте размными способами потому что можно в процентах только как это осуществить вопрос пока .

Добавлено через 2 минуты
http://xhtml.co.il/ru/HTML/Создание-карты-изображения-HTML вот здесь думаю можно поэкспериментировать

Добавлено через 7 минут
http://www.puzzleweb.ru/html/examples/area.php вот здесь тоже можно поэкспериментировать .

Добавлено через 7 минут
http://webinattor.ru/html/directory-html/area.html
здесь почему то не разделяются запятыми или точками можно попробывать по разному с точками, запятыми и без знаков препинаний . - странно нет ни у кого описаний

http://rusws.ru/imagecard/ попробуйте задать пикселями
0
v_alena_d
0 / 0 / 1
Регистрация: 09.07.2013
Сообщений: 55
12.07.2013, 19:07  [ТС] 25
что-то вообще не могу найти, если в процентах, то ничего не получается. ладно если пойти совсем другим путём, сделать эту страницу с фиксированными величинами, но я не очень понимаю как сделать что бы на разных мониторах сайт выглядел одинаково, по моему там @media используется или что? Может подскажите?
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
12.07.2013, 19:36 26
можно дать фиксированные размеры боксов и разрешить скролл внизу и тогда просто на разных мониторах , особенно на меньших размерах внизу будет появляться скролл и все
0
v_alena_d
0 / 0 / 1
Регистрация: 09.07.2013
Сообщений: 55
12.07.2013, 19:43  [ТС] 27
он сам по себе очень большой, ширина 1280px, у меня телек=монитор от компа, поэтому хотелось бы что бы не уменьшать его а что бы подстраивался, т.к. на небольшом мониторе слишком уж длинная прокрутка получится

Добавлено через 2 минуты
есть же @media который используют в этих случаях кажется, но я что-то уже притормаживаю и не могу понять куда чего писать нужно
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
12.07.2013, 19:52 28
поищите в гугле где видел я для медиа - но где не помню. Если найду отпишу .

Добавлено через 3 минуты
сейчас у меня на ноутбуке нормально показывает - справа и слева есть чуть чуть фона , но это даже красит сам сайт.
0
v_alena_d
0 / 0 / 1
Регистрация: 09.07.2013
Сообщений: 55
12.07.2013, 19:56  [ТС] 29
я ещё не меняла, вот теперь видно наверняка что он большой http://v-alena-d.myjino.ru/index2.html
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
12.07.2013, 19:58 30
у меня ноут 15 дюймов - нормально показывает
0
v_alena_d
0 / 0 / 1
Регистрация: 09.07.2013
Сообщений: 55
12.07.2013, 20:07  [ТС] 31
вы по последней ссылке смотрели?
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
12.07.2013, 20:10 32
да с индексом 2
0
v_alena_d
0 / 0 / 1
Регистрация: 09.07.2013
Сообщений: 55
12.07.2013, 20:29  [ТС] 33
ну не знаю, мне всё таки хотелось бы что бы он как в изначальном варианте с процентами смотрелся, без прокрутки горизонтальной. т.к. я хочу только в index так сделать все остальные страницы сделаны с использованием процентов, как то не очень будет если первая страница будет такая большая а остальные по размеру экрана

Добавлено через 12 минут
а с @media, я так поняла что @media screen and (min-width: 900px)-здесь размеры экрана {
а здесь поведение при изменении размера}

т.е. если для основного у меня
CSS
1
2
3
4
5
6
7
8
body {
    margin: 10px auto;
    width: 95%;
    height: 100%;
    height: auto;
    min-width: 800px;
    max-width:1280px;
    background-color: #F0F0F0;
то для того чтобы на мониторе который меньше мне нужно написать @media screen and (min-width: 900px) {
CSS
1
2
3
4
5
6
margin: 10px auto;
    width: 95%;
    height: 100%;
    height: auto;
    min-width: 800px;
    max-width:1020px;
}
или как? и куда его писать?

Добавлено через 1 минуту
не могли бы вы подсказать допустим для Вашего монитора какие должны быть размеры сайта что бы он смотрелся?
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
12.07.2013, 21:01 34
вот здесь почитайте - помоему решение вашего вопроса http://rotorweb.ru/htmlcss-verstka/karty-izobrazhenij-na-css.html и вот демонстрация http://rotorweb.ru/wp-content/uploads/2008/07/css_map.html
0
v_alena_d
0 / 0 / 1
Регистрация: 09.07.2013
Сообщений: 55
12.07.2013, 21:22  [ТС] 35
вчера уже читала и порбовала, там всё в пикселах, у меня всё съезжало, т.к в основном проценты были, вот я и хочу теперь попробовать сделать с использованием @media, чтобы на разных мониторах нормально было, а отказавшись от процентов я думаю проще будет справится с навигацией
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
12.07.2013, 21:58 36
здесь
здесь
здесь можете посмотреть разные решения для вашего случая

Добавлено через 3 минуты
дело в том что можно в этих случаях все провести в процентах и тогда все будет окей
вот здесь внизу есть много ссылок на сайты с мар выберите себе подходящий и сделайте там все есть и коды и обьяснения.
здесь
будьте внимательны и все получиться.

Добавлено через 10 минут
http://www.cssplay.co.uk/menu/cssplay-responsive-image-map.html
интересный случай посмотрите

Добавлено через 4 минуты
в последнем случае все в процентах - можно сделать растягивающимся

Добавлено через 2 минуты
и ховер в таком же стили можно сделать с прозрачностью только нужно вырезать картинки по форме и все оформить

Добавлено через 3 минуты
проверил в хроме масштабируется отлично при уменьшении уменьшается и ссылки остаются на местах никуда не сьезжают

Добавлено через 11 минут
http://htmlweb.ru/html/imagemap.php вот здесь написано про проценты , как использовать в мар тегах
1
v_alena_d
0 / 0 / 1
Регистрация: 09.07.2013
Сообщений: 55
13.07.2013, 18:38  [ТС] 37
Огромнейшее Вам СПАСИБО!!!!! Наконец-то я справилась!
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
13.07.2013, 18:42 38
пришлите ссылку посмотреть как получилось
0
v_alena_d
0 / 0 / 1
Регистрация: 09.07.2013
Сообщений: 55
13.07.2013, 18:45  [ТС] 39
http://v-alena-d.myjino.ru/
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
13.07.2013, 18:58 40
да работает вижу резиновый получился - отлично безумно рад за вас . Еще можно как на том сайте с обезьянкой можно взять образ при наведении можно с прозрачностью сделать - будет немного меняться цвет при наведении мышкой - только форму площадки продумать нужно .

Добавлено через 58 секунд
в принципе на авто школе у вас не плохо придумано
0
13.07.2013, 18:58
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
13.07.2013, 18:58

Навигация Bootstrap
Как в бутстрапе сделать так, чтобы ссылки были растянуты на всю ширину, а не...

навигация(шаблон)
Как выравнить навигацию?Чтоб было красиво по центру, и одинаковый отступ между...

Не работает навигация в IE
Здравствуйте, по теме навигации. Всё работало на сколько я помню во всех...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
40
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru