Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Компоновка страниц без table / 12 сообщений из 12, страница 1 из 1
22.04.2015, 08:09
    #38942111
olegov
olegov
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Компоновка страниц без table
Всю жизнь делал компоновку страниц с помощью 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:56
    #38942121
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Компоновка страниц без table
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, 09:07
    #38942127
olegov
olegov
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Компоновка страниц без table
krvsa, overflow: hidden; ну екарный бабай !!! Спасибо !!! )))
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.04.2015, 09:20
    #38942134
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Компоновка страниц без table
olegovВсю жизнь делал компоновку страниц с помощью table. Тут обкритиковали всего, обозвали как могли и сказали, что это давно не модно ))) 17546101
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.04.2015, 15:15
    #38942660
hVostt
hVostt
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Компоновка страниц без table
olegov,

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

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

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

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

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

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

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

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

das is fantastish ))
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Компоновка страниц без table / 12 сообщений из 12, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 523ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1446071]:
 0ms
get settings:
 7ms
get forum list:
 17ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 179ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 61ms
get tp. blocked users:
 2ms
others: 233ms
total:  523ms
x
x
Закрыть


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