Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Сайт выглядит по-разному в разных браузерах

yunis.kz открывается по разному в разных браузерах в мозиле криво в хроме нормал как исправить ?
Ответ:
Сообщение от putin2017
как исправить ?
Читайте статьи про кроссбраузерность, какие особенности у разных браузеров есть.
Вопрос: Отображение кода в разных местах на разных разрешениях

Всем доброго времени суток!

Возникла задача отображать код в разных местах на разных разрешениях.

Прилагаю картинку, там все наглядно обрисовал



1) Есть есть 3 блока которым нужно назначить порядочность отображения
2) 2 первых блока, которые расположены слева заключены в свой див
3) Далее они обтекаются третьим блоком, который должен идти справа от них
4) (Блок 2) при разрешении меньше 480px, должен сместиться под блок 3
5) Решения с применением "display: none" и другими приемами скрытия не подходят. Нужно, чтобы код отображался “или там” “или там”
6) Можно и визуально блоки переставить, главное чтобы контент в исходном коде не дублировался.

Решение нужно для того, чтобы на мобильной версии не скрывать текст. А переместить его в более удобное место, чтобы сделать акцент на более важной информации. И для СЕО будет полезно. Потому что через скрытие придется дублировать контент для отображения в другом месте. Надеюсь, вы меня поймете. Думаю будет много кому полезно.

К сожалению с программированием не знаком.

Пытался копать в сторону flexbox. Но в моем случае не получается, так как "блок 1" и "блок 2" заключены в общий div.
Ответ:
S_A_N_T_A
Думаю будет много кому полезно.


Эмм.. гуглите

Вопрос: Разное отображение веб-страницы на разных разрешениях

Я сверстал страницу Pixel Perfect. Заметил, что текст(абзацы) в Windows Vista длиннее немного, чем в Windows 7.
В обоих ОС стоит обновленный chrome. Шрифт использован Arial.
CSS
1
font-family:  Arial, Helvetica, sans-serif;
)
из за чего может по разному отображаться текст в windows vista и windows 7 на веб странице ?


Vista стоит на виртуальной машине, и разрешение экрана 1366*664.
На основном ПК - Windows 7 разрешение 1366*768

Подумал, что может из за разрешения экрана. на Windows 7 уменьшил разрешение до 1366*768(800*600 тоже попробовал), наложил на макет, совпадает. в Windows Vista не совпадает(текст длиннее немного получается) из за этого у меня футер ниже получается

Из за чего такое может быть???
Ниже примеры отображения в двух ОС
На обоих ОС стоит обновленный Google Chrome
Может в разных ОС шрифт Arial по разному обрабатывается ?
Ответ: это да, но я пробовал при разрешении 800*600, в windows 7 в Chrome нормально все равно отображается)) поэтому мне кажется это не из за разрешения экрана...
Вопрос: Как сделать так, что бы текст в блоке, был в ряд, при разных разрешениях экрана

Как сделать так, что бы текст в блоке, был в ряд, при разных разрешениях экрана ?
html
HTML5
1
<div id="saa"><a id="asaa">[wp-svg-icons icon="eye" wrap="span"] Выбрать квартиру</a></div>
css
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#saa {
 background: #315efb; 
 padding: 1% 2% 1% 2%; 
 margin: 0% 10% 2% 10%; 
 width: auto;
}
 
#saa a {
 color: #fff; 
 font-size: 1.2em; 
 font-family: 'Roboto', sans-serif;"
}
#saa:hover {
 background: #303440;
 transition: 1s;
 cursor: pointer; /*Работает в Chrome, FF, IE, O*/
}
Ответ:

Не по теме:

Maksssssss, представь, пытался помочь человеку сегодня, тупо за каждое неправильно решение - дизлайк, помогай после этого людям, я, кстати, ни копейки не получаю за помощь, просто по доброте душевной хочу помочь и трачу свое время...

Вопрос: Разная шапка сайта при разном разрешении экрана

Здравствуйте.

tehreg.ru

Как можно реализовать - Разная шапка сайта при разном разрешении экрана

Дело в том, что на мобильных устройствах шапка сайта смещается, и получается непоймичто...

