Перейти к публикации
  • 0
Гость Михаил

Срочно нужна помощь по css

Вопрос

Гость Михаил

В общем: верстаю свой собственный дизайн, и столкнулся с такой проблемой:

Где выделено на картинке, подвал уехал туда, как его переместить в низ?

вот css для подвала:

div.bt{
	display: block;
	background: #000;
	height: 50px;
}

 

 

<!DOCTYPE html>
<html>
<head>
	<title>docfors</title>
	<html lang="ru-RU">
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
		<div class="top">
			<div id="logo"><a href="#"><img src="img/logo.png"></a></div>
			<div class="bmtop">
				<li><a href="#">Главная</a></li>
				<li><a href="#">Жанр</a>
					<ul>
						<li><a href="#">Ужасы</a></li>
						<li><a href="#">Триллер</a></li>
						<li><a href="#">Боевик</a></li>
						<li><a href="#">Драмма</a></li>
						<li><a href="#">Мелодрамма</a></li>
					</ul>
				</li>
				<li><a href="#">Форум</a></li>
				<li><a href="#">Регистрация</a></li>
				<li><a href="#win1">Авторизация</a></li>
			</div>
		</div>
	<div id="all">
		<div class="sl_n">
			<p>// Топ 10 фильмов</p>
		</div>
		<div class="sl">
			<li><a href="#" title="Прогулка"><img src="img/prg.png"></a></li>
			<li><a href="#" title="Метро"><img src="img/metro.png"></a></li>
			<li><a href="#" title="Прогулка"><img src="img/prg.png"></a></li>
			<li><a href="#" title="Метро"><img src="img/metro.png"></a></li>
			<li><a href="#" title="Прогулка"><img src="img/prg.png"></a></li>
			<li><a href="#" title="Метро"><img src="img/metro.png"></a></li>
			<li><a href="#" title="Прогулка"><img src="img/prg.png"></a></li>
			<li><a href="#" title="Метро"><img src="img/metro.png"></a></li>
		</div>
		<div class="block">
			<div class="menu">
				<div id="bm">// Меню сайта</div>
					<div class="pbm">
					<li><a href="#">Главная</a></li>
					<li><a href="#">Форум</a></li>
					<li><a href="#">Регистрация</a></li>
					<li><a href="#">Авторизация</a></li>
					<li><a href="#">Файлы</a></li>
				</div>
			</div>
			<div class="menu2">
				<div id="bm">// Опрос</div>
				<p>Оцените работу движка</p>
				<div class="pbm">
				<p>Лучший из новостных - 2 (75%)</p>
					<div class="progress-bar blue stripes" title="75%">
						<span style="width: 75%"></span>
					</div>
				<p>Неплохой движок - 1 (25%)</p>
					<div class="progress-bar blue stripes" title="25%">
						<span style="width: 25%"></span>
					</div>
				<p>Устраивает ... но ... - 0 (0%)</p>
					<div class="progress-bar blue stripes" title="0%">
						<span style="width: 0%"></span>
					</div>
				<p>Встречал и получше - 0 (0%)</p>
					<div class="progress-bar blue stripes" title="0%">
						<span style="width: 0%"></span>
					</div>
				<p>Совсем не понравился - 0 (0%)</p>
					<div class="progress-bar blue stripes" title="0%">
						<span style="width: 0%"></span>
					</div>
					<br>
				<p>Всего проголосовало: 3</p>
				</div>
			</div>
		</div>
		<div class="cont">
			<div class="news">
				<div class="news_title"><li><a href="javascript://">Metro / Метро</a></li></div>
				<div id="img">
					<li><a href="#"><img src="img/films/metro.jpg"></a></li>
				</div>
				<div id="news_text">
					Когда мы спускаемся в яркий, залитый светом мир метро, мы совсем не думаем о том, что на самом деле, находимся глубоко под землей в черной, бесконечной норе, с лабиринтами ходов, а над нами возвышается многоэтажный город, с сетями коммуникаций, протекают полноводные реки, по которым тихо скользят набитые грузами пароходы. Но достаточно одной капле воды, пахнущей тиной, найти себе путь в подземную обитель людей, чтобы иллюзия яркого подземного царства превратилась в реальность мрачного ада, и все проблемы, которые на поверхности казались нам глобальными, неразрешимыми, оказались ничтожно малыми по сравнению с простым желанием – выжить.
				</div>
			</div>
						<div id="news_info">
				<div id="autor"><li>Автор: <a href="#win1">Михаил</a></li></div>
				<button id="on_s">Смотреть онлайн</button>
			</div>


			<div class="news" style="margin-top: 10px">
				<div class="news_title"><li><a href="javascript://">Metro / Метро</a></li></div>
				<div id="img">
					<li><a href="#"><img src="img/films/metro.jpg"></a></li>
				</div>
				<div id="news_text">
					Когда мы спускаемся в яркий, залитый светом мир метро, мы совсем не думаем о том, что на самом деле, находимся глубоко под землей в черной, бесконечной норе, с лабиринтами ходов, а над нами возвышается многоэтажный город, с сетями коммуникаций, протекают полноводные реки, по которым тихо скользят набитые грузами пароходы. Но достаточно одной капле воды, пахнущей тиной, найти себе путь в подземную обитель людей, чтобы иллюзия яркого подземного царства превратилась в реальность мрачного ада, и все проблемы, которые на поверхности казались нам глобальными, неразрешимыми, оказались ничтожно малыми по сравнению с простым желанием – выжить.
				</div>
			</div>

			<div id="news_info">
				<div id="autor">
					<li style="margin-right: 10px">Автор: <a href="#win1">Михаил</a></li>
					<li>     Добавлено: вчера в 16:40</li>
				</div><button id="on_s">Смотреть онлайн</button>
			</div>
		</div>
		<div class="bt">© 2013 docfors.ru все права защищены</div>
	</div>
