Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
23 / 21 / 5
Регистрация: 15.12.2015
Сообщений: 261
1

Несколько блоков используют один класс, как сделать разные отступы?

28.06.2019, 11:21. Просмотров 367. Ответов 2
Метки нет (Все метки)


Есть виджет (таблица)
имеет стили
выводится в 3 разных местах
соответственно применяются общие стили, как сделать чтобы обратиться к стилю чтобы не изменить другой?

добавить класс не получиться, т.к. вся таблица вызывается виджетом

можно как то сделать это через указатель или еще как ?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
28.06.2019, 11:21
Ответы с готовыми решениями:

Как сделать несколько блоков, исчезающих одновременно, при наведении хотя бы на один их них
Как сделать несколько блоков, исчезающих одновременно, при наведении хотя бы на один их них? ...

Как сделать отступы у блоков
Как сделать чтоб в красном блоке по бока был отступ по 10 от синего ,а синих блоков отступ по 2...

Как сделать отступы у блоков
Как сделать чтоб отступ от блоков в средине красных контейнеров от красных был по 10 ,а между собой...

Как сделать несколько активных блоков?
Доброго времени суток...сразу сори если вопрос туповат...только начинаю осваивать верстку ...

__________________
Помогаю в написании курсовых работ и дипломов здесь.
2
279 / 200 / 79
Регистрация: 28.08.2013
Сообщений: 461
28.06.2019, 12:00 2
Вы можете группировать стили
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Таблица размеров обуви</title>
        <style>
            .tbl {
                border-collapse: collapse
                border: 1px solid black;
            }
            .m1 {
                margin: 10px;
            }
            .m2 {
                margin: 50px;
            }
            .m3 {
                margin: 150px;
            }
        </style>
    </head>
    <body>
        <table class="tbl m1">
            <caption>Таблица размеров обуви</caption>
            <tr>
                <th>Россия</th>
                <th>Великобритания</th>
                <th>Европа</th>
                <th>Длина ступни, см</th>
            </tr>
            <tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr>
            <tr><td>35,5</td><td>4</td><td>36⅔</td><td>23–23,5</td></tr>
            <tr><td>36</td><td>4,5</td><td>37⅓</td><td>23,5</td></tr>
            <tr><td>36,5</td><td>5</td><td>38</td><td>24</td></tr>
            <tr><td>37</td><td>5,5</td><td>38⅔</td><td>24,5</td></tr>
            <tr><td>38</td><td>6</td><td>39⅓</td><td>25</td></tr>
            <tr><td>38,5</td><td>6,5</td><td>40</td><td>25,5</td></tr>
            <tr><td>39</td><td>7</td><td>40⅔</td><td>25,5–26</td></tr>
            <tr><td>40</td><td>7,5</td><td>41⅓</td><td>26</td></tr>
            <tr><td>40,5</td><td>8</td><td>42</td><td>26,5</td></tr>
            <tr><td>41</td><td>8,5</td><td>42⅔</td><td>27</td></tr>
            <tr><td>42</td><td>9</td><td>43⅓</td><td>27,5</td></tr>
            <tr><td>43</td><td>9,5</td><td>44</td><td>28</td></tr>
            <tr><td>43,5</td><td>10</td><td>44⅔</td><td>28–28,5</td></tr>
            <tr><td>44</td><td>10,5</td><td>45⅓</td><td>28,5–29</td></tr>
            <tr><td>44,5</td><td>11</td><td>46</td><td>29</td></tr>
            <tr><td>45</td><td>11,5</td><td>46⅔</td><td>29,5</td></tr>
            <tr><td>46</td><td>12</td><td>47⅓</td><td>30</td></tr>
            <tr><td>46,5</td><td>12,5</td><td>48</td><td>30,5</td></tr>
            <tr><td>47</td><td>13</td><td>48⅔</td><td>31</td></tr>
            <tr><td>48</td><td>13,5</td><td>49⅓</td><td>31,5</td></tr>
        </table>
 
        <table class="tbl m2">
            <caption>Таблица размеров обуви</caption>
            <tr>
                <th>Россия</th>
                <th>Великобритания</th>
                <th>Европа</th>
                <th>Длина ступни, см</th>
            </tr>
            <tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr>
            <tr><td>35,5</td><td>4</td><td>36⅔</td><td>23–23,5</td></tr>
            <tr><td>36</td><td>4,5</td><td>37⅓</td><td>23,5</td></tr>
            <tr><td>36,5</td><td>5</td><td>38</td><td>24</td></tr>
            <tr><td>37</td><td>5,5</td><td>38⅔</td><td>24,5</td></tr>
            <tr><td>38</td><td>6</td><td>39⅓</td><td>25</td></tr>
            <tr><td>38,5</td><td>6,5</td><td>40</td><td>25,5</td></tr>
            <tr><td>39</td><td>7</td><td>40⅔</td><td>25,5–26</td></tr>
            <tr><td>40</td><td>7,5</td><td>41⅓</td><td>26</td></tr>
            <tr><td>40,5</td><td>8</td><td>42</td><td>26,5</td></tr>
            <tr><td>41</td><td>8,5</td><td>42⅔</td><td>27</td></tr>
            <tr><td>42</td><td>9</td><td>43⅓</td><td>27,5</td></tr>
            <tr><td>43</td><td>9,5</td><td>44</td><td>28</td></tr>
            <tr><td>43,5</td><td>10</td><td>44⅔</td><td>28–28,5</td></tr>
            <tr><td>44</td><td>10,5</td><td>45⅓</td><td>28,5–29</td></tr>
            <tr><td>44,5</td><td>11</td><td>46</td><td>29</td></tr>
            <tr><td>45</td><td>11,5</td><td>46⅔</td><td>29,5</td></tr>
            <tr><td>46</td><td>12</td><td>47⅓</td><td>30</td></tr>
            <tr><td>46,5</td><td>12,5</td><td>48</td><td>30,5</td></tr>
            <tr><td>47</td><td>13</td><td>48⅔</td><td>31</td></tr>
            <tr><td>48</td><td>13,5</td><td>49⅓</td><td>31,5</td></tr>
        </table>
 
        <table class="tbl m3">
            <caption>Таблица размеров обуви</caption>
            <tr>
                <th>Россия</th>
                <th>Великобритания</th>
                <th>Европа</th>
                <th>Длина ступни, см</th>
            </tr>
            <tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr>
            <tr><td>35,5</td><td>4</td><td>36⅔</td><td>23–23,5</td></tr>
            <tr><td>36</td><td>4,5</td><td>37⅓</td><td>23,5</td></tr>
            <tr><td>36,5</td><td>5</td><td>38</td><td>24</td></tr>
            <tr><td>37</td><td>5,5</td><td>38⅔</td><td>24,5</td></tr>
            <tr><td>38</td><td>6</td><td>39⅓</td><td>25</td></tr>
            <tr><td>38,5</td><td>6,5</td><td>40</td><td>25,5</td></tr>
            <tr><td>39</td><td>7</td><td>40⅔</td><td>25,5–26</td></tr>
            <tr><td>40</td><td>7,5</td><td>41⅓</td><td>26</td></tr>
            <tr><td>40,5</td><td>8</td><td>42</td><td>26,5</td></tr>
            <tr><td>41</td><td>8,5</td><td>42⅔</td><td>27</td></tr>
            <tr><td>42</td><td>9</td><td>43⅓</td><td>27,5</td></tr>
            <tr><td>43</td><td>9,5</td><td>44</td><td>28</td></tr>
            <tr><td>43,5</td><td>10</td><td>44⅔</td><td>28–28,5</td></tr>
            <tr><td>44</td><td>10,5</td><td>45⅓</td><td>28,5–29</td></tr>
            <tr><td>44,5</td><td>11</td><td>46</td><td>29</td></tr>
            <tr><td>45</td><td>11,5</td><td>46⅔</td><td>29,5</td></tr>
            <tr><td>46</td><td>12</td><td>47⅓</td><td>30</td></tr>
            <tr><td>46,5</td><td>12,5</td><td>48</td><td>30,5</td></tr>
            <tr><td>47</td><td>13</td><td>48⅔</td><td>31</td></tr>
            <tr><td>48</td><td>13,5</td><td>49⅓</td><td>31,5</td></tr>
        </table>
    </body>
