Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
Evgeniy55
99 / 94 / 34
Регистрация: 14.03.2014
Сообщений: 547
1

Переместить таб вправо

06.09.2016, 18:02. Просмотров 867. Ответов 10
Метки нет (Все метки)

Добрый день, подскажите как сделать чтобы "Tab" с названием "most popular" расположить справа ?

образец кода: http://codepen.io/evgeniyproweb/pen/Gjgzpj?editors=1100

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
ul.gl_list.news_flex_mod
  li.gl_item.tabs_padding_mod
    div.news_block
      input#tab-1(type="radio", name="tab", checked)
      label(for="tab-1") design news
      input#tab-2(type="radio", name="tab")
      label(for="tab-2") contests
      input#tab-3(type="radio", name="tab")
      label(for="tab-3") global
      input#tab-4(type="radio", name="tab")
      label(for="tab-4") programming
      input#tab-5(type="radio", name="tab")
      label(for="tab-5") most popular
 
      div.news_content
        article.tabs-1
          h2.news_title Заголовок
          div.news_text
            p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi cum fuga quas quibusdam ea minima nemo illo repudiandae totam officia!
 
        article.tabs-2
          h2.news_title Заголовок
          div.news_text
            p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, ipsum?
 
        article.tabs-3
          h2.news_title Заголовок
          div.news_text
            p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore numquam, itaque laboriosam debitis temporibus incidunt, dicta dignissimos sapiente voluptatibus iusto. Voluptate, laborum libero odio nostrum consequuntur aliquid molestiae soluta optio.
 
        article.tabs-4
          h2.news_title Заголовок
          div.news_text
            p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore numquam, itaque laboriosam debitis temporibus incidunt, dicta dignissimos sapiente voluptatibus iusto. Voluptate, laborum libero odio nostrum consequuntur aliquid molestiae soluta optio.
 
        article.tabs-5
          h2.news_title Заголовок
          div.news_text
            p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore numquam, itaque laboriosam debitis temporibus incidunt, dicta dignissimos sapiente voluptatibus iusto. Voluptate, laborum libero odio nostrum consequuntur aliquid molestiae soluta optio.
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
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
 
$bg-main: #f3ede4;
$bg-1: #1a1c20;
$bg-2: #d9042b;
$bg-3: #fbfbfa;
$bg-4: #f6eee2;
$bg-5: #faefdc;
$bg-6: #f4cb89;
$bg-7: #f1e3cc;
 
$text-color-1: #d9042b;
$text-color-2: #1d2024;
$text-color-3: #303030;
$text-color-4: #9d9da1;
$text-color-5: #ffffff;
$text-color-6: #e4be81;
$text-color-7: #818181;
$text-color-8: #a67e3e;
 
$border-color-1: #dadada;
$border-color-2: #f4d4a0;
$border-color-3: #34363a;
$border-color-4: #fdfcfa;
$border-color-5: #ddad60;
$border-color-6: #b8af9f;
$border-color-7: #cdcdcd;
$border-color-8: #dbbc8a;
 
.gl_item.tabs_padding_mod {
    padding: 11px;
    background: $bg-7;
}
 
.news_block {
  label {
    display: inline-block;
    margin-right: 10px;
    padding: 10px 10px;
    color: $text-color-8;
    cursor:pointer;
  }
 
  input {
    display: none;
 
    &:checked + label {
      position: relative;
      color:  $text-color-3;
      background-color: #fff;
      border: 1px solid $border-color-8;
      border-bottom: none;
 
      &::after {
        content: "";
        position: absolute;
        z-index: 999;
        left: 0;
        right: 0;
        bottom: -2px;
        height: 2px;
        background: #fff;
      }
    }
  }//input
 
  input[id="tab-1"]:checked ~ .news_content .tabs-1,
  input[id="tab-2"]:checked ~ .news_content .tabs-2,
  input[id="tab-3"]:checked ~ .news_content .tabs-3,
  input[id="tab-4"]:checked ~ .news_content .tabs-4,
  input[id="tab-5"]:checked ~ .news_content .tabs-5  {
    display: block;
  }
 
  .news_content {
    position: relative;
  }
 
  article {
    display: none;
    width: 100%;
    min-height: 200px;
    padding: 20px 10px;
    background-color: #fff;
    border: 1px solid $border-color-8;
  }
}
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
06.09.2016, 18:02
Ответы с готовыми решениями:

Не работает Таб на сайте
<ul id="tabs"> <li id="current"><a href="#" title="tab1">Один</a></li> ...

не работает таб. стилей
добрый день, не работает таблица стилей, не могу найти причину, подскажите...

Как сделать, чтобы активный таб сливался с фоном основного блока?
Доброе время суток! Хочу сделать вот такие табы, по умолчанию 1 таб активный,...

