Помогите разобраться с HTML/CSS'ом
Ты хочешь чтобы physics оставалось на прежнем месте?
твой пустой пробел появился изза тега <br>
на форуме код пиши с помощью тега [code]
незнаю что ты хочешь может это:?
[code]
<html><head><title>content</title><script>
function showLayer(id) {document.getElementById(id).style.display = "block";}
function hideLayer(id) {document.getElementById(id).style.display = "none";}
</script></head>
<body>
<span onclick="javascript: showLayer('biology');" ondblclick="javascript: hideLayer('biology');">upp</span>
<div id="biology" style="display:none;">biology</div>
<div>physics</div></body></html>
[/code]
на форуме код пиши с помощью тега [code]
незнаю что ты хочешь может это:?
[code]
<html><head><title>content</title><script>
function showLayer(id) {document.getElementById(id).style.display = "block";}
function hideLayer(id) {document.getElementById(id).style.display = "none";}
</script></head>
<body>
<span onclick="javascript: showLayer('biology');" ondblclick="javascript: hideLayer('biology');">upp</span>
<div id="biology" style="display:none;">biology</div>
<div>physics</div></body></html>
[/code]
это не пойдет, в начале сценария не видно первого пункта (biology)
Ты хочешь чтобы physics оставалось на прежнем месте?Чуть сложнее.
Там вся фишка в том, что по шаблону строятся вложенные слои чтобы получить раскрывающееся/закрывающееся меню.
По мере открытия новых слоев конечно он будет понижаться на линию ниже новых строк.
Но он то понижается плюс еще на одну линию, вот как бы подавить этот эффект.
Здесь он просто понижается на 1 линию т.к. ситуацию упрощена до модельной.
твой пустой пробел появился изза тега <br>он тут не причем.
Если его не будет то во-первых разные сущности будут помещены на одной линии, а не в столбик, как оно естественно
во-вторых при нажатии на генератор события (upp) активизирующийся элемент (становящийся видимым тег div) скидывает вторую сущность ниже себя, тогда и получается столбик, но как оформление это дефектно. Столбик должен быть с самого начала
объясни что тебе нужно
нужно позиционирование последнего элемента в столбе.
В частности, имеем усложненный вариант кода - вложенные слои (зачем это все и замутилось уровней вложений много, но возьмем 2:
Нужно, чтобы когда щелкаешь по "upp" и разворачивался до того скрытый слой anatomy, physics оказалось прямо под ним (anatomy а ниже на пробел
В частности, имеем усложненный вариант кода - вложенные слои (зачем это все и замутилось уровней вложений много, но возьмем 2:
<html><head><title>content</title><script>
function showLayer(id) {document.getElementById(id).style.display = "block";}
function hideLayer(id) {document.getElementById(id).style.display = "none";}
</script></head><body>
biology <span onclick="javascript: showLayer('biology');" ondblclick="javascript: hideLayer('biology');">upp</span>
<div id="biology" style="display:none;">
anatomy <span onclick="javascript: showLayer('anatomy');" ondblclick="javascript: hideLayer('anatomy');">upp</span>
<div id="anatomy" style="display:none;">
</div>
</div>
<br>physics
</body></html>
Нужно, чтобы когда щелкаешь по "upp" и разворачивался до того скрытый слой anatomy, physics оказалось прямо под ним (anatomy а ниже на пробел
ну вот:
<html><head><title>content</title><script>
function showLayer(id) {document.getElementById(id).style.display = "block";}
function hideLayer(id) {document.getElementById(id).style.display = "none";}
</script></head>
<body>
anatomy <span onclick="javascript: showLayer('biology');" ondblclick="javascript: hideLayer('biology');">upp</span>
<div id="biology" style="display:none;">biology</div>
<div>physics</div></body></html>
я не знаю, что у тебя за броуз, но в моем FF19 это работает косо - анатомия открывает биологию, а не наоборот.
Вообще, для меня принципиально важна та структура, которую я привел т.к. я ее шаблоню.
Т.е. я хотел бы поменять что-то со стилем тегов, а не с их структурой
Вообще, для меня принципиально важна та структура, которую я привел т.к. я ее шаблоню.
Т.е. я хотел бы поменять что-то со стилем тегов, а не с их структурой
напиши просто что должно быть изображено вначале
что после клика
что после двойного клика
к примеру
до
anatomy
psi
один клик
anatomy
bio
два клика
anatomy
psi
что после клика
что после двойного клика
к примеру
до
anatomy
psi
один клик
anatomy
bio
два клика
anatomy
psi
мне нужен не рецепт, мне все-равно нужно пакетное решение
нужно объяснение самого явления и как его преодолеть в принципе, какими свойствами. Тогда я смогу прошаблонить решение для своих меняющихся нужд.
Как подавить перепозиционирование строки <br>physics, вот чего я ищу. Тут вопрос в стилях, атрибутах тегов и т.п.
Кстати, я не могу заменить div на span т.к. в div я могу вставлять вложенные div, а в span это не проходит, этот тег рассчитан на 1 строку.
Я ж писал, что мне надо отобразить раскрывающееся дерево каталогов, причем уровень вложения далеко не единица.
нужно объяснение самого явления и как его преодолеть в принципе, какими свойствами. Тогда я смогу прошаблонить решение для своих меняющихся нужд.
Как подавить перепозиционирование строки <br>physics, вот чего я ищу. Тут вопрос в стилях, атрибутах тегов и т.п.
Кстати, я не могу заменить div на span т.к. в div я могу вставлять вложенные div, а в span это не проходит, этот тег рассчитан на 1 строку.
Я ж писал, что мне надо отобразить раскрывающееся дерево каталогов, причем уровень вложения далеко не единица.
Нужно, чтобы когда щелкаешь по "upp" и разворачивался до того скрытый слой anatomy, physics оказалось прямо под ним (anatomy а ниже на пробелНужно где-то поставить "не".
Иначе сложно дать ответ.
совершенно верно, спасибо
читать: "..., а НЕ ниже на пробел"
читать: "..., а НЕ ниже на пробел"
Если ты работаешь в FF, для него есть замечательный инструмент: firebug. Там и с консолью js можно поиграть, и макет скомпилированных стилей посмотреть.
Возможные причины того, что нужная строка улетает гораздо ниже:
У тега div стоит не нулевое свойство: либо margin-bottom, либо padding-bottom.
В первом случае идет инструкция делать определенный отступ от div до ниже лежащего элемента, во втором — делать "поля" внутри элемента. Когда div приобретает свойство display:none, отступы исчезают вместе с блоком.
Рекомендую погуглить по словам: reset css. Рецептов в глобальной сети несколько, смысл один: сбросить настройки всех тегов на некое нулевое оформление громоздкой записью в начале css-файла. Ниже уже указывать необходимые значения. Это дает возможность отображать страницу одинаково в большинстве браузеров.
Возможные причины того, что нужная строка улетает гораздо ниже:
У тега div стоит не нулевое свойство: либо margin-bottom, либо padding-bottom.
В первом случае идет инструкция делать определенный отступ от div до ниже лежащего элемента, во втором — делать "поля" внутри элемента. Когда div приобретает свойство display:none, отступы исчезают вместе с блоком.
Рекомендую погуглить по словам: reset css. Рецептов в глобальной сети несколько, смысл один: сбросить настройки всех тегов на некое нулевое оформление громоздкой записью в начале css-файла. Ниже уже указывать необходимые значения. Это дает возможность отображать страницу одинаково в большинстве браузеров.
после chroma ты будешь вспоминать firebug как страшный сон
увы ....
#define RUSLAN_PARSE_ERROR "увы ...."
Ну да. Дело в br. После блочного элемента итак начинается новая строка (если не установлена обтекаемость). br добавляет еще один перенос. Присвой ему id и ставь в стиле display:none, когда div не прячешь.
Я бы поступил иначе: сделал классы shown и hidden для div. Далее в CSS прописал бы:
Я бы поступил иначе: сделал классы shown и hidden для div. Далее в CSS прописал бы:
div.shown+br, div.hidden {display:none;}
офигенно интересная идея, спасибо, попытаюсь, не знаю правда как это можно было бы зашаблонить чтобы обработать несколько сотен папок, наверное можно .....
если не установлена обтекаемостьа если ее уcтановить? и как ...
function showLayer(id) {document.getElementById(id).className = "shown";}
function hideLayer(id) {document.getElementById(id).className = "hidden";}
а если ее уcтановить? и как ...Не советую. Это css-свойство float с очень неприятным поведением для новичков в CSS. Просто я его упомянул, чтобы быть точнее в определении новой строки.
ОК!
Спасибо, буду пытаться.
Спасибо, буду пытаться.
Оставить комментарий
BULKA8
Код страницы с меняющим видимость слоем:По-видимому из-за того, что при изменении видимости слоя <div id="biology" style="display:none;"></div> он отвлекает на себя какое-то место на экране, положение строки physics меняется - она опускается ниже, оставляя некрасивый и неэкономный пробел.
Можно ли как то это подправить?