Вложения
1 - Хочется, чтобы было так. Слева и справа - рисунки. Посередине - текст. При разрешении 1024*600 и больше - это выглядит нормально.
3 - При разрешении 360*640 - это выглядит отвратительно. Хочется это исправить.
2 - Как вариант решения - Можно убрать правый рисунок - При разрешении менее 1024*600

Как вариант вижу (возможно, из-за недостатка опыта) - убрать правый рисунок при разрешении МЕНЕЕ 1024*600, а если разрешение 1024*600 и больше, - выводить правый рисунок. Возможно ли это? И как реализовать? Можете код написать?

Код предполагался такой


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
25
26
27
28
29
<body topmargin="0" bottommargin="0">
 
<img src="IMG/Sert-600x400s.JPG" align="left" border="0" width="240" height="156" topmargin="0" bottommargin="0">
 
<img src="IMG/Gerb.JPG" align="right" border="0" width="240" height="156" topmargin="0" bottommargin="0">
 
<table cellspacing="0" cellpadding="0" align="left">
<tr>
<td><img src="IMG/ISO.JPG" align="left" border="0" width="80" height="80">
</td>
<td><img src="IMG/EAC.JPG" align="left" border="0" width="80" height="80">
</td>
<td></td>
</tr>
<tr>
<td><img src="IMG/PCT.JPG" align="left" border="0" width="80" height="78">
</td>
<td><img src="IMG/PCT-dobr.JPG" align="left" border="0" width="80" height="78">
</td>
<td></td>
</tr>
</table>
 
.
<center>
<p><i><strong><h2>TehReg.RU
<br>Технический регламент РФ</h2></strong>
<br><b>Подтверждение соответствия продукции</b></i>
</center>

Вложение 3 - вот что получается при маленьком разрешении.
Сделал левую часть одним рисунком - при маленьком разрешении выглядит лучше.


HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<body topmargin="0" bottommargin="0">
 
<img src="IMG/TehReg.JPG" align="left" border="0" width="400" height="156" topmargin="0" bottommargin="0">
 
<img src="IMG/Gerb.JPG" align="right" border="0" width="240" height="156" topmargin="0" bottommargin="0">
 
.
<center>
<p><i><strong><h2>TehReg.RU
<br>Технический регламент РФ</h2></strong>
<br><b>Подтверждение соответствия продукции</b></i>
</center>

Хочется чтобы справа был рисунок, хотя бы при разрешении 1024*600 и больше, а при меньшем - убирать.

Заранее ОГРОМНОЕ спасибо за помощь.
Ответ: Я так понимаю, невозможно?

Если кто сталкивался - помогите, плз, код корректно поправить.
Вопрос: При разном разрешении текст отображается по-разному

на мониторах 1024х768, 1366х768 все выглядит красиво и ровно. А на мониторе 1600х768 как будто line-height становится меньше. Как решить эту проблему? Все блоки фиксированной высоты.

Вот кусок кода для навигации:

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
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
<ul id="nav" class="use-trans">
                    <li>
                        <p class="color-href-nav">Продукция для ландшафта</p>
                        <div class="submenu">
                            <ul>
                                <li class="li-submenu"><p><a href="product.html">Деревья и кусты</a></p></li>
                                <li class="li-submenu"><p><a href="product.html">Газоны</a></p></li>
                                <li class="li-submenu"><p><a href="product.html">Искусственный валун</a></p></li>
                                <li class="li-submenu"><p><a href="product.html">Грунт</a></p></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <p class="color-href-nav">Услуги по ландшафту</p>
                        <div class="submenu submenu-landshaft">
                            <ul>
                                <li class="li-submenu"><p><a href="services.html">Посадка деревьев / кустарников</a></p></li>
                                <li class="li-submenu"><p><a href="services.html">Уход за садом</a></p></li>
                                <li class="li-submenu"><p><a href="services.html">Укладка рулонного газона</a></p></li>
                                <li class="li-submenu"><p><a href="services.html">Изготовление садовых беседок</a></p></li>
                                <li class="li-submenu"><p><a href="services.html">Автополив</a></p></li>
                                <li class="li-submenu"><p><a href="services.html">Монтаж освещения на участке</a></p></li>
                                <li class="li-submenu"><p><a href="services.html">Проектирование ландшафта</a></p></li>
                                <li class="li-submenu"><p><a href="services.html">Укладка дорожек</a></p></li>
                                <li class="li-submenu"><p><a href="services.html">Подпорные стенки</a></p></li>
                                <li class="li-submenu"><p><a href="services.html">Дренаж</a></p></li>
                                <li class="li-submenu"><p><a href="services.html">Искусственные водоемы</a></p></li>
                                <li class="li-submenu"><p><a href="services.html">Планировка участка</a></p></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="projects.html"><p class="color-href-nav">Готовые проекты</p></a>
                    </li>
                    <li>
                        <a href="actions_and_news.html"><p class="color-href-nav">Акции и новости</p></a>
                    </li>
                    <li>
                        <a href="comments.html"><p class="nav-li-center color-href-nav">Отзывы</p></a>
                    </li>
                    <li>
                        <a href="articles.html"><p class="nav-li-center color-href-nav">Статьи</p></a>
                    </li>
                    <li>
                        <a href="about.html"><p class="nav-li-center color-href-nav">О компании</p></a>
                    </li>
                    <li>
                        <a href="contacts.html"><p class="nav-li-center color-href-nav">Контакты</p></a>
                    </li>
                </ul>
