- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Что делать, если ваша email-рассылка попала в спам
10 распространенных причин и решений
Екатерина Ткаченко
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Здравствуйте!
Есть сайт, сверстанный на div'ах, полностью состоящий из порезанных картинок, которые я сделал фоном, код выглядит вот так:
html:
css:
.main {background: url(img/main.jpg) no-repeat;
display: block;
float: left;
width: 79px;
height: 32px;
}
Вопрос такой (см. картинку):
Эту картинку теперь надо сделать как-то линком, будьте добры, кодом помогите ))
И как правильней будет или лучше тег img в css или в html написать, какой оптимальный вариант?
Спасибо за советы.
И как правильней будет или лучше тег img в css или в html написать, какой оптимальный вариант?
правильно - не насиловать мозг
Эту картинку теперь надо сделать как-то линком, будьте добры, кодом помогите ))
<a href="......"><img src="img/main.jpg" border="0"></a> - и никаких дивов и стилей
кнопка заработала при таких условаиях:
Теперь не могу сделать так, чтобы при наведении мышки на кнопку, картинка менялась на другую...
Как можно это сделать?
Пишу следующее:
.main a:hover {background-image: url(img/main_col.jpg);
background-repeat: no-repeat;
}
и ничего не происходит..
скажите, что не правильно?
flenj, сделай так:
a {
display:block;
width: 126px;
height: 32px;
background:url('img/main.jpg');
}
a:hover {
background:url('img/main_col.jpg');
}
думаю, смысл понятен.
4arger, сделал, не получается все равно, ничего не происходит, а если убираю float: left;
то кнопка вообще убегает, уже пробовал по разному включать и отключать поочередно в css всё, что можно..
:D +100000
Потому как у вас для тега a размеры и высота неуказаны.
Да и в любом случае перекрывает ваша картинка.
Как я вам предлагаю это сделать html:
<ul>
<li><a hef="#" title="Link text" class="link-name-01"></a></li>
<li><a hef="#" title="Link text" class="link-name-02"></a></li>
<li><a hef="#" title="Link text" class="link-name-03"></a></li>
<li><a hef="#" title="Link text" class="link-name-04"></a></li>
<li><a hef="#" title="Link text" class="link-name-05"></a></li>
</ul>
</div>
css:
overflow:hidden;
height:32px;
}
.menu li {
float:left;
}
.menu li a.link-name-01 {
float:left;
width:126px;
height:32px;
background:url(../img/main.jpg) no-repeat;
}
.menu li a.link-name-01:hover {
float:left;
width:126px;
height:32px;
background:url(../img/main_col.jpg) no-repeat;
}
По поводу замены картинки я вам предлагаю сделать это через CSS-спрайты так как при таком использовании картинка будет подружатся мгновенно, А не заставлять пользователя ждать. Ну и в конце концов все по феншую:D
p.s. да и скорее это ссылкой называется, но не кнопкой.
musulman, это называется кнопкой ; ) на изображении слово "ГЛАВНАЯ" и фон - есть единая картинка. Поэтому список здесь не поможет..
кстати, указал размер для тега а - тоже самое - ничего ))
За спрайты спасибо - буду экспериментировать с ними!
Да ну как это списком неполучится?
А вот как тут?:)
да не прав ))
musulman, подскажи пожалуйста как сделать меню на спрайтах из этой картинки.
Снизу положение a:hover, сверху обычный вид.
Здесь не могу понять как это сделать при разной длине рисунка..
размеры такие: 79, 94, 126 - длина соответственно.
32 - ширина видимой области.
PS. или выход только один? - делить на три спрайта..
Вижу два варианта.
1. Почитать наконец про html (например тут)
2. "не насиловать мозг" (с) T.R.O.N и дать денег верстальщику (например musulman)
Алексей Барыкин, спасибо:)
Ну тут все просто я думаю вы обратили внимание что я для каждой ссылочки дал свой класс!?
Поэтому вы спокойно можете задать ширину и высоту.