Блок съезжает вправо
Всем привет. Есть такой код... Проблема в том, что блок cont уходит куда то...

Текст сползает вправо
Текст всегда собирается справа от изображения, нужно разместить его под...

10
mrtoxas
Модератор
Эксперт HTML/CSS
2622 / 1935 / 1204
Регистрация: 12.07.2015
Сообщений: 5,163
Записей в блоге: 3
06.09.2016, 18:07 2
Он же и так справа
0
Evgeniy55
99 / 94 / 34
Регистрация: 14.03.2014
Сообщений: 547
06.09.2016, 19:23  [ТС] 3
Цитата Сообщение от mrtoxas Посмотреть сообщение
Он же и так справа
неа ))) вот так надо (через маргин не вариант, если добавится еще одна вкладка, то просто уедет во второй ряд):
Переместить таб вправо
0
mrtoxas
Модератор
Эксперт HTML/CSS
2622 / 1935 / 1204
Регистрация: 12.07.2015
Сообщений: 5,163
Записей в блоге: 3
06.09.2016, 19:36 4
А если последнему label задать абсолютное позиционирование и выровнять по правому краю?
0
Evgeniy55
99 / 94 / 34
Регистрация: 14.03.2014
Сообщений: 547
06.09.2016, 20:16  [ТС] 5
Цитата Сообщение от mrtoxas Посмотреть сообщение
А если последнему label задать абсолютное позиционирование и выровнять по правому краю?
вправо сместил позиционированием, только не пойму как переместить еще его туда когда оно в состоянии :cheked, клацните по табу "mostpopular" - будет понятней чем я обьясняю

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
ul.gl_list.news_flex_mod
  li.gl_item.tabs_padding_mod
    div.news_block
      input#tab-1(type="radio", name="tab", checked)
      label(for="tab-1") design news
      input#tab-2(type="radio", name="tab")
      label(for="tab-2") contests
      input#tab-3(type="radio", name="tab")
      label(for="tab-3") global
      input#tab-4(type="radio", name="tab")
      label(for="tab-4") programming
      input#tab-5.news_mostpopular(type="radio", name="tab")
      label.news_mostpopular(for="tab-5") most popular
 
      div.news_content
        article.tabs-1
          h2.news_title Заголовок
          div.news_text
            p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi cum fuga quas quibusdam ea minima nemo illo repudiandae totam officia!
 
        article.tabs-2
          h2.news_title Заголовок
          div.news_text
            p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, ipsum?
 
        article.tabs-3
          h2.news_title Заголовок
          div.news_text
            p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore numquam, itaque laboriosam debitis temporibus incidunt, dicta dignissimos sapiente voluptatibus iusto. Voluptate, laborum libero odio nostrum consequuntur aliquid molestiae soluta optio.
 
        article.tabs-4
          h2.news_title Заголовок
          div.news_text
            p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore numquam, itaque laboriosam debitis temporibus incidunt, dicta dignissimos sapiente voluptatibus iusto. Voluptate, laborum libero odio nostrum consequuntur aliquid molestiae soluta optio.
 
        article.tabs-5
          h2.news_title Заголовок
          div.news_text
            p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore numquam, itaque laboriosam debitis temporibus incidunt, dicta dignissimos sapiente voluptatibus iusto. Voluptate, laborum libero odio nostrum consequuntur aliquid molestiae soluta optio.
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
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
 
$bg-main: #f3ede4;
$bg-1: #1a1c20;
$bg-2: #d9042b;
$bg-3: #fbfbfa;
$bg-4: #f6eee2;
$bg-5: #faefdc;
$bg-6: #f4cb89;
$bg-7: #f1e3cc;
 
$text-color-1: #d9042b;
$text-color-2: #1d2024;
$text-color-3: #303030;
$text-color-4: #9d9da1;
$text-color-5: #ffffff;
$text-color-6: #e4be81;
$text-color-7: #818181;
$text-color-8: #a67e3e;
 
$border-color-1: #dadada;
$border-color-2: #f4d4a0;
$border-color-3: #34363a;
$border-color-4: #fdfcfa;
$border-color-5: #ddad60;
$border-color-6: #b8af9f;
$border-color-7: #cdcdcd;
$border-color-8: #dbbc8a;
 
