Перейти к публикации
  • Объявления

    • TheAndrey

      Правила раздела "Техподдержка"   17.03.2018

      Вы должны как можно подробне описась проблему. От этого зависит скорость нахождения решения проблемы. При необходимости прикрепляйте скриншоты. Укажите на какой CMS работает ваш сайт. При проблемах с Javascript рекомендуется указать данные из консоли Javascript, это ускорит решение проблемы.
  • 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
Гость Михаил

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

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


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

×