Прибитый футер

Kvinta · July 26, 2011

Добрый день!

Прибил футер к полу, но к сожалению он упорно прячется за основным фоном. Уже 2 часа корячусь над этой, наверное простой задачей. Подскажите, что неправильно сделал?


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div id="maket">
<div id="logo"><a href="index.html" title="Главная"><span>Главная</span></a></div>
<div id="header"></div>
	<div id="content">
		<div id="left">
			<ul>
				<li><a href="index.html" id="now" class="index_but">Новости           </a></li>
				<li><a href="history.html" class="history_but">Историческая справка          </a></li>
				<li><a href="stuct.html" class="struct_but">Структура школы          </a></li>
				<li><a href="kadr.html" class="kadr_but">Педагогический состав          </a></li>
				<li><a href="contact.html" class="contact_but">Контакты          </a></li>
				<li><a href="guest_book.html" class="guest_but">Гостевая книга          </a></li>
				<li><a href="priem.html" class="priem_but">Правила приема          </a></li>
			</ul>
		</div>
		<div id="main">
			<p>Дата новости</p>
			<p>Новость 1.</p>
			<p> </p>
			<p>Дата новости</p>
			<p>Новость 2.</p>
			<p> </p>
			<p>Дата новости</p>
			<p>Новость 3.</p>
			<p> </p>
			<p>Дата новости</p>
			<p>Новость 4.</p>
			<p> </p>
			<p>Дата новости</p>
			<p>Новость 5.</p>
			<p> </p>
			<p>Дата новости</p>
			<p>Новость 6.</p>
			<p> </p>
			<p>Дата новсти</p>
			<p>Новость 7.</p>
		</div>
	</div>
</div> 
<div id="footer"></div>

</body>
</html>

CSS:


* {margin:0; padding:0; border:0}

body {font-family:Arial, Helvetica, sans-serif; background:url(images/fon_global3.jpg); height:100%}

html {height: 100%}

#maket {width:996px; margin:auto; background:url(images/fon4.jpg) repeat-y top fixed;  position:relative; min-height:100%;}

#header {background:url(images/header.jpg) no-repeat; height:151px; position:relative;}

#content {padding-bottom:198px; overflow:hidden}				/* {overflow:hidden} */

#main {margin:0 0px 0 240px; padding:5px;}

#footer {width:996px; height:198px; background:url(images/footer_2.gif); margin-top:-198px; margin:-198px 0;}

#left {width:230px; float:left; padding:5px;}

#logo_sur {background:#FFF; float:left; clear:both;}

#left ul {list-style:none}
#left ul a {text-decoration:none; display:block; width:211px; height:35px; margin:2px; padding:0px; line-height:25px; color:#000; font-size:13px; font-weight:bold; text-indent:-900%;}
#left .index_but {background:url(images/knopki.gif) no-repeat}
#left .index_but:hover {background:url(images/knopki_press.gif) no-repeat}
#left .history_but {background:url(images/knopki-02.gif) no-repeat}
#left .history_but:hover {background:url(images/knopki_press-02.gif) no-repeat}
#left .struct_but {background:url(images/knopki-03.gif) no-repeat}
#left .struct_but:hover {background:url(images/knopki_press-03.gif) no-repeat}
#left .kadr_but {background:url(images/knopki-04.gif) no-repeat}
#left .kadr_but:hover {background:url(images/knopki_press-04.gif) no-repeat}
#left .contact_but {background:url(images/knopki-05.gif) no-repeat}
#left .contact_but:hover {background:url(images/knopki_press-05.gif) no-repeat}
#left .guest_but {background:url(images/knopki-06.gif) no-repeat}
#left .guest_but:hover {background:url(images/knopki_press-06.gif) no-repeat}
#left .priem_but {background:url(images/knopki-07.gif) no-repeat}
#left .priem_but:hover {background:url(images/knopki_press-07.gif) no-repeat}
#left ul #now {margin:5px 5px 5px 15px}

#logo {	position:absolute; width:225px;	height:98px; z-index:1; left:0px; top:51px;}
#logo a {display:block; width:100%; height:100%; text-decoration:none}
#logo span {display:none}

