Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
 
Рейтинг: Рейтинг темы: голосов - 18, средняя оценка - 4.72
v_alena_d
0 / 0 / 0
Регистрация: 09.07.2013
Сообщений: 55
#1

навигация без кнопок - HTML, CSS

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

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

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

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

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

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

Навигация меню - HTML, CSS
Перенес окно поиска под шапку, но столкнулся с проблемой, что разделы в таком случае не в один ряд выстроены, т.е. при добавлении разделов...

Боковая навигация - HTML, CSS
Помогите создать боковую панель на сайте, сам пытался но она не сбоку была, а выше текста.

40
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
10.07.2013, 19:28 #16
фон то у вас изображение не него и делайте - как вы делали через дримвиер. Также выделите на фоновом изображении области и все тоже самое и поставьте под него ссылки как раньше.
0
v_alena_d
0 / 0 / 0
Регистрация: 09.07.2013
Сообщений: 55
10.07.2013, 19:34  [ТС] #17
завтра попробую несколько вариантов и если вы не против кину коды, на сегодня мой так называемый "рабочий день закончен"))) буду рада если у Вас появятся какие-нибудь идеи помимо map как воплотить в реальность мою задумку
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
10.07.2013, 19:38 #18
зайдите СЮДА
внижнюю строчку впишите полный путь http://v-alena-d.myjino.ru/img/glavnaia.gif вот эту строчку и нажмите ок .
затем выберите вверху poly выделите поочередно все области сверху вниз . После это вверху есть to html нажмите на нее и появиться полный код - его копируете и вставляете на сайт и все встанет на свое место - не забудьте ссылки вставить- и после посмотрим .
1
v_alena_d
0 / 0 / 0
Регистрация: 09.07.2013
Сообщений: 55
12.07.2013, 12:50  [ТС] #19
Здравствуйте, в общем с map больше не хочу возиться, получилась тоже в принципе что и было когда вместо фона была картинка. Может подскажите как подправить такой вариант http://v-alena-d.myjino.ru/index.html (у вас наверняка как раз видно что съезжает вниз голубой блок я делаю на большом мониторе) в общем вопрос как сделать что бы голубой блок не выезжал вниз, а закрепился внутри div foto или div main? вот весь код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
<div id="main">
 <div id="header">
   <div class="logo" onclick="location.href='../index.html';"></div>
   <div class="contacti">
    <div id="contact">8(915)304-07-35</div>
    <div id="email">drive-house@bk.ru</div>
    <div id="kolomna">Коломна</div>
   </div>
  <div id="skclub">Спортивно-технический клуб</div>
  </div>
  <div id="foto">
   <div class="obertka">
    <div class="novosty" onclick="location. href='#';"></div>
    <div class="galereya" onclick="location. href='#';"></div>
    <div class="uslygi" onclick="location. href='#';"></div>
    <div class="komanda" onclick="location. href='#';"></div>
    <div class="avtoschola" onclick="location. href='#';"></div>
    <div class="kontakt" onclick="location. href='#';"></div>
    </div>
  </div>