.gl_item.tabs_padding_mod {
    padding: 11px;
    background: $bg-7;
}
 
 
.news_block {
  position: relative;
 
  label {
    display: inline-block;
    margin-right: 10px;
    padding: 10px 10px;
    color: $text-color-8;
    cursor:pointer;
 
    &.news_mostpopular {
      color: $text-color-1;
    }
  }
 
  input {
    display: none;
 
    &:checked + label {
      position: relative;
      color:  $text-color-3;
      background-color: #fff;
      border: 1px solid $border-color-8;
      border-bottom: none;
 
      &::after {
        content: "";
        position: absolute;
        z-index: 999;
        left: 0;
        right: 0;
        bottom: -2px;
        height: 2px;
        background: #fff;
      }
    }
  }
 
  input[id="tab-1"]:checked ~ .news_content .tabs-1,
  input[id="tab-2"]:checked ~ .news_content .tabs-2,
  input[id="tab-3"]:checked ~ .news_content .tabs-3,
  input[id="tab-4"]:checked ~ .news_content .tabs-4,
  input[id="tab-5"]:checked ~ .news_content .tabs-5  {
    display: block;
  }
  input:checked ~ .news_mostpopular {
    position: absolute;
    
    &::after {
        content: "";
        position: absolute;
        z-index: 999;
        left: 0;
        right: 0;
        bottom: -2px;
        height: 2px;
        background: #fff;
      }
  }
}
 
.news_mostpopular {
  position: absolute;
  right: 0;
  top: 0;
}
 
.news_content {
  position: relative;
}
 
article[class^="tab"] {
  display: none;
  width: 100%;
  min-height: 200px;
  padding: 20px 10px;
  background-color: #fff;
  border: 1px solid $border-color-8;
}
результат: http://codepen.io/evgeniyproweb/pen/Gjgzpj?editors=1100

 Комментарий модератора 
Код из песочницы дублируем на форуме! Будете игнорировать получите карту!
0
mrtoxas
Модератор
Эксперт HTML/CSS
2622 / 1935 / 1204
Регистрация: 12.07.2015
Сообщений: 5,163
Записей в блоге: 3
06.09.2016, 20:36 6
Лучший ответ Сообщение было отмечено Fedor92 как решение

Решение

Потому что, input:checked + label (58 строка) задает ему относительное позиционирование.
Вот, перебитый стиль, для наглядности
CSS
1
2
3
input:checked ~ .news_mostpopular {
      position: absolute!important;
  }
1
Fedor92
07.09.2016, 10:42
  #7

Не по теме:

Цитата Сообщение от mrtoxas Посмотреть сообщение
Но important применяется в крайних случаях. Я вот даже сейчас, на вскидку, не могу представить где его применение оправдано.
:facepalm:

0
mrtoxas
07.09.2016, 10:46
  #8

Не по теме:

Fedor92, Доброе утро. Я написал это по-быстрому показать, что новый стиль работает, а в окончательном коде его быть не должно.

0
Evgeniy55
99 / 94 / 34
Регистрация: 14.03.2014
Сообщений: 547
07.09.2016, 14:49  [ТС] 9
Цитата Сообщение от mrtoxas Посмотреть сообщение
Не по теме:
Fedor92, Доброе утро. Я написал это по-быстрому показать, что новый стиль работает, а в окончательном коде его быть не должно.
у меня там и без important заработало, но вот только когда я начал уменьшать окно браузера, из за абсолютного позиционирования начал этот таб залезать на соседние табы, это не есть хорошо, потом уже попробую разобраться как написать на флексе, потому что в моем коде как я понимаю без флоатов, позиционирования и паддинг/маргин эту вкладку попросту не переместить, ..хочу сразу приучаться делать правильно, когда попробую на флексе сделать - сомневаюсь что без форумчан все получится, благодаря подсказкам и помощи понемногу набираю знаний
0
mrtoxas
07.09.2016, 15:02
  #10

Не по теме:

А еще вы со временем поймете, что во флоатах ничего плохого нет :D

0
Evgeniy55
99 / 94 / 34
Регистрация: 14.03.2014
Сообщений: 547
07.09.2016, 15:11  [ТС] 11
Цитата Сообщение от mrtoxas Посмотреть сообщение
Не по теме:
А еще вы со временем поймете, что во флоатах ничего плохого нет

Не по теме:

дело в том что я сейчас пытаюсь к коллективу одному присоединиться, они малость занимаются обучением(бесплатно) если у тебя уже есть какие то знания по html(+jade), css(+scss) + понимание методолгии бэм, резиновой + адаптивной верстки, и на всем этом можешь сверстать сайт, но не гарантируют что попадешь именно к ним, покрайней мере знания еще приобрету, точно не повредит, так вот, как мне сказали они флоаты максимум могут использовать для изображения, а так только флексы и инлайн блоки, поэтому поскольку сейчас выполняю задание что дали, стараюсь не юзать то, на что явно потом укажут))

0
07.09.2016, 15:11
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
07.09.2016, 15:11

Картинка съезжает вправо
Всем доброго дня. Сайт http://temp.zakaztao.ru/ С ПК отображается нормально....

Как прижать таблицу вправо?
Нужно прижать таблицу к правому краю экрана. Вот так работает, но валидатор...

Выпадающее меню сдвигается вправо
Выпадающее меню сдвигается вправо, причем сдвигается только li, ul вроде как на...


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

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

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