Бесплатные консультации: HTML, CSS

Создал Алексей Локтев 9 октября 2008 г. в 21:30
в категории «Бесплатные уроки, консультации»
Не вставляйте плиз целиком тексты страниц и стилевых файлов. Конкретный вопрос конкретный ответ.


Комментарии (12)
 
 

Рейтинг 100
От Глеб Галкин, 11 октября 2008 г. в 23:02
можно ли на один слой положить два бэкраунда, к примеру две картинки?
ссылка на это сообщение
 
 
 

Рейтинг 115
От Алексей Локтев, 11 октября 2008 г. в 23:16
Только забудем термин «слой» слои отмерли вместе с Netscape:) Скажем, речь о div.

Бэкграунд это либо цвет, либо фоновая картинка.

На один div нельзя конечно, атрибут background-image задаёт только один УРЛ картинки, background-color задаёт только один цвет.
Единственный вариант если один бэкграунд цвет, а другой УРЛ картинки с прозрачными областями либо картинки, занимающей не всю площадь div. Тогда всё сработает:

[div style='background-color: red; background-image: url(«a.gif»)']
aaaaaaaaa
[/div]

Через прозрачные области картинки будет проглядывать красный цвет.

Но html и css это только инструменты, с помощью которых мы должны добиваться наших целей.
Если надо на фоне div наложить две картинки друг на друга, подход другой.
Не будем принимать во внимание формат png там особый случай.
Получается, что имеем два файла в формате gif.
Делаем внешний div, охватывающий, того же размера.

[div style='background-image: url(«bg1.gif»)']
[div style='background-image: url(«bg2.gif»)']
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
[/div]
[/div]

Естественно, bg2.gif должен иметь прозрачные области либо занимать не всю область div, иначе задача не имеет смысла. Через прозрачные области bg2.gif будет проглядывать bg1.gif.
ссылка на это сообщение
 
 
 

Рейтинг 100
От Сергей Сергей, 5 мая 2009 г. в 20:07
Алексей, подскажите, как обычно у профессионалов решается такая проблема, касающаяся CSS.

В стилях для ссылок в hover прописан background-color, который отличается от цвета фона страницы.
Для текстовых ссылок все получается замечательно -- при наведении на ссылку у нее появляется фон и т.п.

Но беда в том, что на странице есть не только текстовые ссылки, а и ссылки-картинки. Соответственно при наведении на такую ссылку-картинку в Опере получаем не очень приятный эффект «подчеркивания» картинки. Хотелось бы для ссылок-картинок задать фон прозрачным.

Как-то можно выкрутиться, не присваивая каждой картинке отдельный класс?
ссылка на это сообщение
 
 
 

Рейтинг 115
От Алексей Локтев, 6 мая 2009 г. в 00:14
Правильно ли я понял, что у вас для ВСЕХ ссылок прописан фон:
a
{
background-color: red;
}

и поэтому те ссылки, которые вы сделали картинками:

[a href="..."][img src="..."][/a]

тоже получают этот фон?

Присваиванием класса КАРТИНКЕ вы по идее ничего не добьётесь ведь фон при наведении мыши получает тег A а не тег IMG. Если же у вас что-то получилось именно присваиванием класса картинке,
так впишите найденное в:

a img
{
...
}

и картинки, расположенные внутри ссылок (т.е. ссылки-картинки), получат нужные атрибуты без присваивания класса.

Если ваши ссылки-картинки не разбросаны по всей странице, а локализованы (например, в меню или инструментальной панели), можете взять весь блок ссылок-картинок в один div скажем с классом imgrefsdiv, и тогда можно добавить css-описание:

.imgrefsdiv a:hover
{
background-color: transparent;
}

и ссылки именно из этого div не будут подсвечиваться при поднесении мыши, что нам и надо.

Последний вариант мне кажется наиболее удачным.
Другие способы наверное не существуют, т.к. мы не можем в css разделить описания тех тегов A которые содержат картинку от тех тегов A которые её не содержат... т.е. общего описания быть не может, мы вынуждены или у каждой ссылки-картинки явно указывать класс, или предпринимать дополнительные усилия для различения этих тегов A (например введением охватывающего div, как в моём примере).

Непонятно, почему вообще что-то видно из фона тега A если внутри тега A картинка, которая перекрывает фон тега A. Может быть, следует для картинки указать в стилях margin:0 и border:0, и эффект пропадёт? Проверьте.
ссылка на это сообщение
 
 
 