</html>
0
1013 / 671 / 289
Регистрация: 04.04.2013
Сообщений: 2,686
28.06.2019, 19:20 3
Цитата Сообщение от cardo Посмотреть сообщение
можно как то сделать это через указатель или еще как ?
Обращайтесь к стилям виджета через родительский элемент. Ведь если виджет выводится в разных местах, то и родители разные.
К примеру:
CSS
1
2
3
4
5
6
.content .widget{
  background-color: #000;
}
.sidebar .widget{
  font-weight: bold;
}
HTML5
1
2
3
4
5
6
7
<div class="content">
    <div class="widget"></div>
</div>
 
<div class="sidebar">
    <div class="widget"></div>
</div>
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
28.06.2019, 19:20

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь или здесь.

Несколько блоков-один стиль
У меня есть блоки m1, m2,m3 Как оформить один css для них.

Две одновременные разные анимации для двух блоков расположенных один поверх другого
Есть такая HTML разметка &lt;div class=&quot;course-image&quot;&gt; &lt;img...

Разные button используют один и тот же массив
Доброго времени суток. Есть задача создать программу, в которой в textbox вбивается количество...

Разные private void используют один и тот массив
Привет!Подскажите, пожалуйста, как объявить массив, что бы он был виден во всех разделах. Т.е. в...


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

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

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