ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Компоновка страниц без table
12 сообщений из 12, страница 1 из 1
Компоновка страниц без table
    #38942111
olegov
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
olegov
Участник
Всю жизнь делал компоновку страниц с помощью table. Тут обкритиковали всего, обозвали как могли и сказали, что это давно не модно ))) Смирился. Пробую на div и сразу затык.

Цель - заполучить страничку с зафиксированным контентом по середине (как верхняя на картинке).

Раньше я это делал по колхозному (с использованием table) и всё нормально работало

Код: html
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.
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body style="background-color: #000000; padding: 0px; margin: 0px;">
        <div id="headerBlock" style="background-color: #00ffcc; text-align: center;">
            <div id="headerContent" style="height: 100px; width: 1020px; margin: 0 auto; text-align: left; background-color: #ccffcc;">
                Шапочка
            </div>
        </div>
        <div id="mainBlock" style="background-color: #ffffff; text-align: center;">
            <div id="contentBlock" style="width: 1020px; margin: 0 auto; text-align: left; background-color: #f7f7f7;">
                <table style="width: 100%; min-height: 500px;">
                    <tr>
                        <td id="leftContentBlock" style="background-color: #77b9ff;">
                            Содержание
                        </td>
                        <td id="rightContentBlock" style="width: 250px; background-color: #fff099;">
                            Элементы управления
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="footer" style="text-align: center; background-color: #686868;">
            <div id="footerContent" style="height: 100px; width: 1020px; margin: 0 auto; text-align: left; background-color: #898989;">
                Подвальчик
            </div>
        </div>
    </body>
</html>



Теперь пытаюсь на дивах

Код: html
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.
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body style="background-color: #000000; padding: 0px; margin: 0px;">
        <div id="headerBlock" style="background-color: #00ffcc; text-align: center;">
            <div id="headerContent" style="height: 100px; width: 1020px; margin: 0 auto; text-align: left; background-color: #ccffcc;">
                Шапочка
            </div>
        </div>
        <div id="mainBlock" style="background-color: #ffffff; text-align: center;">
            <div id="contentBlock" style="width: 1020px; margin: 0 auto; text-align: left; background-color: #f7f7f7;">
                <div id="leftContentBlock" style="float: left; width: 770px; background-color: #77b9ff; min-height: 500px;">
                    Содержание
                </div>
                <div id="rightContentBlock" style="float: right; width: 250px; background-color: #fff099; min-height: 500px;">
                    Элем енты управления
                </div>
            </div>
        </div>
        <div id="footer" style="text-align: center; background-color: #686868;">
            <div id="footerContent" style="height: 100px; width: 1020px; margin: 0 auto; text-align: left; background-color: #898989;">
                Подвальчик
            </div>
        </div>
    </body>
</html>



Т.е. на div блоки mainBlock и contentBlock больше не растягиваются по вертикали.
Как это правильно делается ?


Пишу как умею. Дорого, долго...
...
Рейтинг: 0 / 0
22.04.2015, 08:09
| Ответить | Цитировать | Написать  
Компоновка страниц без table
    #38942121
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
olegovРаньше я это делал по колхозному (с использованием table) и всё нормально работало
Нормально сделано. Т.ч. не переживай.
olegovТ.е. на div блоки mainBlock и contentBlock больше не растягиваются по вертикали.
Просто добавь воды (с) ;)

olegovКак это правильно делается ?
Чем сложнее верстка - тем больше у нее вариантов...

Код: html
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.
<!DOCTYPE html>
<html>
<head>
</head>
    <body style="background-color: #000000; padding: 0px; margin: 0px;">
        <div id="headerBlock" style="background-color: #00ffcc; text-align: center;">
            <div id="headerContent" style="height: 100px; width: 1020px; margin: 0 auto; text-align: left; background-color: #ccffcc;">
                Шапочка
            </div>
        </div>
        <div id="mainBlock" style="background-color: #ffffff; text-align: center;">
            <div id="contentBlock" style="width: 1020px; overflow: hidden; margin: 0 auto; text-align: left; background-color: #f7f7f7;">
                <div id="leftContentBlock" style="float: left; width: 770px; background-color: #77b9ff; min-height: 500px;">
                    Содержание
                </div>
                <div id="rightContentBlock" style="float: right; width: 250px; background-color: #fff099; min-height: 500px;">
                    Элем енты управления
                </div>
            </div>
        </div>
        <div id="footer" style="text-align: center; background-color: #686868;">
            <div id="footerContent" style="height: 100px; width: 1020px; margin: 0 auto; text-align: left; background-color: #898989;">
                Подвальчик
            </div>
        </div>
</body>
</html>
...
Рейтинг: 0 / 0
22.04.2015, 08:56
| Ответить | Цитировать | Написать  
Компоновка страниц без table
    #38942127
