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

Как закрепить див под таблицей

23.07.2015, 23:48. Просмотров 506. Ответов 6
Метки нет (Все метки)

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

Имею такой HTML код:

HTML5
1
2
3
4
5
<table  width="100%"> ... </table>
<div class="add_inf_horb" >&nbsp;
    <div class="add_inf_horb_l" ></div>
    <div class="add_inf_horb_r" ></div>
</div>


CSS код:

CSS
1
2
3
.add_inf_horb {height:3px;background:url(/images/add_inf_hor_border.png) repeat-x;}
.add_inf_horb_l {float:left;height:3px;width:50px; background:url(/images/add_inf_hor_border_left.png) repeat-x;}
.add_inf_horb_r {float:right;height:3px;width:50px; background:url(/images/add_inf_hor_border_right.png) repeat-x;}


Высота таблицы не фиксирована.

При отобрадении внутренние дивы остаются под таблицей, а внешний див поднимаестя вверх и становится вверху за таблицей.

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

Как из ДИВ-блоков верстают сайты с двумя и более колонками, ведь по умолчанию ДИВ-блоки располагаются один под другим?
Большинство сайтов имеют боковые колонки (так называемые сайтбары), как их делают с помощью блочной...

Див прячется под другой див
Ребята такие дела, при добавлении в один див контента, он расширяется автоматически и залазит под...

Как разместить див фиксированно над подвалом, но под сайдбаром? (посмотрите рисунок)
Когда много текста: Когда мало текста: Как сделать чтобы нужный див был под левой...

Как скрыть элемент див при клике на другой див?
Есть див с id и у див есть фон с картинкой, мне надо, чтобы при клике на него скрывался другой...

6
Эксперт HTML/CSS
2943 / 2507 / 1063
Регистрация: 15.12.2012
Сообщений: 9,389
Записей в блоге: 9
23.07.2015, 23:52 2
culver, добавьте внешнему диву свойство float:left, как вариант...
0
0 / 0 / 0
Регистрация: 16.04.2013
Сообщений: 25
23.07.2015, 23:57  [ТС] 3
Но он тогда сомкнётся. Я хочу, что бы он занимал всю ширину таблицы. По сути, этими дивами я хочу сделать декоративный горизонтальный разделитель между таблицей и последующим контентом.
0
Эксперт HTML/CSS
2943 / 2507 / 1063
Регистрация: 15.12.2012
Сообщений: 9,389
Записей в блоге: 9
24.07.2015, 00:09 4
culver, тогда не понимаю сути вопроса... Вот скрин...

Как закрепить див под таблицей


Красным выделены границы таблицы... Зелёные границы и внешнего дива и синим выделены вложенные блоки... Как видите внешний див находится под таблицей...
0
0 / 0 / 0
Регистрация: 16.04.2013
Сообщений: 25
24.07.2015, 00:14  [ТС] 5
Прошу, прощения, я цветоаномал, синий вижу, красный от зелёного отличаю плохо.
Но, как я понял, у Вас внешний див располагается под таблицей.
Почему же тогда у меня он заскакивает за таблицу. Подскажите куда копать.
0
Эксперт HTML/CSS
2943 / 2507 / 1063
Регистрация: 15.12.2012
Сообщений: 9,389
Записей в блоге: 9
24.07.2015, 00:23 6
Цитата Сообщение от culver Посмотреть сообщение
Почему же тогда у меня он заскакивает за таблицу. Подскажите куда копать.
Даже не знаю, что Вам подсказать... Возможно в Ваших стилях css есть правило, которое конфликтует с правилами для дива, которые Вы прописали... Таким свойством может, например быть position:absolute... Вот код, который я набросал...

Кликните здесь для просмотра всего текста
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
<!DOCTYPE HTML>
<html>
    <head>
        <title>Database Site Template</title>
        <meta charset="utf-8">
    </head>
    <style>
        html, body{width:100%;height:100%;  margin:0}
      .add_inf_horb {height:3px;background:url(/images/add_inf_hor_border.png) repeat-x; border:2px solid green}
.add_inf_horb_l {float:left;height:3px;width:50px; background:blue}
.add_inf_horb_r {float:right;height:3px;width:50px; background:blue}
table, tr,td{border:2px solid red}
    </style>
    <body>
<table  width="100%"> ... 
    <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
    </tr>
    <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
    </tr>
    <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
    </tr>
    <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
    </tr>
</table>
 
<div class="add_inf_horb" >&nbsp;
    <div class="add_inf_horb_l" ></div>
    <div class="add_inf_horb_r" ></div>
</div>
    </body>
</html>


Сравните со своим может найдёте ответ...
1
0 / 0 / 0
Регистрация: 16.04.2013
Сообщений: 25
24.07.2015, 00:35  [ТС] 7
Спасибо, решил проблему добавлением width:100%; float:left; к стилям внешнего дива. Но почему он заскакивал - так и не понял.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
24.07.2015, 00:35

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

див под дивом
body{ background-color: #E8E8E8; } .logo{ position: relative; top: 50px; margin: 0...

ДИВ под ДИВом, событие маусмув
Логика работы скрипта такова: юзер кликает на див и тащит его мышкой, пока кнопка нажата, центр...

Адаптивные див блоки друг под другом
Здравствуйте! подскажите как можно реализовать то что на картинке? del заднюю рамку без...

проблема с див-ной версткой, пропадают надписи на сайте, недозакрыты многовложенные див-чики
проблема с div-ной версткой, пропадают надписи на сайте, недозакрыты многоложенные див-чики....


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

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

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