Я_Евгений
-
Posts
7 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Я_Евгений
-
-
Делаю сайт. Потребовалось сделать блоки, которые открываются при нажатии на них. Сделал всё при помощи псевдоэлемента :focus.
Вот ссылка на код: http://jsfiddle.net/3ujogh36/
Смысл таков, что:
- родительский элемент без фокуса имеет надпись;
- после фокуса род. элемент принимает высоту на весь контент;
- надпись исчезает, появляется контент.
Всё хорошо, но проблема в том, что в скрытом контенте, который появляется при нажатии на род. элемент, есть ссылка, и при нажатии на неё переход не осуществляется, а только скрывается контент.
Вопрос в том, как сделать, чтобы при нажатии на ссылку в контенте переход осуществлялся.
Буду благодарен за варианты ответов!))
-
Даже и не знал, что так делают) Впервые слышу о таком)
Спасибо за статью!) Понял всё по этому примеру: "
Сноски и вложенные термины, которые могут оказаться внутри ссылок.
".
-
Здравствуйте!
Интересует вопрос о базовых законах HTML и CSS (на подобии такого тезиса, что нельзя блочные элементы "засовывать" в строчные). Прошу написать всё, что придёт в голову по этому вопросу, но очень был бы признателен, если кто-то кинет ссылку, где можно про это почитать.
-
А вообще для адаптивного дизайна вот такой полный код:
лучше использовать http://htmlbook.ru/css/mediaв одном css файле
Можно и так, но просто мне удобно использовать несколько файлов стилей.
-
Доброго времени суток, знатоки!
Создаю сайт с адаптивным дизайном с использованием @media. Подключаю стили для разных разрешений экрана. Стили, в принципе, одни и те же, меняются лишь значение у width, height, font-size, margin и padding. Подключаю так:
<link rel="stylesheet" type="text/css" href="styles/style.css" /><link media="only screen and (max-width:1650px)" rel="stylesheet" href="styles/style_1650.css" /><link media="only screen and (max-width:1560px)" rel="stylesheet" href="styles/style_1550.css" /><link media="only screen and (max-width:1450px)" rel="stylesheet" href="styles/style_1450.css" /><link media="only screen and (max-width:1350px)" rel="stylesheet" href="styles/style_1350.css" /><link media="only screen and (max-width:1210px)" rel="stylesheet" href="styles/style_1210.css" /><link media="only screen and (max-width:1000px)" rel="stylesheet" href="styles/style_1000.css" /><link media="only screen and (max-width:850px)" rel="stylesheet" href="styles/style_800.css" />Возник вопрос, нужно ли в каждом файле стилей для нужного разрешения указывать все стили для страниц, хотя они указаны в главном style.css или нужно менять только те свойства, которые будут уникальными для данного разрешения экрана?Заранее благодарю за помощь) -
Пытаюсь спроектировать сайт с адаптивной верской. А именно подгонять размер шрифта под размер экрана, так, чтобы на любом экране в строке было примерно одинаковое кол-во слов/символов.
Как лучше/правильней/кроссбраузерней это сделать?
Пока я представляю себе это так: в css тегу <html> задаем некий базовый размер шрифта, например 20px, а далее при помощи @media(max-width) назначем размеры шрифта тегу <body>(а остльные будут плясать от родителя в em) в rem. И тут возникают вопросы: 1) Какой размер шрифта в html по умолчанию? Может в зависимости от девайса - там уже все как надо? Или лучше сразу назначать размер тегу html в зависимости от экрана, а CSS всем прописывать в rem?
В сети нашел пример:
html { font-size: 62.5%; }
Что это значит? 62,5% от чего?
И еще одна непонятность: с размером шрифта стратегия хотябы понятна. А как быть с контентом и кнопочками менишечками всякими. Сейчас у среднистатистического смартфона разрешение больше чем у среднистатистического ноута например. Поэтому @media(max-width) не подайдет. По @media handheld - мало информации: судя по документации это свойство срабатывает на каких-то КПК. Как определить на 100% что девайс смарфон?
Сам с этим столкнулся. Пока только верстальщик, но в сети нашёл код на javascript:
<link rel="stylesheet" type="text/css" href="styles/style.css" /><script>if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {var x = document.getElementsByTagName("link");var i;for (i = 0; i < x.length; i++) {x.href="styles/style_for_phone.css";}}</script>А вообще для адаптивного дизайна вот такой полный код:<link rel="stylesheet" type="text/css" href="styles/style.css" /><link media="only screen and (max-width:1650px)" rel="stylesheet" href="styles/style_1650.css" /><link media="only screen and (max-width:1560px)" rel="stylesheet" href="styles/style_1550.css" /><link media="only screen and (max-width:1450px)" rel="stylesheet" href="styles/style_1450.css" /><link media="only screen and (max-width:1350px)" rel="stylesheet" href="styles/style_1350.css" /><link media="only screen and (max-width:1210px)" rel="stylesheet" href="styles/style_1210.css" /><link media="only screen and (max-width:1000px)" rel="stylesheet" href="styles/style_1000.css" /><link media="only screen and (max-width:850px)" rel="stylesheet" href="styles/style_800.css" /><script>if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {var x = document.getElementsByTagName("link");var i;for (i = 0; i < x.length; i++) {x.href="styles/style_for_phone.css";}}</script>
Открывающийся блок
in HTML Coding
Posted
Делаю сайт. Потребовалось сделать блоки, которые открываются при нажатии на них. Сделал всё при помощи псевдоэлемента :focus.
Вот ссылка на код: http://jsfiddle.net/3ujogh36/
Смысл таков, что:
- родительский элемент без фокуса имеет надпись;
- после фокуса род. элемент принимает высоту на весь контент;
- надпись исчезает, появляется контент.
Всё хорошо, но проблема в том, что в скрытом контенте, который появляется при нажатии на род. элемент, есть ссылка, и при нажатии на неё переход не осуществляется, а только скрывается контент.
Вопрос в том, как сделать, чтобы при нажатии на ссылку в контенте переход осуществлялся.
Буду благодарен за варианты ответов!))