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

Сервис обмена электронных валют

Партнерская программа Kredov

Старая кроссбраузерная верстка, нужен современный аналог

#11 yury

yury
    Topic Starter
  • Пользователь
  • 629 сообщений
  • Репутация: 176
0

Отправлено 13 Июнь 2009 - 10:38

v1ex,

...вы мне объясните, как вы скролом собираетесь из под футера контент выдернуть. О_о
Я ведь сделал, отступ, что бы контент не лез под футер....

вы бы прежде чем вопрос задать, посмотрели, как ваш вариант работает на практике (в случае когда контента много).
Если лень потестить код, то смотрим картинки, обращая внимание на границу между контентом и футером и полоску прокрутки:
Изображение
Изображение
.footer
{
  bottom: 0px;
  position: fixed;
}
подразумевает, что блок будет находиться в указанном месте ( в данном случае внизу окна с нулевым отступом) и скролл на него влиять не будет.
.box
{
  margin-bottom: 30px;
}
подразумевает, что у начинки блока будет отступ снизу в 30px, но скролиться он будет обычным порядком.

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

Вариант же с использованием жаваскрипта и размера рабочей области окна браузера (при всей его громоздкости) не работает, например, в случае, когда контент не помещается в этой области.
  • 0

#12 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 13 Июнь 2009 - 15:15

yury, А кто вам сказал, что таблицами верстают издревле? Вообще с самого начала блоки были созданы для отобрадения контента на странице, но всем приелись таблицы, потому что с ними удобнее работать. Так что никакого перехода на новизну нет. Вы просто решили рассмотреть ещё один вариант верстки, который считается хорошим тоном.

Могу предложить только процентный вариант. Вообще блочная вёрстка никогда не была эталоном. Но она более легкая. И не надо искать никаких примудростей, вы их там не найдете. По высоте 100% блок занимает все 100% экрана, и ничего с этим не поделать. Было бы хорошо, если бы padding не занимал размеров дополнительных к 100%. А то получается так, вроде бы блок сделал 100% и отступы от него поставил, а он полуился уже все 200% ;)

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

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<style type="text/css">
body
{
  position: absolute;
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
}

.logo
{
  position: relative;
  background-color: #006699;
  height: 20%;
  width: 90%;
}

.box
{
  position: relative;
  width: 90%;
  height: 70%;
}

.footer
{
  position: relative;
  background-color: #006699;
  height: 10%;
  width: 90%;
}
	</style>
	<title></title>
	<link type="text/css" rel="stylesheet" media="all" href="style.css" />
	<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
  </head>
  <body>
	<div class="logo">
		logo
	</div>
	<div class="box">
asd
	</div>
	<div class="footer">
	  Тра-та-та, футер
	</div>
  </body>
</html>

  • 0

#13 yury

yury
    Topic Starter
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 13 Июнь 2009 - 16:38

yury, А кто вам сказал, что таблицами верстают издревле?

ZiTosS,
ну читал где-то, что сперва появился html, потом поддержка в нем таблиц, потом css, потом блочная верстка, основанная на css2. Потому сперва верстали таблицами (ибо особо больше нечем было позиционировать контент на страничках), потом w3c сказал что позиционировать таблицами идеологически неправильно (ибо в таблицах должны быть табличные данные, а не куски текста и картинок), а по правилам хорошего тона и ваще надо блоками. С тех пор w3c а за ним те кто пишет браузеры постепенно переводят элементы т.н. табличной верстки в разряд устаревших, нерекомендуемых, а то и вообще неподдерживаемых стандартами.

Могу предложить только процентный вариант.

К сожалению ваш вариант не работает при большом количестве контента:
Изображение
  • 0

#14 v1ex

v1ex
  • Пользователь
  • 225 сообщений
  • Репутация: 0

Отправлено 13 Июнь 2009 - 19:54

К сожалению ваш вариант не работает при большом количестве контента:

Думаю нужно у box поставить min-height: 70%,а не height.