Вот CSS:

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
#nav{
    width: 1167px;
    height: 80px;
    margin: 30px auto 0 auto;
    display: block;
    list-style: none;
    position: relative;
    background-color: #9ab839;
    padding: 0;
    z-index: 5;
}
 
 
#nav > li{
    width: 145px;
    height: 80px;
    display: block;
    border-left: 1px solid #a1a294;
    font-family: Gotham-reg;
    font-size: 14px;
    text-transform: uppercase;
    float: left;
}
 
#nav > li:first-child{
    border: none;
}
 
#nav > li > p{
    font-family: Gotham-reg;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    padding-top: 7px;
}
 
#nav > li .nav-li-center{
    margin-top: 23px;
}
 
#nav > li > a{
    display: block;
    width: 100%;
    height: 100%;
}
 
#nav > li > a > p{
    font-family: Gotham-reg;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    padding-top: 7px;
}
 
#nav > li:hover{
    cursor: pointer;
    background-color: #fff;    
}
 
#nav > li:hover .color-href-nav{
    color: #46283d;
}
 
#nav > li:hover .submenu{
    display: block;
}
 
#nav .submenu {
    height: auto;
    display: none;
    position: absolute;
    z-index: 3;
    background: repeat-x left top #fff;
    left: 0px;
    top: 80px;
}
 
#nav .submenu-landshaft{
    left: 146px;
}
 
.li-submenu{
    color: #9ab839;
    list-style-type: disc;
}
 
.submenu ul{
    padding-left: 25px;
}
 
.li-submenu p a{
    color: #9ab839;
    font-size: 16px;
    font-family: Gotham-reg;
    text-transform: none;
}
 
.li-submenu p{
    padding-right: 31px;
}
 
.li-submenu p a:hover{
    color: #bfdd5d;
}
Вот скриншоты:





Также, можно посмотреть по адресу
Ответ: Проблему понял, дело в самом шрифте. При использовании другого шрифта, все становится нормально на всех разрешениях
Вопрос: Отображение кода в разных местах на разных разрешениях

Всем доброго времени суток!

Возникла задача отображать код в разных местах на разных разрешениях.

Прилагаю картинку, там все наглядно обрисовал

1) Есть есть 3 блока которым нужно назначить порядочность отображения
2) 2 первых блока, которые расположены слева заключены в свой див
3) Далее они обтекаются третьим блоком, который должен идти справа от них
4) (Блок 2) при разрешении меньше 480px, должен сместиться под блок 3
5) Решения с применением "display: none" и другими приемами скрытия не подходят. Нужно, чтобы код отображался “или там” “или там”
6) Можно и визуально блоки переставить, главное чтобы контент в исходном коде не дублировался.

Решение нужно для того, чтобы на мобильной версии не скрывать текст. А переместить его в более удобное место, чтобы сделать акцент на более важной информации. И для СЕО будет полезно. Потому что через скрытие придется дублировать контент для отображения в другом месте. Надеюсь, вы меня поймете. Думаю будет много кому полезно.