Рейтинг 100
От Сергей Сергей, 6 мая 2009 г. в 22:56
Спасибо за желание помочь.
Да, очевидно единственный способ решения проблемы подвести ссылки-картинки под действие контекстного селектора или присвоить им отдельный класс:(
>Непонятно, почему вообще что-то видно из фона тега A если внутри тега A картинка, которая перекрывает фон тега A.
Ну да, это самое непонятное из всего непонятного. И так реагирует только Опера. См. http://primer.wd0108.ru/ -- кнопка-картинка посреди текста.
Чтобы по-максимуму застраховаться в этом случае, в стилях прописал

IMG {background-color:#fff; margin:0; border:0; padding:0}
A:hover {background-color:#000; color: #fff; margin:0; border:0; padding:0}
A IMG {background-color:#fff; margin:0; border:0; padding:0}

Но это все равно не помогает.
ссылка на это сообщение
 
 
 

Рейтинг 115
От Алексей Локтев, 6 мая 2009 г. в 23:29
Мда... спасибо за интересный пример.
В очередной раз убедился, что больше всего проблем доставляет Опера.
Успехов!
ссылка на это сообщение
 
 
 
Ivan Kozlovski
Рейтинг 100
От Ivan Kozlovski, 26 марта 2010 г. в 00:35
Добрый вечер Алексей!!! Скажите вы разберетесь в javascript? Дело в том,что когда вставляешь javascript на сайт он пишет (Непарные круглые скобки) , я проверил вроде все скобки парные. Вы не знаете в чём тут дело?
Спасибо
ссылка на это сообщение
 
 
 

Рейтинг 100
От Валентин Вознюк, 11 августа 2010 г. в 12:56
Доброе время суток. Была поставлена интересная задача. Сделать календарь. Сейчас опишу как должен выглядить.
Цифры по порядку то число которое сейчас выше остальных и жирнее ( с этим вопросов нет), а теперь самое интересное)) то число которое сейчас над ними справа и слева текст, справа дата: , а слева месяц и год, вот как это организовать?? есть идея числу которое сейчас будет заносится в див(либо li) со своими параметрами шрифта, и высотой больше а как к прикрутить текст над цифрой я не знаю, надеюсь на вашу помощь. Большое спасибо.
ссылка на это сообщение
 
 
 

Рейтинг 115
От Алексей Локтев, 12 августа 2010 г. в 11:55
Добрый день.
Что-то непонятно, пардон.
Слева и справа от текущей даты некий текст, неважно какой.
«а как к прикрутить текст над цифрой я не знаю» а почему НАД? И в каком смысле НАД выше цифры или ближе к смотрящему?
Я полагаю вам дали какой-то макет (картинку), где видно, что от вас требуется сверстать. Было бы неплохо чтобы вы его приложили к своему посту. Если макета нет, надо его нарисовать (тот кто ставит задачу должен быть с макетом ознакомлен и согласен), для верстальщика макет это святое, да и мне вот так, словами и на пальцах, не понять, что у вас за проблема.
ссылка на это сообщение
 
 
 

Рейтинг 100
От Валентин Вознюк, 12 августа 2010 г. в 14:16
Ну не так, если точнее мне самому интересно как такое сделать.
Про список.
Предположем

  • Последние нововсти........8

  • Персональные.................2

  • Городская власть............8

  • вот такой список, добавим тег


с классом для названия и цифр, т.е. для названия float: left;( этот же класс к цифре добавим) и + к цифрам ещё один клас text-aling: right; для выравнивания по правой стороне, между ними есть проблем. где то больше где то меньше, в зависимости от длины категории и количества постов(цифр). Вот как место пропуска сделать точки, идея типо, поставить фон из точек а названию и цифрам задть белый фон не очень то и подходит. Про календарь, вот макет: http://st.free-lance.ru/projects/upload/f_4c5ee4f9319f8.jpg
Большое спасибо.


ссылка на это сообщение
 
 
 

Рейтинг 115
От Алексей Локтев, 13 августа 2010 г. в 09:41
Про список кроме фона из точек, других идей у меня нет. Только точки должны быть однопиксельные, чтобы не получалось, что какая-то точка только наполовину видна из-под буквы нужно чтобы или вся точка была видна, или вся не видна.

Про календарь это верстается, например, таблицей в 2 строки и 3 ячейки:
сегодня (text-align:right) | 19 (rowspan=2) | августа 2010 года
1 .. 18 | 20 .. 30

или таблицей в 1 строку и 3 ячейки:
сегодня[br]1 .. 18 | 19 | августа 2010 г.[br]20 .. 30

если вы любитель «дивной» вёрстки, можете придумать другое решение, что нибудь типа:
в первом диве «сегодня[br]1 .. 18», во втором «19», в третьем «августа 2010 г.[br]20 .. 30», и они все друг друга обтекают.
ссылка на это сообщение
 
 
 

Рейтинг 100
От Валентин Вознюк, 13 августа 2010 г. в 14:25
Большое спасибо, попробую.Просто контент будет динамическим.
ссылка на это сообщение
 

Цитатник

Всего 0 цитат из темы форума и её обсуждения.

©  www.e-learning.by
: el-info (at) e-learning by Пишите письма!: el-info (at) e-learning by