</body>
</html> 

 

 

 

Помогите пожалуйста буду благодарен.  :popkorn:

nvx1380814930__bottom.png

Изменено пользователем Михаил

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

14 ответов на этот вопрос

Рекомендованные сообщения

  • 0
ExTEzZy

Перед подвалом добавь:

<div style="clear: both"></div>

ваш кэп

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
webil

ссылку на сайт, то что вы скинули совершенно бесполезно, т.к. тут вероятнее проблема в стилях у <div class="cont">

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
Гость Михаил

ссылку на сайт, то что вы скинули совершенно бесполезно, т.к. тут вероятнее проблема в стилях у <div class="cont">

http://docfors.ru/test/index.html удалил

 

ссылку на сайт, то что вы скинули совершенно бесполезно, т.к. тут вероятнее проблема в стилях у <div class="cont">

У этого дива стоит position: relative;

Изменено пользователем Михаил

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
Luv

Ищи информацию про фиксирование блока внизу страницы.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
Гость Михаил

 

фиксирование блока внизу страницы

Мне нужно не зафиксировать, а переместить его обратно вниз

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
Luv

 

Мне нужно не зафиксировать, а переместить его обратно вниз

Зачем? В чем смысл, если новости постоянно добавляются? Это уже извращение.
Фиксируй.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
Гость Soul

div.bt добавить

 

    position: relative;
    clear: both;

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
Гость Михаил

, Благодарствую :popkorn:  :happy:  



,

 

position: relative;

 

это у меня стояло, вот только про clear:both; совсем забыл =) 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
webil

О боже что за верстка, левому блоку установил значение position: absolute;, зачем?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
Гость Михаил

@webil, =) чтобы к контенту применить position: relative;



Убрал: position: absolute; ...

nvx1380818491__absolut.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
webil

, Его и так можно применить... :facepalm:

div.block {float: left;width: 200px;}
div.cont {position: relative;float: right;width: 690px;}
Изменено пользователем webil

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
Гость Михаил

 

div.block {float: left;width: 200px;} div.cont {position: relative;float: right;width: 690px;}

Убрал position: absolute;

... Покажу еще раз: 

nvx1380818887__absolut.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
webil

 

Убрал position: absolute; ... Покажу еще раз: 

Ну я же не для слепых пишу 

div.cont {position: relative;float: right;width: 690px;}

Извини за грубость.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
Гость Михаил

Закройте топик проблема решена

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Гость
Эта тема закрыта для публикации сообщений.

×