К сожалению с программированием не знаком.

Пытался копать в сторону flexbox. Но в моем случае не получается, так как "блок 1" и "блок 2" заключены в свой общий div.
Ответ:


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
25
26
27
28
29
30
31
32
33
34
35
36
<div class="cont">
  <div class="a">
    <div class="b">
      <p>
        Nullam id massa in sem vulputate rhoncus. Sed id felis sem. Nam mi risus, dignissim nec consectetur ut, dignissim sed nisi. Suspendisse tempor justo ac eleifend vulputate. Nam in neque nunc. Quisque neque lorem, tristique quis leo ac, molestie lacinia
        eros. Vestibulum in velit vitae diam faucibus congue. Proin nec urna a augue gravida tempus. Donec ultrices enim nec eros molestie, eget cursus erat luctus. Curabitur purus tortor, posuere vitae nunc a, feugiat euismod erat. Suspendisse ac ipsum
        eget nisl placerat laoreet eget ac risus.
      </p>
    </div>
    <div class="c">
      <p>
        Vivamus risus mi, vehicula vitae diam in, eleifend ullamcorper erat. Mauris mollis lorem vel condimentum sodales. Vivamus sit amet eleifend tellus. Fusce mattis cursus ullamcorper. Sed pulvinar turpis id faucibus venenatis. Etiam eu sagittis enim. Nulla
        facilisi. Etiam hendrerit, diam eu mattis elementum, felis dolor malesuada velit, nec posuere lorem nulla maximus tellus. Aliquam erat volutpat. Vivamus in justo sodales, hendrerit nisl a, ultricies dolor. Vestibulum ante ipsum primis in faucibus
        orci luctus et ultrices posuere cubilia Curae; Phasellus porttitor ante nunc, aliquet vulputate sapien sollicitudin ac.
      </p>
    </div>
    <div class="d">
      <p>
        Duis aliquam enim ac tellus eleifend, in laoreet dui fermentum. Nullam vestibulum pretium ipsum, id ultricies mi consectetur quis. Nam ultricies neque non augue aliquam malesuada. Sed elementum quam a ultrices tincidunt. Curabitur tempor est ultrices
        justo laoreet lobortis quis ut risus. Ut efficitur, dui sit amet suscipit sollicitudin, justo mauris hendrerit felis, in facilisis est sem a est. Nunc luctus mattis massa, at luctus nulla. Nullam vitae ex leo. Mauris auctor mattis nibh a porttitor.
        Pellentesque in magna elit. Duis feugiat lacus eget lorem auctor condimentum. Maecenas arcu risus, mattis a mi pulvinar, venenatis blandit ligula. Etiam tempor, augue id volutpat accumsan, ante tortor pretium nulla, eu tristique nibh magna sit
        amet enim. Nullam dui massa, finibus vel facilisis quis, consectetur non lorem. Vestibulum ligula nisl, malesuada a enim eu, auctor convallis orci. Proin placerat tempus dui, vel lacinia dolor finibus sed.
      </p>
      <p>
        Sed sodales nisl est, vel aliquam purus hendrerit sed. Aliquam efficitur ullamcorper facilisis. Maecenas a mi id lacus bibendum ultrices. Ut faucibus, sem vitae fringilla tempor, metus erat dignissim tellus, sit amet commodo dui libero vitae lorem. Sed
        fermentum ultricies ante, a egestas ipsum mattis sed. Nam quis augue auctor, faucibus mi ut, consequat neque. Nulla non sem vel neque laoreet facilisis. Nullam ultricies felis sit amet dui convallis mattis. Integer id interdum augue. Nunc laoreet
        gravida tempus. Maecenas venenatis consectetur lectus eget pretium. Nullam consectetur nisi ipsum, sed auctor leo placerat at. Maecenas vestibulum arcu in sagittis fermentum. Cras non facilisis augue. Curabitur non sollicitudin mauris. Aliquam
        lacinia velit non ex tempus ultricies.
      </p>
      <p>
        Vivamus condimentum lacus vitae massa sollicitudin feugiat. Cras ornare sem a luctus accumsan. Donec mattis, nibh sed interdum efficitur, ante est tincidunt arcu, in lacinia lacus nisl non nulla. Duis in tristique ligula. Ut id ligula nec justo imperdiet
        auctor. Mauris porta dignissim nibh, nec lacinia elit semper malesuada. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc ultrices rutrum aliquet.
      </p>
    </div>
  </div>
