Jump to content

DarkTranquillity

Newbie
  • Posts

    16
  • Joined

  • Last visited

Everything posted by DarkTranquillity

  1. Вроде как решается добавлением left: 50%;Но я использую CMS и там для трех блоков, идущих друг за другом, применяю класс псевдотега, и после добавления left: 50%; - вместо трех треугольничков - остается только один.
  2. Доброго времени суток. Подскажите, как решить задачу в IE. Вот ссылка: http://codepen.io/anon/pen/uzHfb - footer с треугольником на CSS3 через псевдотег :before. В Firefox и Chrome под Win7 - всё ок, треугольник по центру, а в IE11 (в младших тоже наверное) - треугольник смещен влево. Та же история (смещен влево) и в Chrome на Android. Заранее благодарю за помощь.
  3. Добрового времени суток. Подскажите, как для тэга img в CSS задать правило сохранения пропорций (аналогично как background-size: cover;). У меня вот следующая конструкция: .img-intro-left{ float: left; border: 3px solid #FCBF66; margin-right: 15px;}.img-intro-left img{ width: 150px; height: 150px;}Но при определенных размерах ширины и высоты изображения - оно естественно искажается. Возможно ли это реализовать на CSS? Заранее благодарю за подсказки
  4. Спасибо за подсказку - помогло Вот только в Opera по-прежнему зазор... Вот думаю, стоит ли вообще в таких случаях делать на CSS3, если есть возможность вставить просто бэкграунд изображение весом в пару килобайт. Зазор решил через сдвиг псевдоблока на -1 пиксель влево.
  5. Здравствуйте. Создал на CSS3 небольшую конструкцию: http://jsfiddle.net/R6ynT/ Линия 100%, под ней два блока пл 50% и у одного из них прилеплен треугольник через псевдотэг. В FireFox отображается хорошо, а вот в Chrome и Opera - по-разному. В Chrome треугольник сдвигается на пиксель вверх. В Opera появляется просвет между треугольником и левым блоком. Подскажите, пожалуйста, можно ли решить эту задачу кроссплатформенно? Заранее благодраю за подсказки.
  6. Здравствуйте. Хочу решить задачу, решение которой вижу в табличном варианте: таблица из трёх колонок (первая 540px, вторая 200px, третья 200px) Как реализовать через DIV блочную вёрстку? Заранее очень благодарен.
  7. Здравствуйте. Помогите, пожалуйста, решить вопрос: есть меню с псевдоклассами .a.link, a.active и a.hover. Для каждого псевдокласса свои цвета текста (link чёрный, hover чёрный, active синий). Задача: сделать active при наведении (при hover т.е.) синим (т.е. просто hover ссылки должны быть чёрным, но active hover синим). Активный пункт меню: ul.sd-hmenu>li>a.active { color: #0D6EAB; } Как решить вопрос выше? Пробую перечислением: ul.sd-hmenu>li>a.active, .sd-hmenu>li>a.hover { color: #0D6EAB; } В чём ошибка?
  8. Спасибо всем за помощь, сделал 8 блоков. з.ы. в body у меня уже имеется фоновая текстура, помимо рамок... поэтому вариант в блоками подошёл больше.
  9. Здравствуйте. Не могу решить задачу: есть декоративная рамка, её нужно пустить (с повторением естественно) по краям монитора (вне зависимости от разрешения...). Вопрос: возможно ли это реализовать средствами CSS 2.x? Или только через CSS3 путём добавления нескольких фоновых изображений? Я это вижу так, что нужно пустить 4 фоновых элементов рамки (сверху, справа, слева, снизу с соответствующим репитом для каждого). При этом ещё долэны быть углы рамки в виде декоративных квадратов - их просто раскидать по 4 углам. Подскажите, может есть какие-то ещё варианты? И правильно ли я рассуждаю? Заранее благодарю за подсказки.
  10. Баг верстки. При чем тут джумла? Ну потому что странно, что везде всё нормально, даже в ИЕ7-8, а в ИЕ9 баг. Вот и хочется разобраться, чтобы записать себе его в коллекцию. Я покапался глубже и выяснилось, что модуле (слайдшоу) для джумлы, который у меня был установлен в той позиции, есть отдельный css, правка которого решила проблему. Вернее даже и проблемы не было, вышел оптический обман. Во всех браузерах по краям при помощи css была поставлена тень, а IE её наверное не понимает, а без этой тени складывалось такое впечатление, что модуль смещён.
  11. Хаки? Да... А надо было в HTML? В любом случаи -помола звёздочка в CSS.
  12. Сделал по указанному примеру: .slideshow { width: 345px; height: 217px; float: left; position: absolute; top: 140px; left: 515px; } <!--[if lte IE 9]> .slideshow { width: 345px; height: 217px; float: left; position: absolute; top: 140px; left: 500px; } <![endif]--> на странице полный хаус случился.... Решил проблему подставлением звездочки... .slideshow { width: 345px; height: 217px; float: left; position: absolute; top: 140px; left: 515px; *left: 500px; }
  13. Здравствуйте. Доделываю шаблон для Joomla 1.5, создал несколько позиций для модулей - во всех браузерах отображается нормально, а в IE9 один из модулей смещён вправо. в css: .slideshow { padding: 0px; float: left; position: absolute; top: 140px; left: 515px; } Раньше использовал в таких случаях хак: /* *+ HTML .slideshow { left: 490px; } /* IE7 */ Но в девятом осле это почему-то не работает... как с ним быть (с 9-ым ие)? Какой хак можно юзать? Или как для него отдельный CSS сделать (обычно всегда хаками обходился)?
  14. Что-то я в прошлый раз не так сделал... сейчас переправил стили с чистого листа и всё получилось. Результат такой: http://s53.radikal.ru/i139/1106/a0/dd200c9ec074.jpg чего и нужно было добиться. Спасибо всем за отзывчивость!
  15. Ну вот я сделал так: #menu li{ overflow:hidden; text-indent:-9999px; display:inline; float:left; margin-right:10px; } Написал #menu li{ margin-right: 10px; overflow: hidden; padding-bottom: 30px; text-align: center; line-height: 130px; display: inline; } В этом случаи текст появился под кнопками, но само меню стало вертикальным, т.к. пришлось убрать display:inline; , а если его оставлять, то получается вообще какая-то "каша".... Как быть? Как сделать при применённых стилях что бы меню оставалось горизонтальным?
  16. Доброго времени суток. Хочу сделать меню на спрайтах, которое состоит из изображения (иконки) и текста (текст под иконками). Нашёл пример создания тут: http://ruseller.com/lessons.php?rub=29&id=523 Сделал - всё ок, за исключением одного важного для меня нюанса. Мне нужно, что бы под изображением был и текст меню (в виде текста, а не изображения естественно), в данном примере этот текст вынесен за пределы экрана так: text-indent:-9999px; Значение -9999px я убираю на "0" и текст размещается поверх графической части кнопки, а мне нужно спустить его под изображение. Что только не пробовал - не выходит... подскажите, пожалуйста, как это реализовать? Можно на другом примере или ссылку на соответствующий материал... Моя задача: меню в виде иконок под которыми название пункта меню. Неактивный пункт серого цвета (изображение и текст). а при наведении (независимо, на текст иди изображение) спрайт меняется на цветную часть иконки и текст так же меняет цвет. Заранее благодарю за любую помощь и подсказки.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy