Перейти к содержимому

Вход
Регистрация Помощь

Рекомендации

Добавление картинок. Воспользуйтесь одним из хостингов изображений (savepic.ru, itmages.ru). После загрузки картинки на хостинг, вы получите код для вставки в форум.
Ссылки на ресурс. Не стесняйтесь давать ссылки на страницы с проблемой. Если не желаете, чтобы текст был ссылкой, добавьте подчеркивание перед http, вот так: _http://site.ru
Или делайте работающий прототип примера в http://jsfiddle.net/ и давайте ссылку на него.
Код. Обрамляйте код тегами [ code ] и [ /code ] без пробелов.
Страница 1 из 1

Проблема с float Оценка: -----

#1 Пользователь офлайн   Riim 

  • Участник
  • PipPip
  • Вставить ник
  • Цитировать
  • Группа: Пользователь
  • Сообщений: 77
  • Регистрация: 08 мая 09
  • Репутация: 0 (Обычная)

Отправлено 31 мая 2009 - 04:05

Пытаюсь прикрепить футер к низу через position:absolute и bottom:0px .
Т. е. положение футера зависит от высоты body. Проблема в том, что блоки с float:left не влияют на эту высоту (для всех кроме IE).
Методом "тыка" удалось выяснить, что если к самому body приписать float:left , то все начинает работать как надо. Но я не знаю нормально ли к body такое приписывать. По крайней мере, нигде этого не встречал.

Четко сформирую вопросы:
1. Можно ли к body приписывать float:left ? Не появятся ли из-за этого потом проблемы?
2. Как обычно поступают в таких случаях (про существование гугла я знаю, но в тех случаях, что мне удалось найти либо футер крепился по-другому, либо не было блоков с float)?

И пример что бы попробовать:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>blank</title>
	<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}

html {
	width: 100%;
	height: 100%;
}

body {
	width: 100%;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	position: relative;
	/*float: left;*//* если расскомментировать, то все заработает как надо */
}

#header {
	width: 100%;
	height: 48px;
	background: #000;
}

#menu {
	width: 290px;
	padding: 50px 0px 98px 0px;
	background: #fcc;
	float: left;
}

#content {
	margin-left: 290px;
	padding: 50px 50px 98px 50px;
	background: #cfc;
}

#footer {
	width: 100%;
	height: 48px;
	background: #000;
	position: absolute;
	left: 0px;
	bottom: 0px;
}
	</style>
	<script type="text/javascript">
var toggleText = function(elem) {
	elem = document.getElementById(elem.value);
	elem.innerHTML = elem.innerHTML.length < 1000 ? new Array(2001).join('text ') : 'text';
};
	</script>
</head>
<body>
	<div id="header">
		<input type="button" value="menu" onclick="toggleText(this);" />
		<input type="button" value="content" onclick="toggleText(this);" />
	</div>
	<div id="menu">
		text
	</div>
	<div id="content">
		text
	</div>
	<div id="footer">
	</div>
</body>
</html>

Сообщение отредактировал Riim: 31 мая 2009 - 09:14

0

#2 Пользователь офлайн   psywalker 

  • Вечный ученик
  • Вставить ник
  • Цитировать
  • Группа: Администратор
  • Сообщений: 12 851
  • Регистрация: 31 мая 08
  • Пол:Мужчина
  • Откуда:Москва
  • Репутация: 236 (Хорошая)

Отправлено 31 мая 2009 - 07:41

Не надо ничё ни на что вешать и изобретать, просто убери с плавающих блоков float: left; и заполни контент текстом, сам всё увидишь, что будет работать:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>blank</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}

html {
height: 100%;
}

body {
min-height: 100%;
height: auto;
position: relative;
}

#header {
width: 100%;
height: 48px;
background: #000;
}

#content {
margin-left: 290px;
padding: 50px 50px 98px 50px;
background: #cfc;

}

#footer {
width: 100%;
height: 48px;
background: #000;
position: absolute;
left: 0px;
bottom: 0px;
}
</style>

</head>
<body>
<div id="header">
<input type="button" value="menu" onclick="toggleText(this);" />
<input type="button" value="content" onclick="toggleText(this);" />
</div>

<div id="content">

</div>
<div id="footer">
</div>
</body>
</html>


А вот тебе от меня способ один, заполни тоже контент текстом не забудь, всё увидишь опять-же:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>blank</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body,html { height: 100%;}
#page { min-height: 100% !important; height: 100%; background: #CF3;}
#footer {height: 30px; background: #F00}

</style>

</head>
<body>
<div id="page">

</div>

<div id="footer">собственно, подвал</div> 
</body>
</html>

Сообщение отредактировал psywalker: 31 мая 2009 - 07:53

В Вилларибо и Виллабаджо опять дедлайн. Пока ребята из Вилларибо верстают сайт дивами, ребята из Виллабаджо уже всё сверстали на таблицах и фигачат друг друга в квейк.

Талантливые дизайнеры, пожалуйста, не проходите мимо! http://forum.htmlbook.ru/index.php?showtopic=32217
0

