Табл.верстка. Подвал внизу

lex63 · December 8, 2011

Делаю курсовик-сайт по Web-дизайну. Т.к. это первая работа на HTML, а срок поджимает выбрал табличный тип верстки. Возникла проблема, не получается опустить подвал сайта вниз. Ни с помощью CSS, ни средствами HTML. Прошу помощи

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Шаблон</title>
<link rel="stylesheet" type="text/css" href="style/page.css">
</head>
<body>
<!-- Общий контейнер -->
<table cellpadding='0px' id='container'>
  <!-- Шапка сайта -->
  <tr> 
    <td   id='header'><h2>Глобальная компьютерная сеть Internet</h2>
   </tr>
  <tr>
  <!-- Основной контейнер -->
    <td>
 	<table id='main'>
      <tr>
  <!-- Меню -->
        <td id='menu'>
<ul id='menulist'>
        <li><a href='www/index.html'>Главаная страница</a></li>
        <li><a href='www/history.html'>История развития</a></li>
        <li><a href='www/struktura_i_printsip_raboty.html'>Структура и принцип работы</a></li>
        <li><a href='www/sistema_adresatsii.html'>Система адресации</a></li> 
        <li><a href='www/protokoly.html'>Протоколы передачи данных</a>
        	<ul>
            	<li><a href='#'>Прикладной уровень (IMAP,POP3,SMTP,HTTP,SNMP)</a></li>
            	<li><a href='#'>Сеансовый уровень (SSL,TSL)</a></li>
            	<li><a href='#'>Транспортный уровень (TCP,UDP)</a></li>
            	<li><a href='#'>Сетевой уровень (ICMP, IGMP)</a></li>
            	<li><a href='#' class="brd">Канальный уровень (Arcnet, Ethernet)</a></li>
            </ul>   
        </li>
        <li><a href='www/slugby.html'>Основные службы</a>
        	<ul>
            	<li><a href='#'>World Wide Web</a></li>
           	  	<li><a href='#'>E-mail</a></li>
            	<li><a href='#'>FTP</a></li>
            	<li><a href='#'>Телеконференция</a></li>
                <li><a href='#'>Чат</a></li>
                <li><a href='#' class='brd'>ICQ</a></li>
            </ul>  
        </li>
        <li><a href='www/poisk.html'>Поиск информации в Internet</a></li> 
        <li><a href="www/glossariy.html">Глоссарий</a></li>
        <li><a href="www/test.html">Тест</a></li>
        <li><a href="www/about.html">О сайте</a></li>
</ul>
          </td>
  <!-- Контент -->
        <td id='content'><p> </p></td>
      </tr>
    </table></td>
  <!-- Конец основной части -->
  </tr>
  <!-- Подвал сайта -->
  <tr>
    <td id='footer'><p>
    <a href="www/about.html">О сайте</a><br> <a href="mailto:">Обратная связь</a></p>
    </td>
  </table>
<!-- Конец общего контейнера -->
</body>
</html>

@charset "utf-8";
/*Общие настройки документа*/
body, html {
	margin:0px; /*Убираем отступы*/
	padding:0px;
	background:url(../img/back1.png);
}
h2 {
	text-align: center;
}
h3 {
	text-align: left;
}
/*Общий контейнер*/
#container {
	width: 90%;
	margin: 0 auto;
	background: #FFF;
	border-spacing: 0px;
}
#container td {
	vertical-align: top;
}
/*Стиль шапки сайта*/
#header {
	height: 80px;
	background: #369;
	padding: 5px;
	text-align: center;
	vertical-align: central;
	font-size: 24px;
	color: #fff;
}
/*Стиль подвала*/
#footer {
	padding: 3px 7px;
	background-color: #999;
	color: #000;
	font-size: 12px;
	text-align: right;
}
#footer a {
	color: #000;
	text-decoration: none;
}
#footer a:hover {
	background: #C9C;
	color: #FFF;
}
#footer p {
	padding: 0px;
	margin: 0px;
}
/*Основной контейнер*/
#main {
	width: 100%;
	border-spacing: 0px;
}
/*Меню сайта*/
#menu {
	padding: 0px;
	width: 200px;
}
ul#menulist { /*Настройки списка для меню*/
	width: auto; /* Ширина меню */
	list-style: none; /* Для списка убираем маркеры */
	margin: 0; /* Нет отступов вокруг */
	padding: 0; /* Убираем поля вокруг текста */
	font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
	font-size: 10pt; /* Размер названий в пункте меню */
}
li ul {
	position: absolute; /* Подменю позиционируются абсолютно */
	display: none; /* Скрываем подменю */
	margin-left: 150px; /* Сдвигаем подменю вправо */
	margin-top: -2em; /* Сдвигаем подменю вверх */
	list-style: none;
}
li a {
	display: block; /* Ссылка как блочный элемент */
	padding: 5px; /* Поля вокруг надписи */
	text-decoration: none; /* Подчеркивание у ссылок убираем */
	color: #000; /* Цвет текста */
	border: 1px solid #ccc;	/* Рамка вокруг пунктов меню */
	background-color: #69f; /* Цвет фона */
	border-bottom: none; /* Границу снизу не проводим */
}
li a:hover {
	color: #ffe; /* Цвет текста активного пункта */
	background-color: #5488af; /* Цвет фона активного пункта */
	font-size: 10pt;
}
li:hover ul {
	display: block; /* При выделении пункта курсором мыши отображается подменю */
}
/*Основной материал*/
#content {
	padding: 10px;
	background: #99f;
}
.valid {
	border: 0px;
	height: 31px;
	width: 88px;
}
/*Конец основного контейнера*/

lex63 · December 10, 2011

Вопрос может быть совсем глупый, но прошу, помогите. Нужно очень срочно!

neznayka · December 11, 2011

Может попробовать сделать таблицу контента резиновой?

Добавьте пустую ячейку с нулевыми cell-ами и с height=100%. Я тоже хотел сделать себе сайт с "полурезиновой" шапкой, чтобы часть её растягивала картинку с двух сторон на всю ширину экрана, а другая часть в середине с навигацией была бы фиксированная. Так и сделал в принципе. Да, и в свойствах таблицы тоже надо поставить 100%. При увеличении контента в основных ячейках и когда они уже не будут помещаться в экран пустая резиновая ячейка будет просто убираться в ноль, и появятся ручки прокрутки.

Edited December 11, 2011 by neznayka

Sign In

Табл.верстка. Подвал внизу

Question

lex63

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

lex63

Link to comment

Share on other sites

neznayka

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information