</div>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
body {
    margin: 10px auto;
    width: 95%;
    height: 100%;
    height: auto;
    min-width: 800px;
    max-width:1280px;
    background-color: #F0F0F0;
}
#main {
    width:100%;
    height:900px;
    margin:10px auto;
}
#header {
    width: 100%;
    height: 120px;
    background-color: #FFF;
    background-repeat: no-repeat;
    background-origin: padding-box;
    margin: 0px auto;
    border-radius: 0px;
    text-align: center;
    bottom: auto;
    background-position: center center;
    color: #CCC;
    font-size: large;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    background-image: url(../img/backgroundheader2.gif);
    z-index: 2;
    display: block;
}
.logo {
    width: 12%;
    height: 88px;
    z-index: 2;
    background-image: url(../img/logo.gif);
    opacity: 0.75;
    background-repeat: no-repeat;
    float: left;
    cursor: pointer;
    margin-left: 44%;
    margin-top: 2px;
    min-width: 120px;
}
.contacti {
    width: 18%;
    height: auto;
    float: right;
    text-align:right;
    color: #CCCCCC;
    text-shadow: 3px 3px 2px #000000;
    margin-right:10px;
}
#contact {
    width: 100%;
    height: auto;
    float: right;
}
#kolomna {
    width:100%;
    height:auto;
    float:left;
    font-size:18px;
}
#email {
    width:100%;
    height:auto;
    font-size:14px;
    float:right;
}
#skclub {
    width: 40%;
    float: left;
    margin-left: 30%;
    font-size: 24px;
    text-align:center;
    text-shadow: 3px 3px 2px #000000;
    overflow:hidden;
    max-width:429px;
    min-width:427px;
}
#foto {
    position:relative;
    width:100%;
    height:99%;
    background-image:url(../img/glavnaia.gif);
    background-repeat:no-repeat;
    background-size:100%;
    min-width:800px;
}
.obertka {
    width: 27%;
    height: 660px;
    float: right;
    clear: both;
    background-color:#09F;
    opacity:0.4;
    text-align:center;
    margin-top: 10%;
    margin-right:30%;
    z-index:6;
}
.novosty {
    width: 60%;
    height:8%;
    display:block;
    float: right;
    margin-left:35%;
    margin-right: 5%;
    border: 1px none #000000;
    z-index: 7;
    background-color:#999;
    opacity:0.5;
    background-size: 100%;
    cursor: pointer;
    background-repeat: no-repeat;
    margin-top:7%;
    max-width:115px;
}
.galereya {
    width: 60%;
    height: 8%;
    float: right;
    display:block;
    margin-right:17%;
    margin-left:23%;
    border: 1px none #000000;
    z-index: 7;
    background-color:#999;
    opacity:0.5;
    background-size: 100%;
    cursor: pointer;
    background-repeat: no-repeat;
    margin-top:9%;
    max-width:115px;
}
.uslygi {
    width: 60%;
    height: 8%;
    float: right;
    display:block;
    margin-right:26%;
    margin-left:14%;
    border: 1px none #000000;
    z-index: 7;
    background-color:#999;
    opacity:0.5;
    background-size: 100%;
    cursor: pointer;
    background-repeat: no-repeat;
    margin-top:12%;
    max-width:115px;
    }
.komanda {
    width: 60%;
    height: 8%;
    float:left;
    display:block;
    margin-right:13%;
    margin-left:27%;
    border: 1px none #000000;
    z-index: 7;
    background-color:#999;
    opacity:0.5;
    background-size: 100%;
    cursor: pointer;
    background-repeat: no-repeat;
    margin-top:12%;
    max-width:128px;
}
.avtoschola {
    width: 60%;
    height:10%;
    float:left;
    display:block;
    margin-right:22%;
    margin-left:18%;
    border: 1px none #000000;
    z-index: 7;
    background-color:#999;
    opacity:0.5;
    background-size: 100%;
    cursor: pointer;
    background-repeat: no-repeat;
    margin-top:11%;
    max-width:117px;
}
.kontakt {
    width: 60%;
    height:8%;
    float:left;
    display:block;
    margin-right:35%;
    margin-left:5%;
    border: 1px none #000000;
    z-index: 7;
    background-color:#999;
    opacity:0.5;
    background-size: 100%;
    cursor: pointer;
    background-repeat: no-repeat;
    margin-top:11%;
    max-width:122px;
}
</style>
Добавлено через 21 час 14 минут
Здравствуйте, подскажите пожалуйста, при попытке использования map в dreamweaver cs6 когда координаты в пикселах, то всё отображается хорошо, а если пробую задать координаты в процентах, то ничего не выходит, если кто знает подскажите, что нужно для того что бы задать координаты в процентах?
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
12.07.2013, 16:08 #20
пока решение не нашел - -может быть сделать мар и его обернуть в див и этот див -ему дать размеры резиновые - хотя что это даст ? Надо думать и гуглить может какое решение уже есть в сети
0
v_alena_d
0 / 0 / 0
Регистрация: 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 / 0
Регистрация: 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 / 0
Регистрация: 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 / 0
Регистрация: 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 / 0
Регистрация: 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
12.07.2013, 19:58
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.07.2013, 19:58
Привет! Вот еще темы с ответами:

Навигация сайта - HTML, CSS
Уважаемые вебмастера в верстке шаблона новичок, учусь как гоорится. вообщем с навигацией есть две проблемы, в скринах все видно 1. блок...

Навигация по сайту - HTML, CSS
Здравствуйте! Возник такой вопрос. Как сделать некоторые разделы сайта (например, шапка сайта и навигация по сайтам сбоку) одинаковыми...

Точечная навигация - HTML, CSS
Прошу помощи. Нашел много меню наподобие этого , но нигде не встречал именно такого. Подскажите, каким образом можно сделать такую...

навигация(шаблон) - HTML, CSS
Как выравнить навигацию?Чтоб было красиво по центру, и одинаковый отступ между словами. &lt;!doctype html&gt; &lt;html lang=&quot;en&quot;&gt; ...


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

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

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