Если лень потестить код, то смотрим картинки, обращая внимание на границу между контентом и футером и полоску прокрутки:

Я еще раз повторюсь, и скажу, что контент под футер не заходит, потому что есть отступ размером с футер. Это "обман зрения". Но теперь я понял о чем вы, просто я думал, что вы говорите, что контент в прямом смысле заходит под футер.
  • 0

#15 yury

yury
    Topic Starter
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 15 Июнь 2009 - 21:12

Думаю нужно у box поставить min-height: 70%,а не height.

v1ex,
ваш вариант фиксит предложение ZiTosS-а.
Хотя кроссбраузерность страдает, потому как параметр "min-height" не поддерживается в IE6 и старше.

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

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

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

v1ex,
Я хочу пояснить так же свое замечание про "кривизну" фиксированного (независящего от прокрутки) расположения футера внизу окна браузера:
по сути своей футер как бы визуально завершает страницу, потому посетитель сайта, увидев его, может ошибочно решить, что больше на странице никакой инфы нет.
Потому упомянутый вами "обман зрения" - это плохой обман. :)

Жаль что не нашлось адекватного аналога такой казалось бы простой верстки, я то думал, что это только я дилетант-самоучка не могу дотумкать, как переверстать. :)
Начинаю понимать, почему на многих сайтах, сделанных даже таким гуру, как Лебедев, нету доктайпа и валидатор их не любит. :)
  • 0

#16 v1ex

v1ex
  • Пользователь
  • 225 сообщений
  • Репутация: 0

Отправлено 16 Июнь 2009 - 04:36

Хотя кроссбраузерность страдает, потому как параметр "min-height" не поддерживается в IE6 и старше.

На IE6 я давно забил, и уже 70% заказчиков, которые мне встречаются, тоже забили. По поводу старше - вы ошибаетесь, min-height не поддерживается только в версиях до IE6 включительно.
  • 0

#17 ilyazh

ilyazh
  • Пользователь
  • 356 сообщений
  • Репутация: 1

Отправлено 16 Июнь 2009 - 07:15

чтобы футер был снизу - попробуйте добавить к нему clear: both;
  • 0

#18 v1ex

v1ex
  • Пользователь
  • 225 сообщений
  • Репутация: 0

Отправлено 16 Июнь 2009 - 07:29

чтобы футер был снизу - попробуйте добавить к нему clear: both;

лол
  • 0

#19 yury

yury
    Topic Starter
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 16 Июнь 2009 - 10:50

v1ex,

На IE6 я давно забил

это право ваше и ваших заказчиков, особенно если им и вам по барабану, что увидят на вашем сайте 19% пользователей в рунете и 15% в мире. (больше доля только у FF (рунет - 21%, мир - 47%) и у IE7 (рунет - 23%, мир - 21%))

По поводу старше - вы ошибаетесь

А если подумать? :)
Подсказка: Как вы думаете, кто старше, вы или ваш дедушка?
  • 0

#20 v1ex

v1ex
  • Пользователь
  • 225 сообщений
  • Репутация: 0

Отправлено 16 Июнь 2009 - 11:17

v1ex, это право ваше и ваших заказчиков, особенно если им и вам по барабану, что увидят на вашем сайте 19% пользователей в рунете и 15% в мире. (больше доля только у FF (рунет - 21%, мир - 47%) и у IE7 (рунет - 23%, мир - 21%))
А для бюджетных организаций в России и по сей день не редкость Win98 и, соответственно, маскимум что на него можно поставить - IE5.5

Мне по барабану на людей, которые, откровенно говоря, пользуются древнейшим говном, которому скоро стукнет 10 лет, я считаю - это их выбор (смотреть на то говно, что выводит это говно). И мне по барабану на причины, из за которых они им пользуются (win98, бюджетные организации и т.п.). А тем более если заказчик не требует, мне еще больше по барабану :)

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

А если подумать? :(
Подсказка: Как вы думаете, кто старше, вы или ваш дедушка?

Сорри, туплю :)
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru