Форум SAPE.RU - Долгая дорога в HTML: выше по коду, ниже визуально

Форум SAPE.RU (http://forum.sape.ru/index.php)

- Разработка и сопровождение сайтов (http://forum.sape.ru/forumdisplay.php?f=29)

Долгая дорога в HTML: выше по коду, ниже визуально

В 13-ом, кажется, году биржа ввела проверку расположения "ссылки в подвале". Подвал определяется исключительно по выводу ссылок в коде страницы. Если в последних 20 (или 30) процентах кода - значит в подвале.

В обсуждении новой опции проскальзывала мысль разместить код в начале страницы, а выводить в конце. Но алгоритм не обсуждался. Советовали использовать java-script. Мне это было не нужно, посему не заморачивался.

На днях вспомнилось и решение само пришло в голову. Если кому-то еще надо, вот алгоритм:

Необходимо: расположить контент Б в коде страницы выше контента А, а визуально вывести в браузере ниже его. Контент А может занимать несколько экранов.

Решение:

Контенты располагаем в div'ах. Значение z-индекса div'а контента А больше, чем z-индекса div'а контента Б. Div'у контента А назначается непрозрачный фон. Div контента Б фиксируем внизу экрана.

В коде div контента Б располагаем перед div'ом контента А. После div'а контента А переводом строки устанавливаем необходимую высоту для полного отображения контента Б.

Вроде работает. Любопытно, какие еще можно придумать решения.

Зачем так сложно???
достаточно float:right двух блоков чтобы на одном визуальном уровне светились куски текста из начала и конца HTML кода.

http://arda.su/ - не заглядывая в исходник страницы - сможете по визуальной картинке сказать, в каком порядке в HTML коде идут хотя бы:
- заголовок первого уровня
- дискография
- история сайта
- список годов
- социальные кнопки

?

Добавлено через 12 минут
...и не выделяя текст курсором. :)

Добавлено через 2 минуты
...и не запрещая совсем стилей для отображения страницы. :)

Цитата:

Сообщение от qkowlew (Сообщение 1483094)

Зачем так сложно???
достаточно float:right двух блоков чтобы на одном визуальном уровне

Я, наверно, не совсем ясно изложил условие обсуждавшейся задачи. Предполагалось выводить ссылки не сбоку, а после основного контента. "В футере".

Если у Вас есть к такому условию более изящное решение, с интересом с ним ознакомлюсь.

Цитата:

Сообщение от SergejF (Сообщение 1483273)

Я, наверно, не совсем ясно изложил условие обсуждавшейся задачи. Предполагалось выводить ссылки не сбоку, а после основного контента. "В футере".

А. При столь жёстком условии изящного, минималистического "только стилями" решения не получается. :(

Я всё-таки считаю, что это уже перфекционизм.
В конце концов ничто не мешает выводить ссылки внизу под левым меню-навигатором, а не под основным текстом. По "html потоку" они окажутся выше текста.

Добавлено через 4 минуты
И что вам мешает менять местами блоки яваскриптом, кстати?

Цитата:

Сообщение от qkowlew (Сообщение 1483365)

При столь жёстком условии изящного, минималистического "только стилями" решения не получается.

Полагаете, условие "вывести ссылки в футере" чересчур жестким? Собственно указанный в стартпосте метод - 4 строчки в css. 30-40 байт кода.

Мне этот метод не нравится тем, что текст ссылок не "вытянется" снизу, как предыдущий контент, а откроется как будто из-за занавеса. Хотя с 1-2 строчками это вряд ли будет заметно.

Цитата:

Сообщение от qkowlew (Сообщение 1483365)

В конце концов ничто не мешает выводить ссылки внизу под левым меню-навигатором, а не под основным текстом.

Я могу назвать причины, которые этому мешают. Отсутствие этого самого левого меню-навигатора, например. ))

Цитата:

Сообщение от qkowlew (Сообщение 1483365)

И что вам мешает менять местами блоки яваскриптом, кстати?

Можно пример кода?

Цитата:

Сообщение от SergejF (Сообщение 1483730)

Можно пример кода?

Вот пример кода, в котором при выключенном яваскрипте порядок следования кусков текста upper lower будет один, а при включённом - противоположный.

Код:

<div id='upper'>upper</div>

<div id='lower'>lower</div>

<script>

...

keep=upper.innerHTML;

upper.innerHTML=lower.innerHTML;

lower.innerHTML=keep;

</script>

или так:

Код:

<div id='empty'>lower</div>

<div id='upper'>upper</div>

<div id='lower'></div>



<script>

...

lower.innerHTML=empty.innerHTML;

empty.innerHTML='';

</script>