</div>
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
* {
  box-sizing: border-box;
}
 
/* 310 */
 
.cont {
  margin: 3rem auto;
  padding: 0 1rem;
}
 
.a {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 2rem;
  grid-template-rows: repeat(2, auto);
}
 
.b {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
}
 
.c {
  grid-column-start: 1;
  grid-column-end: 13;
  grid-row-start: 2;
  grid-row-end: 3;
}
 
.d {
  grid-column-start: 5;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 2;
}
 
@media (min-width: 480px) {
  .cont {
    max-width: 900px;
  }
  .b {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .c {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .d {
    grid-column-start: 5;
    grid-column-end: 13;
    grid-row-start: 1;
    grid-row-end: 3;
  }
}
Вопрос: Искажается дизайн при отображении на мониторах разного разрешения

Всем привет. Как все наверно уже поняли из названия топика, сайт по разному отображается на разных мониторах.
Как адаптировать сайт для всех разрешений? Изначально делал в разрешении 1920х1080.
P.S. Не очень силен в CSS, так что если кто может, напишите пожалуйста, как правильно использовать свойство position со значением relative. Не совсем понимаю, относительно КАКОГО исходного места позиционируется элемент.


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
208
209
210
211
212
213
214
215
216
217
218
219
#top 
{   
    z-index: 1;
    width: 100%;
    height: 25%;
    position:fixed;
    top:0%;
    left:0%;
    background-image: url(nightcity5.jpg);
}
 
#return 
{   
    z-index: 1;
    width: 100%;
    height: 25%;
    position: absolute;
    top: 75%;
    left: 0%;
    
}
 
#menu 
{   
    z-index: 1;
    width:20%;
    height:74%;
    position: fixed;
    top:26%;
    left:0%;
    
    
}
 
#base 
{
    
    width:79.25%;
    height:74%;
    position: absolute;
    top:26%;
    left:20.75%;
}
 
#topdivide 
{   
    z-index: 1;
    width: 100%;
    height: 1%;
    position: fixed;
    top:25%;
    left:0%;
    background-color: darkolivegreen;
}
 
#menubasedivide 
{   
    z-index: 1;
    width: 0.75%;
    height: 300%;
    position: fixed;
    top: 26%;
    left: 20%;
    background-color: darkolivegreen;
}
 
::-webkit-scrollbar 
{
 
    width: 0px;
 
}
 
img
{
    border: 5px solid darkolivegreen;
    width: 15%;
    height: 15%; 
}
 
body 
{
    background-color: #B8B8B8;
}
 
p
{
    padding: 25px;
    text-align: left;
    text-shadow: 1px 1px 2px black, 0 0 1em black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-color: black;
    font-size: 125%;
    color:aliceblue;
    border-width: 400;
}
 
h1 
{
    
    text-align: center;
    text-shadow: 1px 1px 2px black, 0 0 1em black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-color: black;
    font-size: 400%;
    color:aliceblue;
    border-width: 400;
 
}
 
h2
{
    
    text-align: center;
    text-shadow: 1px 1px 2px black, 0 0 1em black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-color: black;
    font-size: 70%;
    color:aliceblue;
    border-width: 200;
    padding-bottom: 20px;
 
}
 
h4
{
   text-align: center;
    text-shadow: 1px 1px 2px black, 0 0 1em black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-color: black;
    font-size: 250%;
    color:aliceblue;
    border-width: 200;
    padding-bottom: 20px;  
}
 
.container 
{ 
    width: 500px; 
    text-align: left ;
    margin: 8px;
}
 
 
.button 
{
  display: inline-block;
  height: 60px;
    width: 200px;
  line-height: 60px;
  padding-right: 45px; 
  padding-left: 80px;
  position: relative;
  background-color:darkolivegreen;
  color:aliceblue;
  
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
    
  
  
  border-radius:5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  text-shadow:0px 1px 0px rgba(0,0,0,0.5);
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";zoom:1;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);
 
  -moz-box-shadow:0px 2px 2px rgba(0,0,0,0.2);
  -webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.2);
  box-shadow:0px 2px 2px rgba(0,0,0,0.2);
  -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);
}
 
