Форум Сайтостроение Веб-строительство

HTML код, проблема с нижней частью сайта

C7
На сайте с 25.01.2009
Offline
107
chess777
622

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

Я тут сижу изучаю немного Html, многое получилось, но есть небольшая проблемка.

Смотрите, в данный момент когда сжимаешь страницы в браузере содержимое класса footer прилепает сбоку к основному контенту сайта (там где потом будут постеры с названиями фильмов).

Что и куда нужно добавить, чтобы содержимое тега

<div id="footer" >Копирайт и т.п. информация</div> прикрепилось к нижней части браузера и не совмещалось с содержимым тега <div id="content"> ?

Вот код страницы:

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Две колонки</title>

<style type="text/css">

BODY {

font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт на странице */

}

#top { /* Верхняя часть с заголовком страницы */

background: #fff; /* Цвет фона */

padding: 15px 0 15px 10px; /* Поля вокруг текста */

margin-bottom: 15px; /* Расстояние между заголовком и колонками */

font-size: 24px; /* Размер шрифта */

font-weight: bold; /* Жирное начертание */

color: black; /* Цвет символов */

}

.wrapper {

height: 100%;

}

#content { /* Основное содержание страницы */

background: #fff; /* Цвет фона */

margin-left: 235px; /* Отступ слева */

margin-bottom: 55px /* Отступ снизу */

box-sizing: border-box;

min-height: 100%;

padding-bottom: 90px;

}

#footer { /* Нижняя часть */

height: 80px;

margin-top: -80px;

}

}

H1 { /* Заголовок страницы */

text-align: center; /* Выравнивание по центру */

font-size: 210%; /* Размер шрифта */

font-family: "Times New Roman", Times, serif; /* Шрифт с засечками */

font-weight: normal; /* Нормальное начертание */

color: black; /* Цвет текста */

padding: 0; /* Убираем значение полей */

margin: 0; /* Обнуляем значения отступов */

}

#content P {

font-size: 90%; /* Размер шрифта */

text-align: justify; /* Выравнивание по ширине */

padding: 10px; /* Поля вокруг текста */

margin: 0 /* Обнуляем отступы */

}

#blok1{

border:15px solid #b5e3ff;

width:200px;

height:180px;

float:left;

background-color:b5e3ff;

}

#blok2{

border:15px solid black;

width:250px;

height:200px;

float:left;

}

#menu10 {float:left;}

#menu10 ul { list-style: none; margin: 0; padding: 0; }

#menu10 img {border: none; }

#menu10 { width: 200px; margin: 10px; }

#menu10 li a {height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif;

margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height:

24px; text-decoration: none; }

#menu10 li a:link, #menu10 li a:visited {

color: #4D4D4D; display: block; background:

url(menu10.gif);

padding: 8px 0 0 10px; }

#menu10 li a:hover { color: #FF9834;

background:

url/menu10.gif)

0 -32px; padding: 8px 0 0 10px; } </style>

</head>

<body>

<div id="top"><img src="логотип"></div>

<div id="menu10"> <ul> <li><a href="#1">Боевики

</a></li> <li><a href="#2">Link

2</a></li> <li><a href="#3">Link

3</a></li> <li><a href="#4">Link

4</a></li> <li><a

href="#5">Link5</a></li> </ul> </div>

<div id="content">

<h1>Смотреть кино онлайн</h1>

<div id="blok1">

<a href="productdetail.html"><img src="images/product/01.jpg" alt="Постер" /></a>

<h3>Название фильма</h3>

<p class="product_price">Дата выхода</p>

<a href="shoppingcart.html" class="add_to_cart">Смотреть онлайн</a>

</div> <div id="blok1">

<a href="productdetail.html"><img src="images/product/01.jpg" alt="Product 01" /></a>

<h3>Ut eu feugiat</h3>

<p class="product_price">$ 100</p>

<a href="shoppingcart.html" class="add_to_cart">Add to Cart</a>

</div> <div id="blok1">

<a href="productdetail.html"><img src="images/product/01.jpg" alt="Product 01" /></a>

<h3>Ut eu feugiat</h3>

<p class="product_price">$ 100</p>

<a href="shoppingcart.html" class="add_to_cart">Add to Cart</a>

</div>

<div id="blok1">

<a href="productdetail.html"><img src="images/product/01.jpg" alt="Product 01" /></a>

<h3>Ut eu feugiat</h3>

<p class="product_price">$ 100</p>

<a href="shoppingcart.html" class="add_to_cart">Add to Cart</a>

</div> <div id="blok1">

<a href="productdetail.html"><img src="images/product/01.jpg" alt="Product 01" /></a>

<h3>Ut eu feugiat</h3>

<p class="product_price">$ 100</p>

<a href="shoppingcart.html" class="add_to_cart">Add to Cart</a>

</div> <div id="blok1">

<a href="productdetail.html"><img src="images/product/01.jpg" alt="Product 01" /></a>

<h3>Ut eu feugiat</h3>

<p class="product_price">$ 100</p>

<a href="shoppingcart.html" class="add_to_cart">Add to Cart</a>

</div>

<div id="blok1">

<a href="productdetail.html"><img src="images/product/01.jpg" alt="Product 01" /></a>

<h3>Ut eu feugiat</h3>

<p class="product_price">$ 100</p>

<a href="shoppingcart.html" class="add_to_cart">Add to Cart</a>

</div> <div id="blok1">

<a href="productdetail.html"><img src="images/product/01.jpg" alt="Product 01" /></a>

<h3>Ut eu feugiat</h3>

<p class="product_price">$ 100</p>

<a href="shoppingcart.html" class="add_to_cart">Add to Cart</a>

</div> <div id="blok1">

<a href="productdetail.html"><img src="images/product/01.jpg" alt="Product 01" /></a>

<h3>Ut eu feugiat</h3>

<p class="product_price">$ 100</p>

<a href="shoppingcart.html" class="add_to_cart">Add to Cart</a>

</div>

</div>

<div id="footer" >Копирайт и т.п. информация</div>

</body>

</html>

Лично я учился создавать и зарабатывать на сайте здесь - манимастер (http://www.moneymaster.ru/?chess77)
Ragnarok
На сайте с 25.06.2010
Offline
226
Ragnarok
#1
chess777:
изучаю немного Html

<div id="blok1">

id как идентификатор должен быть уникальным в пределах документа

чтобы футер был под контентом, можно добавить внутрь тега с id content

<div style="width: 100%; clear: both"></div>

//TODO: перестать откладывать на потом

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий