ОсновноеRadiotalkПользовательское
Программирование
6   •   Посмотреть все темы

CSS: Вопросы и Ответы.

 

2970
удалён @Foggy
ZloVeЩиЙ пишет:

Как без JS сделать появление\скрытие DIV`a при наведении на ссылку которая находится совсем в другом DIV`e ?

никак. только если делать скрипты в css (они же фильтры). но это по нагрузке хуже скриптов, посему лучше скриптами.

4619
Web3r @Web3r
Если то, что появится при наведение на ссылку в другом dive будет простым текстом, можно заюзать свойство content. А больше никак.
P.S Минут 10 сидел и пробовал что-то с display и !important сделать... Нихрена не получилось. (:

Отредактировано Web3r - 15.08.2011
6703
Андрей @ZloVeЩиЙ
Foggy, как вариант.
Пример можно?

Weber, ты 10 минут, а я вот уже сутки голову ламаю (:

посему лучше скриптами

То месте где мне это нужно осуществить не подерживает JS - он там вообще запрещен.

посему вопрос остается актуален

Отредактировано ZloVeЩиЙ - 15.08.2011
4619
Web3r @Web3r
Такая вот херня. Есть таблица. В ней две колонки, по одному столбцу. В первом столбце картинка. Во-втором два блока <div></div>, один выше, другой ниже, соответственно.
Во всех браузерах нормально, в Google Chrome между div'ами по вертикали образуется линия в 1 пиксель... Что я только не приписывал блокам, эта линия все равно остаётся.
Прилагаю примерный скрин. Как избавится от линии?

2970
удалён @Foggy
может это не бордеры, а background от td или table? попробуй убрать, если есть.
если, убрав его, не выйдет, пример разметки в студию.

4619
Web3r @Web3r
Есть тег P. К нему есть бордер. Можно ли поставить opacity только на бордер?

2970
удалён @Foggy
Weber пишет:

Есть тег P. К нему есть бордер. Можно ли поставить opacity только на бордер?

можно.
сделать цвет по принципу rgba.
p {border:1px solid rgba(255,0,0,0.5);}
в таком случае цвет красный, полупрозрачный.
0.5 - коэффициент прозрачности.
поддерживается не всеми браузерами, **********.
(чтобы укоротить на байт, можно перед точкой ноль не ставить - браузеры понимают)

Отредактировано Foggy - 19.09.2011
4619
Web3r @Web3r
Исчо одна фигня.
Есть абсолютно позиционированный div с width 100% и height 100px.
К нему прикручено overflow-y:scroll, overflow-x:hidden.
Если использовать скроллбар по Y, то он нормально скроллится до нижней части контента.
Если же нажать "колесиком" мышки (при этом появляется автопрокрутка на все четыре направления), то этот блок начинает скроллится за рамки контента...
Прилагаю скрин. Как пофиксить скроллинг? Хелп.
P.S Знаю, что это из-за position:aboslute, но убирать его нельзя.

Отредактировано Web3r - 20.09.2011
2970
удалён @Foggy
вряд ли поможет, хз, но попробуй прописать
overflow: hidden; overflow-y:scroll;
или вот так
overflow: auto; overflow-x: hidden;
порядок важен, если что.

1555
Алексей @TheDark
Добрый день. Вопрос: можно ли как-то изменить стилями элемент select, а именно стрелочку?

Отредактировано TheDark - 22.09.2011
4619
Web3r @Web3r
Можно либо наложением background'а, либо альтернативными скриптами, вроде jquery.
А ещё как вариант - сделать селектор на div, добавив события onclick и т.п.

333
BONN1x @BONN1x
возможно ли внедрить в css шрифт .ttf без скрипта?

2970
удалён @Foggy
можно, но это будет не кроссбраузерно. решение **********.

333
BONN1x @BONN1x
а кто может что предложить со скриптом (с минимальным весом скрипта)

2970
удалён @Foggy
расскажу вкратце, ибо сам когда-то тестил все варианты и выбирал для себя с учётом плюсов/минусов:
есть варианты замены текста флэшом с выбранным шрифтом, есть варианты замены его картинками, и есть различные js-средства. Флэш и картинки отпадают сразу, ибо это очень тормозит браузер, так как генерация их происходит каждый раз заново при загрузке страницы.
js вариантов немало, но выделяются два лучших: ********** и **********.
из минусов первого: если выделяешь и копируешь текст, он не копируется.
из минусов второго: не применить css-свойство ::selection, которое позволяет изменить форматирование (обычно фон) выделенного курсором текста. сразу едет вёрстка текста. также к такому тексту вообще крайне проблематично применять какие-либо стили.
из минусов обоих: они также не кроссбраузерны - старые версии браузеров их не поддерживают. однако поддержка всё-таки у всех разная. лично я забил на это и использовал css свойство @font-face и плевал, что оно не работает в опере младше десятых версий. какими-то пользователями всё равно приходится жертвовать. ещё из минусов обоих: требуется подключение файла фреймворка и файла шрифта, который надо будет заранее конвертировать в js формат с помощью сайтов. фреймворк typeface весит меньше, но проблем с ним больше.
если вся эта затея ради заголовка сайта - советую использовать просто картинку, если нет, я бы всё-таки остановился на css. ибо этот метод имеет меньше всего багов) ну, ситуацию с фреймворками я поведал, а дальше уж тебе выбирать)
почти статья получилась вместо совета)

