iDrugov
-
Posts
72 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by iDrugov
-
Кстати, отличный способ. Работает у меня на сайте, отображается вполне корректно.
-
Красивые элементы дизайна дает CSS3, а не HTML. И то, особо много на нем не сделаешь. Как образец, можете посетить мой сайт, где графика только в четырех местах (фон, лого, фото, иконка top creator)
-
Отобразился сайт кривовато и выдал ошибку: Похоже, исполняемый на этой странице сценарий занят или не отвечает. Вы можете остановить его сейчас или продолжить и посмотреть, сможет ли он завершить свою работу. Сценарий: http://desomag.ru/design/js/ddsmoothmenu.js:61 Но полосы прокрутки нет и лишнего отступа тоже.
-
Можно начать с основ. <!doctype html> - не указано <html> <head> <meta charset="utf-8"> - не указано <title>Мой сайт</title> - не указано </head> <body> <script type="text/javascript">var lgn='yarkiy';</script><script type="text/javascript" src="http://hoad.vlasenko.net/hoad.js"></script> - зачем это в body? Код должен быть ступеньками, в идеале: <div> <div> <div> <div> </div> </div> </div> </div> </body> </html> Не критично, но неграмотно. И весь сайт заключен в один див. Зачем? ЗЫ Заполните сайт, например о себе, уберите ненужные кнопки, заполните нужные.
-
Одна страница? Особо оценивать-то нечего. Бывает и хуже, если вас это подбодрит
-
Я верстаю под последнюю Опера, потом добавляю хаки для других браузеров, проверяю в Хроме, ФФ и заливаю. На ИЕ смотреть вообще нельзя, туда либо табличную графику заливать, либо забить на него вообще.
-
Лучше использовать графические элементы, ибо повернутый текст в CSS выглядит не очень.
-
Можно ли сделать элемент, который зависит от перемещения мышки? Например, для создания своего scroll. Поэксперементировал с position, но элемент либо "прыгает" в сторону, либо держится на месте.
-
Лучше использовать нестандартные шрифты один/два раза, в случае крайней необходимости. Как показал опыт - гугл фонтс и обычное подключение шрифта, всё равное не дают должного результата. Даже простые шрифты типа Myriad Pro или Calibri выглядят поршиво в XP, а подключение каллиграфического шрифта и на семерке его кособочит. По-меньшей мере у меня не вышло ничего толкового.
-
Очень толковый код! Долго веъзжал и соображал, но сделал на сайте как хотел. Удобно то, что еще один такой же спойлер сворачивает предыдущий. Можно делать подряд спойлеры и не беспокоиться особо. Правда сложный код в общей сложности вышел, чтобы реализовать кнопку "обо мне".
-
Жжете, ребят! Буду объюзывать ваше творчество еще пару ночей
-
strange_atom, недоглядел как-то, что не месье Затем, что тема та была без ответа, да и читать её долго, а теперь есть два готовых решения на двух постах, на первых запросах гугла
-
Хм. Переписывал сайт две ночи, не выходит, в том редакторе всё путем. Странно, буду переписывать еще ночь тогда
-
sigma77, ничего себе! Месье, ды вы гуру CSS! Такого кода я еще не видел, аплодирую стоя!
-
wwt, в первой ссылке, как я вижу в Опера - пусто. В общем-то тот же самый код, без разницы. А по второму примеру: Сам блок идет от левого верхнего края. А если внутрь этого блока поместить еще один релативный блок, кнопку например, то она идет от нижнего левого.
-
npofopr, кто растянется? Какой родитель? ЗЫ Вопрос о системе отсчета, если что. Волнует то, что релативный элемент от релативного блока изменяется только от левого нижнего угла, вместо левого верхнего.
-
Этот "урок" сочетает в себе все темы, поднятые ранее и видимо окончательно (или до новых модификаций языка) закрывает данный вопрос. Спойлер открывается по клику на его название и скрывается по клику в любую область за его пределами. Ничего нового, просто последовательное строение: #spoiler:focus .spoiler { display: block; } .spoiler { display: none; overflow: hidden; } <a href="#" id="spoiler">Название спойлера <div class="spoiler">информация для скрытия, появляется по клику</div> </a> Самое простое решение, которое не работает в Google Chrome вообще. Запросив на гугле: "WTF?", получил рекомендацию прописать: tabindex="1" Почему "1"? Это номер фокусировки. Если будете создавать несколько спойлеров, то указываете номера по порядку для каждого нового: "1", "2," "3" и т.д. <a href="#" id="spoiler" tabindex="1">Название спойлера <div class="spoiler">информация для скрытия, появляется по клику</div> </a> Проверили, работает! В Хроме выделяется желтым цветом, в Opera и Mozilla всё норм, оставляем. Всё? А нет. Нам нужна кнопка, которая будет раскрывать спойлер. Дело в том, что кнопка должна быть relative, или вообще не содержать position, потому что при absolute, перестает работать спойлер в Mozilla. .button { position: relative; display: inline-block; padding: 0 5px 2px 5px; background: #69C; } <a href="#" id="spoiler"><p class="button">Название спойлера</p> <div class="spoiler">информация для скрытия, появляется по клику</div> </a> Ура! Две бессоные ночи не прошли даром. Кстати, любители извращений, типа Internet Explorer, так же могут его объюзать, что радует. Всё ориентировано исключительно на Windows-пользователя с компьютера/ноута, так что за работоспособность в планшетах и тем более на мобильниках через jar, вообще ничего не обещаю.
-
В общем беру я пустую страницу и хочу сделать на ней релативный див, с указанием размера в процентах. Как выяснилось опытным путем, такое бывает нужно. Казалось бы, задача проста: <div id="relative"></div> #relative { position: relative; display: block; height: 60%; width: 75%; background: #000; } НО не работает. Гугол вообще не дает ответов на такие вопросы, значит мы не ищем легких путей. И в первичном CSS помимо обнуления значений, пишем в body position: absolute; height: 100%; width: 100%; Теперь любой релативный элемент "падает" вниз и его расположение приходится писать от bottom, что напрягает, но я никак не пойму, что нужно подправить. Есть идеи?
-
Я конечно понимаю, что прошло много времени, но поднимаю тему. За два года кроссбраузерность не увеличилась? Что-то у меня данный спойлер контачит лишь в Опера.
-
mishka, расчетное разрешение сайта 1024х600, так что мобильники меня вообще не интересуют Кстати, мне нельзя смотреть свою лс! Конечный рабочий код <style> #block { position: absolute; /*необходимо для своих стрелок*/ height: 256px; width: 256px; overflow: hidden; } #block:after /*стрелка вверх*/ { position: absolute; content: ''; right: 0; top: 0; opacity: 0.75; border-right: 4px solid transparent; border-left: 4px solid transparent; border-bottom: 4px solid #000; } #block:before /*стрелка вниз*/ { position: absolute; content: ''; right: 0; bottom: 0; opacity: 0.75; border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 4px solid #000; } .info { height: 100%; width: 100%; padding: 0 25px 0 0; /*"прячет" системную полосу прокрутки за пределы block*/ margin: 0; /*убирает отступы у тега <p>, что не требуется в <div>*/ overflow: auto; } </style> <div id="block"> <p class="info"> Вот дом,<br> Который построил Джек. <br><br> А это пшеница,<br> Которая в темном чулане хранится<br> В доме,<br> Который построил Джек. <br><br> А это веселая птица-синица,<br> Которая часто ворует пшеницу,<br> Которая в темном чулане хранится<br> В доме,<br> Который построил Джек. <br><br> Вот кот,<br> Который пугает и ловит синицу,<br> Которая часто ворует пшеницу,<br> Которая в темном чулане хранится<br> В доме,<br> Который построил Джек. </p> </div> Может быть потом, когда решу переписать сайт на jQery Всем огромное спасибо! Этот вариант вполне меня устраивает.
-
mishka, это же гениально! Всё гениальное просто Надо обюзать этот момент!
-
Нашел! Нашел решение с плавной анимацией. Ларчик просто открывался: Оставив relative, сделал просто скрытие вверх половины информации. Без изменения position заработал transition-duration .info { position: relative; padding: 0; margin: 0; top: 0; /* плавное воспроизведение вверх */ -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; } #block:hover .info { top: -50%; /* плавное воспроизведение вниз */ -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; } npofopr, стрелочку или полоску - без разницы. Поменяю значения, будет полоска. Мне вот интересно, как можно ли завязать scroll только на неё? Кстати, завязать анимацию на псевдоэлементы нельзя, так что сделать "плавающую" полоску не получится, если ты о ней.
-
npofopr, интересует чистый css, я принципиально ищу обходы
-
Задача: сделать scroll внутри div, избегая полосу прокрутки. Причина: полоса прокрутки не вписывается в дизайн сайта (ну как обычно). Выбранный путь: #block { position: absolute; height: 256px; width: 256px; overflow: hidden; } .info { position: relative; padding: 0; margin: 0; } #block:hover .info { position: absolute; bottom: 0; } <div id="block"> <p class="info"> Вот дом,<br> Который построил Джек.<br> <br><br> А это пшеница,<br> Которая в темном чулане хранится<br> В доме,<br> Который построил Джек.<br> <br><br> А это веселая птица-синица,<br> Которая часто ворует пшеницу,<br> Которая в темном чулане хранится<br> В доме,<br> Который построил Джек.<br> <br><br> Вот кот,<br> Который пугает и ловит синицу,<br> Которая часто ворует пшеницу,<br> Которая в темном чулане хранится<br> В доме,<br> Который построил Джек. </p> </div> Проблема: это решение не работает с transition-duration, т.е. прокрутку не получается сделать плавной. И нет никого "опознавательного" знака, что можно прокрутить страницу. Стрелочку вниз можно сделать несложно: #block:before { position: absolute; right: 0; bottom: 0; content: ''; border-right: 8px solid transparent; border-left: 8px solid transparent; border-top: 8px solid #000; } Конечный имеющийся вариант: посмотреть Но можно ли сделать прокрутку при наведении на саму стрелочку, а не на весь блок в целом? Скажем, даже если сделать её не псевдоэлементом, а отдельным div'ом?
