Помогите разобраться с тр?хколоночным макетом

Stran · January 5, 2008

Помогите ПЖС разобраться с тр?хколоночным и двухколоночным макетами на дивах.

Задача: сделать тр?хколоночный макет с шапкой и подвалом (примитивный - хочу разобраться, без всяких там "чтобы меньше 800 не сжимался") при условии что высота колонок определяется их содержимым, и следовательно неизвесно какая из колонок окажется "самой длинной"

Я взял двухколоночный макет Влада (с это сайта) но и там при увеличении объ?ма текста в колонке "Меню" подвал прилипает к колонке сбоку.

Попытался заключить колонки в общий

но это не помогло.

Листинг:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#middle {
 border: dotted 1px black; /* Параметры рамки */
 }
#top { /* Верхняя часть с заголовком страницы */
 background: #e3e8cc; /* Цвет фона */
 border: solid 1px black; /* Параметры рамки */
 padding: 15px 0px 15px 10px; /* Поля вокруг текста */
 margin-bottom: 15px; /* Расстояние между заголовком и колонками */
 font-size: 24px; /* Размер шрифта */
 font-weight: bold; /* Жирное начертание */
 color: black; /* Цвет символов */
}
#menu { /* Навигация по сайту */
 width: 100px; /* Ширина меню */
 background: #e3e8cc; /* Цвет фона */
 border: solid 1px black; /* Параметры рамки */
 float: left; /* Состыковка с другим слоем по горизонтали */
 padding: 3px; /* Поля вокруг текста */
}

#content { /* Основное содержание страницы */
 background: #e3e8cc; /* Цвет фона */
 border: solid 1px black; /* Параметры рамки */
 margin-left: 115px; /* Отступ слева */
 margin-bottom: 15px /* Отступ снизу */
}
#bottom { /* Нижняя часть */
 background: #e3e8cc; /* Цвет фона */
 border: solid 1px black; /* Параметры рамки */
 font-size: 90%; /* Размер шрифта */
 padding: 3px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div id="top">Заголовок сайта</div>
<div id="middle">
<div id="menu">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla
facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla
facilisi.</div>
<div id="content">
<h1>заголовок</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla
facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</div>
</div>
<div id="bottom">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
</div>
</body>
</html>

Отсюда вопросы:

1) Почему не помогло?

2) Как сделать тр?хколоночный резиновый макет по вышеозначеным условиям?

walaby · January 5, 2008

чтобы не прилипал подвал - задай ему отступ сверху, например

margin-top: 10px;

это в css для bottom...

но в коде нет двух колонок - посмотри сам, там только div id content - а нужен еще сайдбар, обращайся если что!

насчет резины - посмотри ЗДЕСЬ

Stran · January 6, 2008

Спасибо.

Попробовал - не помогло - подвал сместился относительно

но правя колонка осталась длиннее него. Будет возможность проверь сам.

Вроде и колонок там в коде две (я их внутрь middle засунул, надеялся поможет)

walaby · January 6, 2008

Спасибо.
Попробовал - не помогло - подвал сместился относительно
но правя колонка осталась длиннее него. Будет возможность проверь сам.
Вроде и колонок там в коде две (я их внутрь middle засунул, надеялся поможет)
обнови код!
суть в том, что у тебя div middle должен держать все дочерние дивы от топа до футера в рамке, втч и footer посередине (вроде), а ты походу после footer поставил только один
, а надо два: один закрывает div footer, другой div middle.

Stran · January 6, 2008

вс?, наш?л косяк

надо было в свойство слоя middle добавить

width: 100%;

и тогда вс? становиться нормально - подвал уползает ниже любой из колонок

Спасибо за помощь, одна голова хорошо а две и думают веселее

Правда боюсь что это мой не последний вопрос ))

Dimitry Wolotko · January 6, 2008

mmm "Проблемы с версткой"

Sign In

Помогите разобраться с тр?хколоночным макетом

Question

Stran

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

walaby

Link to comment

Share on other sites

Stran

Link to comment

Share on other sites

walaby

Link to comment

Share on other sites

Stran

Link to comment

Share on other sites

Dimitry Wolotko

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information