Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.98/40: Рейтинг темы: голосов - 40, средняя оценка - 4.98
1 / 1 / 0
Регистрация: 24.02.2014
Сообщений: 19
1

Как сделать чтобы Border не влиял на отступы

25.05.2017, 13:33. Показов 8312. Ответов 8
Метки нет (Все метки)

Всем привет !
Столкнулся с такой ситуацией:
У меня есть меню:
[del]
Как сделать чтобы Border не влиял на отступы


Я хочу чтобы при наведении ссылка обводилась в border, но так чтобы меню не скакало
но что я не пробовал всё равно есть проблемы:
[del]
При наведении на li отступ:
Как сделать чтобы Border не влиял на отступы

[del]
li отступ куда навожу и так скачет в верх:
Как сделать чтобы Border не влиял на отступы

[del]
При наведении на ссылку скачет меню влево:
Как сделать чтобы Border не влиял на отступы


Само меню взял на сайтах с HTML компонентами, и решил его переделать так как это меню наиболее подходило.

Вот структура меню:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<header class="cd-auto-hide-header">
    <div class="logo"><a href="http://localhost:3000/#0"><img src="./Сайт с чатом_files/normal-logo64x64.png" alt=""></a></div>
 
    <nav class="cd-primary-nav">
        <a href="http://localhost:3000/#cd-navigation" class="nav-trigger">
            <span>
                <em aria-hidden="true"></em>
            </span>
        </a> <!-- .nav-trigger -->
 
        <ul id="cd-navigation">
            <li class="liPad"><a class="aBorder" href="http://localhost:3000/#0" >Гравная</a></li>
            <li class="liPad"><a class="aBorder" href="http://localhost:3000/#0" >Our Products</a></li>
            <li class="liPad"><a class="aBorder" href="http://localhost:3000/#0" >Our Services</a></li>
            <li class="liPad"><a class="aBorder" href="http://localhost:3000/#0" >Shopping tools</a></li>
            <li class="liPad"><a class="aBorder" href="http://localhost:3000/#0" >Контакты</a></li>
            <li><a href="http://localhost:3000/#0"><img class="mobileSocialF" src="./Сайт с чатом_files/fc49x49.png" alt=""><span class="noTextSocial">Мы в FaceBook</span></a></li>
            <li><a href="http://localhost:3000/#0"><img class="mobileSocialT" src="./Сайт с чатом_files/twit49x49.png" alt=""><span class="noTextSocial">Мы в Twitter</span></a></li>
            <li><a href="http://localhost:3000/#0"><img class="mobileSocialI" src="./Сайт с чатом_files/inst49x49.png" alt=""><span class="noTextSocial">Мы в Instagram</span></a></li>
        </ul>
    </nav> <!-- .cd-primary-nav -->
</header> <!-- .cd-auto-hide-header -->

А вот это css скаченного меню, на строке 188 я пытался что-то сделать:
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
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
/* --------------------------------
 
Primary style
 
-------------------------------- */
 
 
html {
  font-size: 62.5%;
}
 