.button span 
{
  position: absolute;
  left: 0;
  width: 50px;
  background-color:rgba(0,0,0,0.5);
  text-align: center;
    
  -webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-right: 1px solid  rgba(0,0,0,0.15);
}
 
.button:hover span, .button.active span 
{
  background-color:rgb(0,102,26);
  border-right: 1px solid  rgba(0,0,0,0.3);
}
 
.button:active 
{
  margin-top: 2px;
  margin-bottom: 13px;
 
  -moz-box-shadow:0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow:0px 1px 0px rgba(255,255,255,0.5);
box-shadow:0px 1px 0px rgba(255,255,255,0.5);
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ccffffff,Positive=true)";
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ccffffff,Positive=true);
}
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
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
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link href="divsstyles.css" rel="stylesheet">
    <title> ИП "Певнев" - Счетчики учета электроэнергии "Меркурий"</title>
<!-- Подключаю jquery на сайт для использования java script через Google -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
    </script>
 <!-- Функции для загрузки страниц через ajax запросы -->   
    <script type="text/javascript">
        
    function loadmodels() 
        {
            $("#base").load("models.html");
        }
        
    function loadmain()
        {
            $("#base").load("maincontent.html");
        }
        
    function loadorder()
        {
            $("#base").load("product_order.php");
        }
    function loadreg()
        {
            $("#base").load("registration.html");
        }
    
    </script>
    </head>
    
<body>
    <div id="top" onclick="loadmain()"> 
        <h1> ИП "Певнев" - Счетчики учета электроэнергии "Меркурий" </h1> 
        <div id="return"> <h2> Кликните сюда, чтобы вернуться на стартовую страницу </h2> </div>
    </div>
    <div id="menu"> <div class="container"> <br>
        <!-- При помощи события onclick вызываю функции загрузки нужных страниц -->
        <a href="#" class="button" onclick="loadmodels()"><span>  вњ“</span><strong>Модели счетчиков</strong></a> <br> <br> 
        <a href="#" class="button" onclick="loadorder()"><span>  вњ“</span><strong>Сделать заказ</strong></a> <br> <br> 
        <a href="#" class="button" ><span>  вњ“</span><strong>Связь</strong></a> <br> <br>
        <a href="#" class="button" onclick="loadreg()"><span>  вњ“</span><strong>Регистрация</strong></a> 
</div> </div>
    <div id="base"> <iframe src="maincontent.html" width="100%" height="100%" frameborder="0"> Ваш браузер не поддерживает плавающие фреймы! </iframe> </div>
    <div id="topdivide"></div>
    <div id="menubasedivide"></div>
   
 
    
</body>
</html>
Ответ: maxon-by, благодарю
Вопрос: изменение css в зависимости от разрешения экрана

Как можно в зависимости от разрешения экрана менять один параметр в сss?
Поясню, есть фрагмент кода:
.box {
width: 80%;
background: #FFFFFF;
border: 1px solid #ABABAB;
text-align: left;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
Необходимо менять только параметр "width" в зависимости от разрешения.
Можно сделать что бы грузилась разная таблица стилей для разных разрешений, но смысл "держать" 3-4 таблицы css если меняем только один параметр.
Ответ:
Сообщение от survey
Как можно в зависимости от разрешения экрана менять один параметр в сss?
ответ на этот вопрос разжёван основательно
Вопрос: Как оптимизировать под мобильные версии + разные разрешения

Добрый есть такой код
HTML5
1
2
3
<div style="margin: 1px 1px 100px 1px">
 <a href="/#cont">Адрес магазина:</a><br>
</div>
Но проблема в том что в мобильной версии или на разных разрешениях экранов текст плавает и встает не ровно, что можно предпринять?!
Ответ: Так же можно использовать bootstrap. В нем уже есть некоторые настройки которые упростят вам адаптацию сайта.