Отредактировано Foggy - 15.11.2011
333
BONN1x @BONN1x
Foggy пишет:

расскажу вкратце, ибо сам когда-то тестил все варианты и выбирал для себя с учётом плюсов/минусов:
есть варианты замены текста флэшом с выбранным шрифтом, есть варианты замены его картинками, и есть различные js-средства. Флэш и картинки отпадают сразу, ибо это очень тормозит браузер, так как генерация их происходит каждый раз заново при загрузке страницы.
js вариантов немало, но выделяются два лучших: ********** и **********.
из минусов первого: если выделяешь и копируешь текст, он не копируется.
из минусов второго: не применить css-свойство ::selection, которое позволяет изменить форматирование (обычно фон) выделенного курсором текста. сразу едет вёрстка текста. также к такому тексту вообще крайне проблематично применять какие-либо стили.
из минусов обоих: они также не кроссбраузерны - старые версии браузеров их не поддерживают. однако поддержка всё-таки у всех разная. лично я забил на это и использовал css свойство @font-face и плевал, что оно не работает в опере младше десятых версий. какими-то пользователями всё равно приходится жертвовать. ещё из минусов обоих: требуется подключение файла фреймворка и файла шрифта, который надо будет заранее конвертировать в js формат с помощью сайтов. фреймворк typeface весит меньше, но проблем с ним больше.
если вся эта затея ради заголовка сайта - советую использовать просто картинку, если нет, я бы всё-таки остановился на css. ибо этот метод имеет меньше всего багов) ну, ситуацию с фреймворками я поведал, а дальше уж тебе выбирать)
почти статья получилась вместо совета)

я для развития изучаю

4619
Web3r @Web3r
В: Есть два блока div, один стоит выше, другой ниже. Код таков:
<div id="pre_content"></div>
<div id="content"></div>

Необходимо сделать так, чтобы визуально эти блоки находились на прежних местах, а в коде наоборот, т.е:
<div id="content"></div>
<div id="pre_content"></div>

Как это сделать по горизонтали более менее ясно, а вот с вертикальным расположением первый раз сталкиваюсь. Пробовал с absolute, margin'ом - ломается остальная страница.

Надеюсь на дельный совет.

Отредактировано Web3r - 04.05.2012
20090
Dimitry @Dimitry
странно, зачем это? ) думаю только абсолюбом их ставить, дургого не могу придумать)

2536
удалён @crigon
Weber пишет:

В: Есть два блока div, один стоит выше, другой ниже. Код таков:
<div id="pre_content"></div>
<div id="content"></div>

Необходимо сделать так, чтобы визуально эти блоки находились на прежних местах, а в коде наоборот, т.е:
<div id="content"></div>
<div id="pre_content"></div>

Как это сделать по горизонтали более менее ясно, а вот с вертикальным расположением первый раз сталкиваюсь. Пробовал с absolute, margin'ом - ломается остальная страница.

Надеюсь на дельный совет.

<div style="width: 100px; height: 100px; position: relative; top: 100px; background: #800; color: #fff">1</div>
<div style="width: 100px; height: 100px; margin: -100px 0 0 0; background: #008; color: #fff">2</div>