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

Блок <div> игнорирует отступ от соседнего блока

24.08.2014, 16:10. Показов 2174. Ответов 5
Метки нет (Все метки)

Делая редизайн шаблона на Денвере, столкнулся с проблемой отступа между блоками div, блоки наезжают друг на друга. Функции margin и padding в коде не помогают. Срочно нужна ваша помощь!!!
0

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

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
24.08.2014, 16:10
Ответы с готовыми решениями:

Отступ от соседнего блока
Здравствуйте. Есть блок в котором четыте блока. Как сделать чтоб каждый из этих блоков одталкивался...

Как убрать отступ div блока
Мой сайт Глупый вопрос, как убрать белый отступ блоков слева? .block1 { width: 100%; ...

Блок ul выходит из блока div
Здравствуйте великие умы:) Не судите строго, учиться только начал. ul выходит из див блока. &lt;div...

Div блок выкидывает из блока container
не пойму в чем причина, последний материнский блок (portal) не удается запихать в контейнер.. ...

5
102 / 102 / 39
Регистрация: 25.02.2014
Сообщений: 321
24.08.2014, 16:15 2
igor191, код или ссылку на сайт
0
0 / 0 / 0
Регистрация: 24.08.2014
Сообщений: 12
24.08.2014, 16:25  [ТС] 3
HTML код конфликта.
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
<aside id="sideLeft">
          <div class="block-title content">
                    <h4><i class="icon-th-list"></i>Матчи</h4>
                </div>
{include file="match_slide.tpl"}
                
        
            <!--Бомбардиры-->
            
            <div class="block-title content">
                    <h4><i class="icon-th-list"></i>Матчи</h4>
                </div>
                  <div class="turnir_table block_top2">
                    <div class="block_bottom2">
                      <div class="block_bottom">
                        <div class="block_innert">
                          <div id="sblocks_kaz">
                              <div class="standing">
                                <table class="standing">
                                    <thead><tr><th></th><th>Игрок</th><th><div style="width: 21px; height: 21px; background: url('/templates/sport/images/soccer_ball_icon.png') no-repeat center center; margin: auto; top: 15%; position: relative;"></div></th></tr></thead>
                                    <tbody>
                                        <tr><td>1</td><td>Роналду</td><td>51</td></tr>
                                        <tr><td>2</td><td>Бензема</td><td>24</td></tr>
                                        <tr><td>3</td><td>Бэйл</td><td>22</td></tr>
                                        <tr><td>4</td><td>Иско</td><td>11</td></tr>
                                        <tr><td>5</td><td>Ди Мария</td><td>11</td></tr>
                                        <tr><td>6</td><td>Мората</td><td>9</td></tr>
                                    </tbody>
                                </table>
                            </div>
                          </div>
                        </div>
                     </div>
                          </div> </div>
                       
              
        </aside> <!-- #sideLeft -->
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
/* STANDING */
@import url([url]http://fonts.googleapis.com/css?family=PT+Sans&subset=cyrillic,latin);[/url]
 
div.standing { width: 225px; height: 240px 0 0 0 0;margin: auto; overflow: hidden; border: 1px solid #39527A; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin-bottom:5px;}
div.standing * { font: 14px 'PT Sans', sans-serif; color: #000; text-align: center; }
table.standing { width: 225px; border-collapse: collapse; }
table.standing > thead { background: #5C7EB3; border-bottom: 1px solid #39527A; }
table.standing > thead > tr > th { font-weight: 700; color: #ebebeb; text-shadow: none; }
table.standing > thead > tr > th:nth-child(2) { text-align: left; padding: 0 0 0 5px; }
table.standing > tbody {}
table.standing > tbody > tr { border-bottom: 1px solid #39527A; border-top: 1px solid #39527A; }
table.standing > tbody > tr.real { background: #CED2D8; }
table.standing > tbody > tr.real > td { height: 30px; line-height: 30px; text-shadow: none; }
table.standing > tbody > tr:last-child { border: 0; }
table.standing > tbody > tr:hover { background: #5C7EB3; text-shadow: 0 1px 0 #39527A; }
table.standing > tbody > tr:hover > td { color: #fff; cursor: default; }
table.standing > tbody > tr > td {}
table.standing > tbody > tr > td:nth-child(1) { padding: 0 0 0 3px; }
table.standing > tbody > tr > td:nth-child(2) { text-align: left; padding: 0 0 0 5px; }
table.standing > thead > tr > th, table.standing > tbody > tr > td { height: 30px; line-height: 30px; margin-bottom:5px;}
 
/* MATCH SLIDE */
div#match_info * { font-family: 'Open Sans', sans-serif;font-weight: 400; font-size: 9px; letter-spacing: 1px;margin-bottom:5px;}
div#match_info { width: 250px; height: 240px; float: right; margin-bottom:50px; background: #ebebeb; background: -moz-linear-gradient(top, #ebebeb 25%, #ffffff 75%); background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,#ebebeb), color-stop(75%,#ffffff)); background: -webkit-linear-gradient(top, #ebebeb 25%,#ffffff 75%); background: -o-linear-gradient(top, #ebebeb 25%,#ffffff 75%); background: -ms-linear-gradient(top, #ebebeb 25%,#ffffff 75%); background: linear-gradient(to bottom, #ebebeb 25%,#ffffff 75%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', endColorstr='#ffffff',GradientType=0 ); box-shadow: inset 0 0 0 2px #EBEBEB, inset 0 0 1px 1px #fff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
div#match_info > div.tabs { padding: 100px 0 0 0 0; margin-bottom:5px; text-align: center; text-shadow: none; }
div#match_info > div.tabs > a { width: 120px; height: 35px; margin-bottom:5px; line-height: 20px; background: #EBEBEB; color: #39527A; display: inline-block; font-weight: bold; font-size: 12px; text-decoration: none; text-transform: uppercase; border-bottom: 2px solid #39527A; border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; }
div#match_info > div.tabs > a:hover { background: #39527A; color: #fff; }
div#match_info > div.tabs > a[onclick="match1();"] { background: #5173A8; color: #FFF; }
div#match_info > div.tabs > a[onclick="match2();"] { background: #EBEBEB; color: #5173A8; }
div#match_info > div.content { width: 250px; height: 165px;background-image: none; overflow: hidden; position: relative; }
div#match_info > div.content > div.id1 { padding: 10px; left: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
div#match_info > div.content > div.id2 { padding: 10px; left: 250px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
div#match_info > div.content > div.match { width: 250px; height: 165px; display: inline-block; position: absolute; }
div#match_info > div.content > div.match > img.emblem { width: 60px; background: #fff; padding: 10px; border-radius: 80px; box-shadow: inset 0 0 0 2px #B4B4B4, 0 2px 0 1px #FFF; display: inline-block; }
div#match_info > div.content > div.match > div.teams { width: 240px; height: 120px; margin: 0 0 0 15px; display: inline-block; position: absolute; top: 10%; }
div#match_info > div.content > div.match > div.teams > h1 { width: 90px; height: 30px; line-height: 30px; color: #FFF; background: #5173A8 url('/templates/power-css/images/match_icon.png') no-repeat; text-shadow: 0 2px 0 #39527A; display: inline-block; padding: 0 0 0 30px; border-radius: 5px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
div#match_info > div.content > div.match > div.teams > h1:hover { background-color: #345999; }
div#match_info > div.content > div.match > div.teams > h1:after { width: 24px; height: 24px; content: ""; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); background-color: inherit; position: absolute; margin: 3px 0 0 0; right: 40px; border-radius: 5px; }
div#match_info > div.content > div.match > div.teams > div { width: 30px; height: 10px; line-height: 17px; color: #39527A; text-shadow: 0 5px 0 #FFFFFF; display: inline-block; text-align: center; font-size: 14px; font-weight: bold; }
div#match_info > div.content > div.match > div.icons { width: 325px; }
div#match_info > div.content > div.match > div.icons > div.icon1,
div#match_info > div.content > div.match > div.icons > div.icon2,
div#match_info > div.content > div.match > div.icons > div.icon3 { height: 30px; line-height: 30px; color: #39527A; font-weight: 700; text-shadow: 0 1px 0 #FFF; padding: 0 0 0 30px; background: url('/templates/power-css/images/match_icon.png') no-repeat; }
div#match_info > div.content > div.match > div.icons > div.icon1 { background-position: 0 -30px; display: inline-block; }
div#match_info > div.content > div.match > div.icons > div.icon2 { background-position: 0 -60px; display: inline-block; }
div#match_info > div.content > div.match > div.icons > div.icon3 { background-position: 0 -90px; }
div#match_info > div.content > div.match > div.icons > div.icon3 > h1 { height: 30px; line-height: 30px; }
Добавлено через 2 минуты
Код 2-х блоков которые конфликтуют, с остальными вроде проблем нет.
0
102 / 102 / 39
Регистрация: 25.02.2014
Сообщений: 321
24.08.2014, 17:17 4
igor191, если честно я не вижу проблемы, заскринь что ли...
0
0 / 0 / 0
Регистрация: 24.08.2014
Сообщений: 12
24.08.2014, 17:56  [ТС] 5
Блок <div> игнорирует отступ от соседнего блока
0
0 / 0 / 0
Регистрация: 24.08.2014
Сообщений: 12
24.08.2014, 18:41  [ТС] 6
Как видите, нижний блок растягивается вверх, закрывая таблицу вверху. Отступы margin не помогают.

Добавлено через 43 минуты
РЕШИЛ ПРОБЛЕМУ ИЗМЕНЕНИЕМ ЗНАЧЕНИЯ FLOAT, Спасибо за отклики, тему можно закрыть!
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
24.08.2014, 18:41

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

Внутри родительского блока сделать отступ дочернего блока сверху автоматически
Здравствуйте, как с помощью css внутри родительского блока сделать отступ дочернего блока сверху...

Почему, когда задаю padding и margin отступ происходит у соседнего элемента, а не у того, которому задаю?
p.author{ font-size: 20px; font-weight: bold; float: left; border-bottom: 2px...

Что бы изменение размера одного блока влияло на размер соседнего
Толком даже сформулировать вопрос не получается чтобы по поисковикам пробить это решение) Поэтому и...

IE7 игнорирует div по неизвестной причине
Решил проверить страницу на разных браузерах,и особенно на IE7,и был удивлён,когда IE7 просто...


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

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

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