body {
  font-size: 1.6rem;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #25283D;
  background-color: #ECF0F1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
a {
  color: #777;
  text-decoration: none;
}
 
 
/* --------------------------------
 
1. Auto-Hiding Navigation - Simple
 
-------------------------------- */
.cd-auto-hide-header {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
}
.cd-auto-hide-header::after {
  clear: both;
  content: "";
  display: block;
}
.cd-auto-hide-header.is-hidden {
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}
@media only screen and (min-width: 1024px) {
  .cd-auto-hide-header {
    height: 80px;
  }
}
 
.cd-auto-hide-header .logo,
.cd-auto-hide-header .nav-trigger {
  position: absolute;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
 
.cd-auto-hide-header .logo {
  left: 5%;
}
.cd-auto-hide-header .logo a, .cd-auto-hide-header .logo img {
  display: block;
}
 
.cd-auto-hide-header .nav-trigger {
  /* vertically align its content */
  display: table;
  height: 100%;
  padding: 0 1em;
  font-size: 1.2rem;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 400;
  right: 0;
}
.cd-auto-hide-header .nav-trigger span {
  /* vertically align inside parent element */
  display: table-cell;
  vertical-align: middle;
}
.cd-auto-hide-header .nav-trigger em, .cd-auto-hide-header .nav-trigger em::after, .cd-auto-hide-header .nav-trigger em::before {
  /* this is the menu icon */
  display: block;
  position: relative;
  height: 2px;
  width: 22px;
  background-color: #212121;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.cd-auto-hide-header .nav-trigger em {
  /* this is the menu central line */
  margin: 6px auto 14px;
  -webkit-transition: background-color .2s;
  transition: background-color .2s;
}
.cd-auto-hide-header .nav-trigger em::before, .cd-auto-hide-header .nav-trigger em::after {
  position: absolute;
  content: '';
  left: 0;
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
}
.cd-auto-hide-header .nav-trigger em::before {
  /* this is the menu icon top line */
  -webkit-transform: translateY(-6px);
      -ms-transform: translateY(-6px);
          transform: translateY(-6px);
}
.cd-auto-hide-header .nav-trigger em::after {
  /* this is the menu icon bottom line */
  -webkit-transform: translateY(6px);
      -ms-transform: translateY(6px);
          transform: translateY(6px);
}
@media only screen and (min-width: 1024px) {
  .cd-auto-hide-header .nav-trigger {
    display: none;
  }
}
.nav-open nav ul li a{
  color: #212121;
}
.cd-auto-hide-header.nav-open .nav-trigger em {
  /* transform menu icon into a 'X' icon */
  background-color: rgba(255, 255, 255, 0);
}
.cd-auto-hide-header.nav-open .nav-trigger em::before {
  /* rotate top line */
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.cd-auto-hide-header.nav-open .nav-trigger em::after {
  /* rotate bottom line */
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
 
.cd-primary-nav {
  display: inline-block;
  float: right;
  height: 100%;
  padding-right: 5%;
}
.cd-primary-nav > ul {
  position: absolute;
  z-index: 2;
  top: 60px;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  display: none;
  box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);
}
.cd-primary-nav > ul a {
  /* target primary-nav links */
  display: block;
  height: 50px;
  line-height: 50px;
  padding-left: 5%;
  color: #ffffff;
  font-size: 1.8rem;
  border-top: 1px solid #f2f2f2;
}
 
.liPad:hover{
padding-top: 13px;
margin: 0 21px 0 0;
}
.liPad{
padding-top: 13px;
margin: 0 21px 0 0;
}
header:(.aBorder) .liPad{
    padding-top: 8px;
margin: 0 16px 0 0;
}
.aBorder:hover{
  color: #ffffff;
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  padding: 3px 7px 3px 7px;
  font-family: Arial;  
  border: solid #ffffff 2px;
  text-decoration: none;
}
 
@media only screen and (min-width: 1024px) {
  .cd-primary-nav {
    /* vertically align its content */
    display: table;
  }
  .cd-primary-nav > ul {
    /* vertically align inside parent element */
    display: table-cell;
    vertical-align: middle;
    /* reset mobile style */
    position: relative;
    width: auto;
    top: 0;
    padding: 0 0 0 40px;
    background-color: transparent;
    box-shadow: none;
  }
  .cd-primary-nav > ul::after {
    clear: both;
    content: "";
    display: block;
  }
  .cd-primary-nav > ul li {
    display: inline-block;
    float: left;
    margin-right: 1.5em;
  }
  .cd-primary-nav > ul li:last-of-type {
    margin-right: 0;
  }
  .cd-primary-nav > ul a {
    /* reset mobile style */
    height: auto;
    line-height: normal;
    padding: 0;
    border: none;
  }
}
 
.nav-open .cd-primary-nav ul,
.cd-primary-nav ul:target {
  /*
    show primary nav - mobile only
    :target is used to show navigation on no-js devices
  */
 
  display: block;
}
 
@media only screen and (min-width: 1024px) {
  .nav-open .cd-primary-nav ul,
  .cd-primary-nav ul:target {
    display: table-cell;
  }
 
}
 
/* --------------------------------
 
2. Auto-Hiding Navigation - with Sub Nav
 
-------------------------------- */
.cd-secondary-nav {
  position: relative;
  z-index: 1;
  clear: both;
  width: 100%;
  height: 50px;
  background-color: #25283D;
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
}
.cd-secondary-nav::after {
  /* gradient on the right - to indicate it's possible to scroll */
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  height: 100%;
  width: 35px;
  background: transparent;
  background: -webkit-linear-gradient(right, #25283D, rgba(37, 40, 61, 0));
  background: linear-gradient(to left, #25283D, rgba(37, 40, 61, 0));
  pointer-events: none;
  -webkit-transition: opacity .2s;
  transition: opacity .2s;
}
.cd-secondary-nav.nav-end::after {
  opacity: 0;
}
.cd-secondary-nav ul, .cd-secondary-nav li, .cd-secondary-nav a {
  height: 100%;
}
.cd-secondary-nav ul {
  /* enables a flex context for all its direct children */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0 5%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cd-secondary-nav ul::after {
  clear: both;
  content: "";
  display: block;
}
.cd-secondary-nav li {
  display: inline-block;
  float: left;
  /* do not shrink - elements float on the right of the element */
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
.cd-secondary-nav li:last-of-type {
  padding-right: 20px;
}
.cd-secondary-nav a {
  display: block;
  color: #ffffff;
  opacity: .6;
  line-height: 50px;
  padding: 0 1em;
}
.cd-secondary-nav a:hover, .cd-secondary-nav a.active {
  opacity: 1;
}
@media only screen and (min-width: 1024px) {
  .cd-secondary-nav {
    height: 70px;
    overflow: visible;
  }
  .cd-secondary-nav ul {
    /* reset mobile style */
    display: block;
    text-align: center;
  }
  .cd-secondary-nav li {
    /* reset mobile style */
    float: none;
    -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
            flex-shrink: 1;
  }
  .cd-secondary-nav a {
    line-height: 70px;
  }
  .cd-secondary-nav a.active {
    box-shadow: inset 0 -3px #8F3985;
  }
 
 
}
@media only screen and (max-width: 1023px) {
  *, *::after, *::before {
    box-sizing: border-box;
  }
.mobileSocialI{
  padding: 9px 0 0 0;
  content: url('../img/instDarc32x32.png');
}
.mobileSocialF{
  padding: 9px 0 0 0;
  content: url('../img/fcDarc32x32.png');
}
.mobileSocialT{
  padding: 9px 0 0 0;
  content: url('../img/twitDarc32x32.png');
 
}
.logo img{
  content: url('../img/normal-logo49x49Darc.png');
}
.noTextSocial{
  padding: 0 0 0 10px;
}
.cd-auto-hide-header .logo {
  left: 45%;
}
}
@media only screen and (min-width: 1024px) {
  .noTextSocial{
    display: none;
  }
 
}
/* --------------------------------
 
3. Auto-Hiding Navigation - with Sub Nav + Hero Image
 
-------------------------------- */
.cd-secondary-nav.fixed {
  position: fixed;
  top: 60px;
}
.cd-secondary-nav.slide-up {
  -webkit-transform: translateY(-60px);
      -ms-transform: translateY(-60px);
          transform: translateY(-60px);
}
@media only screen and (min-width: 1024px) {
  .cd-secondary-nav.fixed {
    top: 80px;
    /* fixes a bug where nav and subnab move with a slight delay */
    box-shadow: 0 -6px 0 #25283D;
  }
  .cd-secondary-nav.slide-up {
    -webkit-transform: translateY(-80px);
        -ms-transform: translateY(-80px);
            transform: translateY(-80px);
  }
}
 
/* --------------------------------
 
Main content
 
-------------------------------- */
.cd-main-content {
  padding: 60px 0 0 0;
  overflow: hidden;
}
.cd-main-content.sub-nav {
  /* to be used if there is sub nav */
  padding-top: 110px;
}
.cd-main-content.sub-nav-hero {
  /* to be used if there is hero image + subnav */
  padding-top: 0;
}
.cd-main-content.sub-nav-hero.secondary-nav-fixed {
  margin-top: 50px;
}
.cd-main-content p {
  max-width: 1024px;
  line-height: 1.6;
  margin: 2em auto;
  font-family: Arial, sans-serif;
  color: #a5a8a9;
}
@media only screen and (min-width: 1024px) {
  .cd-main-content {
    padding-top: 0;
  }
  .cd-main-content.sub-nav {
    padding-top: 150px;
  }
  .cd-main-content.sub-nav-hero.secondary-nav-fixed {
    margin-top: 70px;
  }
  .cd-main-content p {
    font-size: 2.4rem;
  }
}
 
/*
    adjust the positioning of in-page links
    [url]http://nicolasgallagher.com/jump-links-and-viewport-positioning/[/url]
*/
.cd-main-content.sub-nav :target::before,
.cd-main-content.sub-nav-hero :target::before {
  display: block;
  content: "";
  margin-top: -50px;
  height: 50px;
  visibility: hidden;
}
@media only screen and (min-width: 1024px) {
  .cd-main-content.sub-nav :target::before,
  .cd-main-content.sub-nav-hero :target::before {
    margin-top: -70px;
    height: 70px;
  }
}
 
/* --------------------------------
 
Intro Section
 
-------------------------------- */
.cd-hero {
  /* vertically align its content */
  display: table;
  width: 100%;
  margin-top: 60px;
  height: 300px;
  background: url(../img/cd-hero-background.jpg) no-repeat center center;
  background-size: cover;
}
.cd-hero .cd-hero-content {
  /* vertically align inside parent element */
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .cd-hero {
    height: 400px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-hero {
    height: 600px;
    margin-top: 80px;
  }
}
Исходники (Сохранённая страница) скинул во вложения.

Если кто может подскажите что поправить и как.

Спасибо!

 Комментарий модератора 
Изображения и любые другие файлы загружайте на форум! (Правила п.4.11)
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Вложения
Тип файла: rar Desktop.rar (46.0 Кб, 0 просмотров)
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
25.05.2017, 13:33
Ответы с готовыми решениями:

Как сделать чтобы opacity не влиял на блоки которые в нем
&lt;div class=&quot;login-back&quot;&gt; &lt;div class=&quot;login-menu&quot;&gt; &lt;/div&gt; &lt;/div&gt; ...

Как сделать, чтобы размер шрифра в виндах не влиял на размер шрифтов в проге?
Я столкнулся с такой проблемой : написал программу, которая занимает 800x600 пикселей на экране...

Как сделать чтобы у страницы были отступы
То есть чтобы ни просто текст был распластан по всей странице а с отступами слева и справа

Как сделать, чтобы один border перекрывал второй
Подскажите решение: #header .logo { float: left; border-top: 10px solid #000; height: 100px;...

8
16 / 16 / 11
Регистрация: 17.06.2016
Сообщений: 61
25.05.2017, 14:24 2
Попробуйте такой хайфхак:

CSS
1
2
3
4
5
6
7
.box1{
    border: 1px solid transparent;
}
.box1:hover{
    border: 1px solid red;
    transition: border 0.6s ease 0s;    
}
0
1 / 1 / 0
Регистрация: 24.02.2014
Сообщений: 19
25.05.2017, 14:37  [ТС] 3
Не получилось
Примерно тоже что и было, только анимировано
0
107 / 101 / 35
Регистрация: 14.03.2014
Сообщений: 586
25.05.2017, 16:32 4
чтобы меню не скакало при наведении из за бордера, замените бордер на box-shadow, только не забудьте написать чтобы тень была внутрь, т.е. "inset"

Добавлено через 3 минуты
например

CSS
1
box-shadow: inset 0 0 2px red;
0
1 / 1 / 0
Регистрация: 24.02.2014
Сообщений: 19
26.05.2017, 00:08  [ТС] 5
Решение интересное
покапал немного не нашел как его увеличить в размераз
он просто обводит ссылку и всё чтобы я не делал...
но всё равно спасибо!

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

Добавлено через 24 минуты
нашел решение:
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
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
<!DOCTYPE html>
<!-- saved from url=(0024)http://localhost:3000/#0 -->
<html lang="ru"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./Сайт с чатом_files/loyautNoIndex.css">
    <link rel="stylesheet" href="./Сайт с чатом_files/loyautNoIndexBaner.css">
    <link href="./Сайт с чатом_files/css" rel="stylesheet">
    <link href="./Сайт с чатом_files/css(1)" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="./Сайт с чатом_files/menu.css">
<link rel="stylesheet" href="./Сайт с чатом_files/resetmenu.css">
    <link rel="stylesheet" href="./Сайт с чатом_files/menu.css">
      <title>Сайт с чатом</title>
<script src="./Сайт с чатом_files/jquery.min.js.Без названия"></script><script language="JavaScript" type="text/javascript" src="./Сайт с чатом_files/paralax.js.Без названия"></script></head>
 
 
  <body style="background-color: #212121; padding 0; margin 0;">
        <link href="./Сайт с чатом_files/css" rel="stylesheet">
 
 
 
<header class="cd-auto-hide-header">
    <div class="logo"><a href="http://localhost:3000/#0"><img src="./Сайт с чатом_files/normal-logo64x64.png" alt=""></a></div>
 
    <nav class="cd-primary-nav">
        <a href="http://localhost:3000/#cd-navigation" class="nav-trigger">
            <span>
                <em aria-hidden="true"></em>
            </span>
        </a> <!-- .nav-trigger -->
 
        <ul id="cd-navigation">
            <li class="liPad"><a class="aBorder" href="http://localhost:3000/#0" >Гравная</a></li>
            <li class="liPad"><a class="aBorder" href="http://localhost:3000/#0" >Our Products</a></li>
            <li class="liPad"><a class="aBorder" href="http://localhost:3000/#0" >Our Services</a></li>
            <li class="liPad"><a class="aBorder" href="http://localhost:3000/#0" >Shopping tools</a></li>
            <li class="liPad"><a class="aBorder" href="http://localhost:3000/#0" >Контакты</a></li>
            <li><a href="http://localhost:3000/#0"><img class="mobileSocialF" src="./Сайт с чатом_files/fc49x49.png" alt=""><span class="noTextSocial">Мы в FaceBook</span></a></li>
            <li><a href="http://localhost:3000/#0"><img class="mobileSocialT" src="./Сайт с чатом_files/twit49x49.png" alt=""><span class="noTextSocial">Мы в Twitter</span></a></li>
            <li><a href="http://localhost:3000/#0"><img class="mobileSocialI" src="./Сайт с чатом_files/inst49x49.png" alt=""><span class="noTextSocial">Мы в Instagram</span></a></li>
        </ul>
    </nav> <!-- .cd-primary-nav -->
</header> <!-- .cd-auto-hide-header -->
 
 
<script>if( !window.jQuery ) document.write('<script src="js/jquery-3.0.0.min.js"><\/script>');</script>
<script src="./Сайт с чатом_files/main.js.Без названия"></script> <!-- Resource jQuery -->
 
        <main class="cd-main-content">
            <div class="baner banerParalaxTop">
                    <h1 class="h1Baner">Сайт с чатом</h1>
            </div>
            <div class="content Paralax" style="transform: translate(0%, 0%);">
                        
<ol>
  <li>Конфигурация при помощи nconf</li>
  <li>Страницы и веб-сервисы на Express</li>
  <li>Шаблонизация на EJS (+partials, helpers, layouts)</li>
  <li>Авторизация, сессии в Connect</li>
  <li>Защищённые сервисы и страницы (для авторизованных)</li>
  <li>Чат через COMET (Sock.JS, также можно Socket.IO и WS.JS)</li>
  <li>Работа с базой данных (MongoDB, Mongoose)</li>
  <li>Асинхронные цепочки вызовов (Async)</li>
  <li>Логирование (winston + фабрика логгеров по модулю)</li>
</ol>
 
 
<p>Требования к примеру:</p>
 
<ol>
  <li>Простой и понятный код</li>
  <li>Архитектура пригодна для разработки и расширения</li>
  <li>Можно запустить в кластере</li>
</ol>
                    <div class="footerBox">
  <div class="socialFooterbox">
    <span>
    <ul>
      <li><a href="http://localhost:3000/#0"><img src="./Сайт с чатом_files/fc49x49.png" alt=""></a></li>
      <li><a href="http://localhost:3000/#0"><img src="./Сайт с чатом_files/twit49x49.png" alt=""></a></li>
      <li><a href="http://localhost:3000/#0"><img src="./Сайт с чатом_files/inst49x49.png" alt=""></a></li>
    </ul>
    </span>
  </div>
</div>
 
            </div>
 
        </main>
 
 
 
</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
@media only screen and (min-width: 1024px) {
  .cd-primary-nav {
    /* vertically align its content */
    display: table;
  }
  .cd-primary-nav > ul {
    /* vertically align inside parent element */
    display: table-cell;
    vertical-align: middle;
    /* reset mobile style */
    position: relative;
    width: auto;
    top: 0;
    padding: 0 0 0 40px;
    background-color: transparent;
    box-shadow: none;
  }
  .cd-primary-nav > ul::after {
    clear: both;
    content: "";
    display: block;
  }
  .cd-primary-nav > ul li {
    display: inline-block;
    float: left;
    /*margin: 0 0 0 21px;*/
  }
  .cd-primary-nav > ul li:last-of-type {
    margin-right: 0;
  }
  .cd-primary-nav > ul a {
    /* reset mobile style */
    height: auto;
    line-height: normal;
    padding: 0;
    border: none;
  }
 
  .liPad{
padding-top: 13px;
margin: 0 10px 0 10px;
 
}
.liPad:hover{
        padding-top: 6px;
        margin: 0 3px 0 3px;
}
.liPad:hover .aBorder{
    padding: 5px; /* Поля */
    border: 2px solid #fff; /* Параметры рамки */
    -moz-box-sizing: border-box; /* Для Firefox */  
    box-sizing: border-box;
}
 
}
изменения с 39 строке.

возможно куму нибудь пригодится

Спасибо всем кто откликнулся!
0
31 / 19 / 7
Регистрация: 08.05.2017
Сообщений: 92
26.05.2017, 00:44 6
Ммм... Не очень понял, в чём заключается решение на 39 строке, ну да ладно.

Чтобы появление границы не увеличивало ширину элемента, используй

CSS
1
box-sizing: border-box;
Действие будет примерно такое, как для box-shadow с inline, т.е. границы и padding будут уходить внутрь элемента, не влияя на ширину/высоту.
1
107 / 101 / 35
Регистрация: 14.03.2014
Сообщений: 586
26.05.2017, 00:54 7
Цитата Сообщение от Kornerupin Посмотреть сообщение
Действие будет примерно такое, как для box-shadow с inline, т.е. границы и padding будут уходить внутрь элемента, не влияя на ширину/высоту.
плюс box-shadow в том что на него можно поставить transition, и будет все плавно и красиво, но минус в том, что если такого будет много на сайте, то оно существенно загружает сайт, тут уже на выбор чего хочется ))
1
16 / 16 / 11
Регистрация: 17.06.2016
Сообщений: 61
26.05.2017, 06:58 8
Лучший ответ Сообщение было отмечено Bulbash554 как решение

Решение

Посмотрите реализацию хайфхака (вот ссылка):

HTML5
1
2
3
4
5
6
7
<ul>
  <li><a href="#">Lorem ipsum</a></li>
  <li><a href="#">Lorem ipsum</a></li>
  <li><a href="#">Lorem</a></li>
  <li><a href="#">Lorem ipsum</a></li>
  <li><a href="#">Lorem</a></li>
</ul>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
ul{
  background: blue;
  padding: 10px;
}
ul li{
  display: inline-block;
}
ul li a{
  display: inline-block;
  border: 2px solid transparent;
  font-size: 16px;
  color: #fff;
  padding: 10px;
  
}
ul li a:hover{
  border: 2px solid red;
  transition: border 0.6s ease 0s;
}
Отступ бордера можно отрегулировать с помощью строчки
CSS
1
padding: 10px;
3
1 / 1 / 0
Регистрация: 24.02.2014
Сообщений: 19
26.05.2017, 10:23  [ТС] 9
Цитата Сообщение от sit_a Посмотреть сообщение
Посмотрите реализацию хайфхака (вот ссылка):
Спасибо!
сохраню себе на будущее
уверен что пригодится!

по поводу моего решения
оно заключается вот в этом:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.liPad{
padding-top: 13px;
margin: 0 10px 0 10px;
 
}
.liPad:hover{
        padding-top: 6px;
        margin: 0 3px 0 3px;
}
.liPad:hover .aBorder{
    padding: 5px; /* Поля */
    border: 2px solid #fff; /* Параметры рамки */
    -moz-box-sizing: border-box; /* Для Firefox */  
    box-sizing: border-box;
}
а именно в изменении pading и marger
+ ранее бы margen у li c права
поделил его на две части и всё стало на много проще
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
26.05.2017, 10:23

Как сделать, чтобы border-right у всех был по наибольшему блоку
как сделать, чтобы border-right у всех был по наибольшему блоку?

Как сделать отступы или , чтобы входной поток(ввода) отдельно от вывода
#include &lt;iostream&gt; #define MAX_N 100 using namespace std; class Stack { int st_size=0;...

Освещение в Юнити (Чтобы на игрока не влиял источник света!)
Доброго времени суток!!! Подскажите пожалуйста, можно ли сделать так, чтобы на персонажа не...

Border-top и border-bottom сделать шарами
здравствуйте, не могу сделать границы рамки шарами, т.е. border-bottom: 15px dotted black; - будут...


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

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

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