olegov
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
olegov
Участник
krvsa, overflow: hidden; ну екарный бабай !!! Спасибо !!! )))
...
Рейтинг: 0 / 0
22.04.2015, 09:07
| Ответить | Цитировать | Написать  
Компоновка страниц без table
    #38942134
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
olegovВсю жизнь делал компоновку страниц с помощью table. Тут обкритиковали всего, обозвали как могли и сказали, что это давно не модно ))) 17546101
...
Рейтинг: 0 / 0
22.04.2015, 09:20
| Ответить | Цитировать | Написать  
Компоновка страниц без table
    #38942660
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
olegov,

учи FLEX , таблицы -- вафельный совковый отстой, вёрстка на дивах с float -- фуфлище галимое детский сад и вообще блюээээ.
...
Рейтинг: 0 / 0
22.04.2015, 15:15
| Ответить | Цитировать | Написать  
Компоновка страниц без table
    #38942663
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
krvsaЧем сложнее верстка - тем больше у нее вариантов...

..тем "незаменимей" верстальщик с признаками сказочного.. шамана.

вёрстка должна быть простой и незамысловатой
...
Рейтинг: 0 / 0
22.04.2015, 15:16
| Ответить | Цитировать | Написать  
Компоновка страниц без table
    #38944053
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
olegov,

вот очень простой шаблон на DIV-ах, полезный контентт находится в тексте первым, а потом уже содержимое header, footer и проч...

 

Код: html
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.
<!DOCTYPE html>
<html>
<head>
<title>html_template_div_left</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* { margin:0; padding:0; word-wrap: break-word; }
html, body { width:100%; height:100%; }
#container {
	position:relative;
	margin:0 auto;
	min-height:100%;
	width:960px;
	background:orange;
}
#content { min-height:100px; margin-left:100px; padding:20px; background:orange; }
#left { position:absolute; left:0; top:0; bottom:0; width:80px; padding: 20px 10px; background:silver; }
.shiftheader { width:100%; height:100px; }
#header {
	position:absolute;
	top:0; left:0; width:100%; height:100px;
	color:white; background:red;
}
#shiftfooter { clear:both; width:100%; height:100px; }
#footer {
	position:relative;
	clear:both;
	margin-top:-100px; margin-left:auto; margin-right:auto;
	width:960px; height:100px;
	color:white; background:navy;
}
</style>
<script>
</script>
</head>
<body>
<div id='container'>
	<div class="shiftheader"></div>
	<div id='content'>
		<p>Текст</p>
	</div>
	<div id="shiftfooter"></div>
	<div id='left'>
		<div class="shiftheader"></div>
		<p>Левая колонка</p>
	</div>
	<div id='header'>Заголовок</div>
</div>
<div id="footer">Подвал</div>
</body>
</html>

...
Рейтинг: 0 / 0
24.04.2015, 02:36
| Ответить | Цитировать | Написать  
Компоновка страниц без table
    #38944055
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
AntonariyolegovВсю жизнь делал компоновку страниц с помощью table. Тут обкритиковали всего, обозвали как могли и сказали, что это давно не модно ))) 17546101
Кстати, насчёт того, что растягивание ячеек таблиц относится к любым элементам: 17556846

Вообще-то таблицы нужны, но для отображения именно табличной информации.

Не стоит противопоставлять вёрстку на таблицах против вёрстки на дивах, всё полезно когда нужно.
...
Рейтинг: 0 / 0
24.04.2015, 02:41
| Ответить | Цитировать | Написать  
Компоновка страниц без table
    #38944134
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
hVostt , да ты нам просто глаза раскрыл!
...
Рейтинг: 0 / 0
24.04.2015, 08:40
| Ответить | Цитировать | Написать  
Компоновка страниц без table
    #38944157
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
бухалтер фантоцциAntonariyпропущено...
17546101
Кстати, насчёт того, что растягивание ячеек таблиц относится к любым элементам: 17556846 я имел ввиду по умолчанию, без break-word.

бухалтер фантоцциВообще-то таблицы нужны, но для отображения именно табличной информации.

Не стоит противопоставлять вёрстку на таблицах против вёрстки на дивах, всё полезно когда нужно.никогда я такой ерундой не занимался :)
...
Рейтинг: 0 / 0
24.04.2015, 09:19
| Ответить | Цитировать | Написать  
Компоновка страниц без table
    #38945049
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
Antonariyбухалтер фантоцциВообще-то таблицы нужны, но для отображения именно табличной информации.

Не стоит противопоставлять вёрстку на таблицах против вёрстки на дивах, всё полезно когда нужно.никогда я такой ерундой не занимался :)
это я для ТС написал, чтобы не вёлся особо на "модные" направления.
...
Рейтинг: 0 / 0
24.04.2015, 22:40
| Ответить | Цитировать | Написать  
Компоновка страниц без table
    #38945089
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
krvsa hVostt , да ты нам просто глаза раскрыл!

das is fantastish ))
...
Рейтинг: 0 / 0
25.04.2015, 00:36
| Ответить | Цитировать | Написать  
12 сообщений из 12, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Компоновка страниц без table
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38944053&tid=1446071]:
 0ms
get settings:
 9ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 168ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 54ms
get tp. blocked users:
 1ms
others: 210ms
total:  476ms
созд. / загр.: 476ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]