проблема с атрибутами div

Eugene-N · May 4, 2012

Привет!

Делаю небольшой сайт по урокам, сайт делается на html/css блоках, проблема с float - в уроке (видеоуроке, так что перепутать что-то сложно) все работает, у меня ничего не работает, перепроверял 3 раза, копировал текст из идущего с уроком файла (исходный код), менял параметры, не помогает.

Вот так должно быть (я специально привожу скриншоты потому что мой код очевидно содержить ошибку - он ниже)

Вот html

Вот css

Вот результат (левое меню полностью обтекается рабочей областью и автоматически регулируется по высоте)

А вот мой код

Это html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>3D</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="keywords" content="графика">
<meta name="description" content="компьютерная графика">

<link href="verstka-div.css" rel="stylesheet" type="text/css">


</head>

<body>

<div class="MainFrame">

<div class="header">Это блок шапки сайта</div>

<div class="LeftMenu">Это блок левого меню</div>

<div class="RightMenu">Это блок правого меню</div>

<div class="WorkArea">Это рабочая область</div>

<p>Всем привет! Сегодняшний урок, будет вновь посвящён воде, как и предыдущий. Я вам расскажу как, довольно просто, создать водную гладь, солнце, волны и маленьких светлячков))) Использовать будем 3ds max 2009 и рендер Mental Ray. Давайте начнём!
</p>

<p>Шаг 1. Установка рендера.</p>

<p>Запускаем 3ds max. На данный момент, в качестве нашего рендера установлен стандартный Scanline. Давайте сменим его на ментал (Rendering > Render Setup… > Common tab > Assign Renderer > Production).
</p>
<p>Шаг 2. Базовая геометрия воды.</p>

<p>В качестве воды будем использовать обычный Plane. В виде сверху создайте наш плейн (Create panel > Geometry > Standard Primitives > Plane). И установите параметры: Length: 500, Width: 500. Сегменты оставляем по умолчанию.
</p>

<div class="footer">Это рабочая нижней части сайта</div>


</div>

</body>

</html>

Это css

.MainFrame
{
 border: 1px solid black;
 width: 900px;
 margin: 20px auto 20px; /*сверху, слева/справа, снизу*/
}

.header
{
 border: 1px solid black;
}

.LeftMenu
{
 border: 1px solid blue;
 float: left;
 overflow: hidden;
}

.RightMenu
{
 border: 1px solid green;
 float: right;
 overflow: hidden;
}

.Work Area
{
 border: 1px solid blue;
 overflow: hidden;
 padding: 20px;
}

.footer
{
 border: 1px solid red;
 overflow: hidden;
}

И вот результат

Левое и правое меню (я добавил правое меню - но параметры такие же, оно должно также работать - но я его и удалял, думал может заработает без него, все равно не получается даже с одним левым меню) - высотой в одну строчку, не растягиваются по высоте автоматически когда добавляешь текст в рабочую область (в уроке он добавляется только в рабочую область и все), и обтекания текста тоже нет

Я все параметры менял по много раз, добавлял heigth, padding, weigth и т.д. кое-что менялось, удалось даже добиться обтекания - но возникли другие проблемы, а padding вообще не работал, но самое главное где первончальная ошибка? Ребята помогите найти.

Edited May 4, 2012 by Eugene-N

troll · May 4, 2012

Я бы на вашем месте, прежде чем переходить к видеоурокам, полистал бы самоучитель HTML.

Что касается кода:

в CSS нужно убрать пробел между .Work и Area
нужно поместить основное содержимое страницы внутрь div с классом WorkArea

Edited May 4, 2012 by troll

Eugene-N · May 4, 2012

Спасибо! Разобрался! Спасибо за ссылку - буду читать!

Sign In

проблема с атрибутами div

Question

Eugene-N

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

troll

Link to comment

Share on other sites

Eugene-N

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information