#main img {margin-right:10px}

Футер сечас специально сдвинут к левому краю чтоб хуоть так увидеть где он. Заранее спасибо!

PS Внимательно ознакомился с правилами форума прежде чем создавать пост, прочитал про проверку кода на валидность. Подскажите новичку как это сделать?

Edited July 27, 2011 by Kvinta

buddah · July 26, 2011

<div id="logo"><a href="index.html" title="Главная"><span>Главная</span></a>
<
;/div>
<div id="header"></div>
    <div id="content">
        <div id="left">
            <ul&
#62;
             &n
bsp;  <li>

Это что такое?

Проверки: http://validator.w3.org/ http://jigsaw.w3.org/css-validator/

Edited July 26, 2011 by buddah

Kvinta · July 27, 2011

Это что такое?
Проверки: http://validator.w3.org/ http://jigsaw.w3.org/css-validator/

Это я неудачно сократил свой HTML для удобства вашего чтения... Поправил и выставил "Как есть".

Разместил в инете: http://kvinta30.narod2.ru/sv2/index.html

Валидность на указанных вами сайтах пройдена. Кстати, нашел одну ошибочку. Очень полезные сайты оказались, большое спасибо! Но к сожалению исправление её не сняло существующую проблему.

Подскажите, как футер заразу на передний план вытянуть?

И рад буду выслушать критику по нарезке. Дизайн - не мой.

Edited July 27, 2011 by Kvinta

sigma77 · July 27, 2011

Kvinta,

Добавь футеру position: relative

buddah · July 27, 2011

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Justnewone · July 27, 2011

Картинки пожаты, видна "кустарность", которая на таком сайте как раз - отталкивающий фактор, ставящий сайт на уровень юкозной фигни.

<p> </p> - это зачем? есть такая штука как маргин.

psywalker · July 27, 2011

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Имхо, это хреновый вариант, несущий в себе только лишнюю разметку.

Kvinta · July 27, 2011

Kvinta,
Добавь футеру position: relative

Дай бог тебе здоровья, добрый человек! Теперь думать буду причем тут позиционирование и положение - "над, под"... Но работает - факт!

To: Justnewone

Картинки пожаты, видна "кустарность"

Имеется в в иду что второе следствие первого? Мне показалось что если картинки не жать - то сайт невероятно тяжелый получится. Итак грузится не ахти

За конструктивную критику спасибо, если не сложно подскажите как на ваш взгляд следует поступить дабы стало лучше? Опыта у меня совсем нет, а мануалы "бездушны".

<p> </p> - это зачем? есть такая штука как маргин

Речь про новости? Безусловно вы правы, просто набил от руки в Дремвювере, потом поправлю.

Justnewone · July 27, 2011

надо склеить поакуратней хедер, сглаживая кромки логотипа, а надпись про школу вообще можно было бы сделать текстом, расположив, к примеру, на полупрозрачный блок. Хотя дизайнеру и виднее, но мне не нравится то что и лого и надпись в хедере по стилю одинаковые.

Kvinta · July 27, 2011

надо склеить поакуратней хедер, сглаживая кромки логотипа, а надпись про школу вообще можно было бы сделать текстом, расположив, к примеру, на полупрозрачный блок. Хотя дизайнеру и виднее, но мне не нравится то что и лого и надпись в хедере по стилю одинаковые.

Как уже писал - дизайн, не мой. Хедер - цельный кусок который я править не могу... Но ваши рекомендации заказчику обязательно передам. Править по хорошему я вообще ничего в дизайне не могу (но всёравно немного правлю, т.к. самому не всё нравится, тсссс... ). Главное, чтоб ребятишкам и их родителям нравилось, для них сайт по большому счету.

Но вы имели в виду не то, что тупо при сохранении фалов из PSD макет в жипегах и гифах указать максимальное разрешение? Я верно понял?

Спасибо!

Justnewone · July 27, 2011

нет, я имел ввиду, пока еще все в слоях - вот там растеризовать тексты, ибо нерастеризованные тексты, которые выводиться должны картинками - всегда такая шняга, возможно, после растеризации немножко блуром по этому слою пройтись.

Sign In

Прибитый футер

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information