#3 Пользователь офлайн   Riim 

  • Участник
  • PipPip
  • Вставить ник
  • Цитировать
  • Группа: Пользователь
  • Сообщений: 77
  • Регистрация: 08 мая 09
  • Репутация: 0 (Обычная)

Отправлено 31 мая 2009 - 08:01

Цитата

Не надо ничё ни на что вешать и изобретать, просто убери с плавающих блоков float: left; и заполни контент текстом, сам всё увидишь, что будет работать:

Если бы мне нужно было сделать без меню, то я бы так и сделал.
А с меню у меня получаются 4 варианта:
1. тот, который я привел как пример
2. меню прикрепляется куда надо через position:absolute http://www.sib-fusio...es_print_10.htm
3. у обоих блоков (menu и content) float:left и ширина в процентах http://xhtml.ru/2005...simple-layouts/ (но ширина в процентах мне очень не желательна)
4. с отрицательными margin http://www.webmascon.../coding/43a.asp

И во всех четырех вариантах эта проблема.

Цитата

А вот тебе от меня способ один, заполни тоже контент текстом не забудь, всё увидишь опять-же:

Эх, если бы все было так просто. В твоем примере при малом количестве содержимого вертикальный скролл виден. Его не должно быть, как в моем примере.

Сообщение отредактировал Riim: 31 мая 2009 - 08:54

0

#4 Пользователь офлайн   Riim 

  • Участник
  • PipPip
  • Вставить ник
  • Цитировать
  • Группа: Пользователь
  • Сообщений: 77
  • Регистрация: 08 мая 09
  • Репутация: 0 (Обычная)

Отправлено 01 июня 2009 - 09:30

Всем спасибо. Проблема решена здесь: http://xhtml.ru/foru...pic.php?id=1843

Сообщение отредактировал Riim: 01 июня 2009 - 09:32

0

#5 Пользователь офлайн   psywalker 

  • Вечный ученик
  • Вставить ник
  • Цитировать
  • Группа: Администратор
  • Сообщений: 12 851
  • Регистрация: 31 мая 08
  • Пол:Мужчина
  • Откуда:Москва
  • Репутация: 236 (Хорошая)

Отправлено 01 июня 2009 - 10:04

решил? ты уверен? а в ИЕ6 ты смотрел, что делается с подвалом при заполнении текстом?
А во вторых почему фон левой колонки не опускается при заполнении правой и наоборот?

Сообщение отредактировал psywalker: 01 июня 2009 - 10:07

В Вилларибо и Виллабаджо опять дедлайн. Пока ребята из Вилларибо верстают сайт дивами, ребята из Виллабаджо уже всё сверстали на таблицах и фигачат друг друга в квейк.

Талантливые дизайнеры, пожалуйста, не проходите мимо! http://forum.htmlbook.ru/index.php?showtopic=32217
0

#6 Пользователь офлайн   Searcher 

  • Шалун
  • Вставить ник
  • Цитировать
  • Группа: Модератор
  • Сообщений: 2 458
  • Регистрация: 29 января 08
  • Пол:Мужчина
  • Репутация: 28 (Положительная)

Отправлено 01 июня 2009 - 13:35

для того, чтобы блоки с float влияли на высоту родительского блока, нужно родителю прописать overflow:hidden.
Между смелостью и глупостью
граница не регламентирована
0

#7 Пользователь офлайн   Riim 

  • Участник
  • PipPip
  • Вставить ник
  • Цитировать
  • Группа: Пользователь
  • Сообщений: 77
  • Регистрация: 08 мая 09
  • Репутация: 0 (Обычная)

Отправлено 01 июня 2009 - 13:52

Просмотр сообщенияSearcher (1.6.2009, 21:35) писал:

для того, чтобы блоки с float влияли на высоту родительского блока, нужно родителю прописать overflow:hidden.

Для тех кто в танке: с этим все уже понятно, я дал ссылку выше. Вот более точная: http://designformast...clearing-float/

Сообщение отредактировал Riim: 01 июня 2009 - 14:47

0

#8 Пользователь офлайн   Riim 

  • Участник
  • PipPip
  • Вставить ник
  • Цитировать
  • Группа: Пользователь
  • Сообщений: 77
  • Регистрация: 08 мая 09
  • Репутация: 0 (Обычная)

Отправлено 01 июня 2009 - 14:47

Просмотр сообщенияpsywalker (1.6.2009, 18:04) писал:

А во вторых почему фон левой колонки не опускается при заполнении правой и наоборот?

Неужели думаешь, что я сам не заметил. Ссылки, которые дал мне Octane, проблему с фоном идеально разжевывают. Здесь же я подкрасил, что бы видно было. В конечном варианте фона не будет.

Просмотр сообщенияpsywalker (1.6.2009, 18:04) писал:

а в ИЕ6 ты смотрел?

Да в IE6 явная проблема. Что-то с ходу решить не получается.

Добавлено: Вот такое решение нашлось: http://www.webcocktail.ru/coding/positioni...-at-the-bottom/
Вроде работает, но приходится подстраивать содержание под оформление. Может кто-нибудь решение получше знает?

Сообщение отредактировал Riim: 02 июня 2009 - 04:02

0

Поделиться темой:


Страница 1 из 1


Быстрый ответ