Comments on: Кликабельный логотип или ссылка поверх изображения

By: Владимир

Владимир — Thu, 17 Nov 2011 21:32:01 +0000

Сейчас как раз вожусь с лого. Пост в тему, буду разбираться.

By: Диана

Диана — Tue, 12 Apr 2011 17:54:43 +0000

Здравствуйте! Правильно ли я делаю? У меня не получается(((
В index.php у меня так:

и т.д.

В template.css так (в самом конце дописала):
.logo1 {
position: absolute;
margin: 1px 0 0 1px;
z-index: 100;
}

Ничего не изменяется почему-то(((

By: Kitich

Kitich — Thu, 17 Mar 2011 11:59:12 +0000

Поздравляю. Заодно чему-то новому научились )

By: Екатерина

Екатерина — Thu, 17 Mar 2011 11:41:35 +0000

Спасибо большое за помощь:) Я начала все заново и внимательно-внимательно, и все получилось. Видимо по невнимательности и на уставшую голову:) Спасибо еще раз, пошла на паб переносить!

By: Kitich

Kitich — Wed, 16 Mar 2011 15:01:11 +0000

Возможно буду писать глупости, но тестируем вслепую -_- так что приходится

1. Предположим, что div.art-Header-logo a { border: none !important; outline: 0; } не помогло.

2. Предположим, что вы просмотрели с помощью расширения стили, примененные к ссылке и всем элементам, которые отображаются на экране в том же месте, и тоже не нашли никаких косяков.

Если вы не сделали чего-то из вышеперечисленного, делайте (хотя по пункту 2 сейчас пройдемся подробнее).

3. Переберите элементы, которые выводятся в нужном месте экрана (ссылка, изображение и все сопутствующие элементы) и найдите во вкладке “макет” firebug’а элемент с ненулевым border’ом. Если такой есть, перепроверьте еще раз стили, которые к нему применены.

4. Если такого элемента не нашли, проверьте соседние элементы – может туда попало что-то лишнее.

5. Возможно, дело не в border’е, а есть какой-нибудь внешний элемент с отступом и фоном, который создает эффект рамки.

5. Если ничего умного в голову больше не приходит (а пока не приходит), попробуйте использовать сброс стилей в начале css-файла (что-то типа http://meyerweb.com/eric/tools/css/reset/) – возможно браузер цепляет что-то свое.

Пока ничего больше не придумал :(

By: Екатерина

Екатерина — Wed, 16 Mar 2011 14:18:49 +0000

за расширение спасибо огромное))))удобно! но вот с рамкой болт :( не выходит…

By: Kitich

Kitich — Wed, 16 Mar 2011 13:35:08 +0000

Просто сложно вылавливать подобные глюки, не видя всего кода – они могут возникать из-за других стилей или элементов кода, которые не видит никто кроме вас :)

Попробуйте добавить border: none !important; не только к изображению, но и к ссылке, и ко всем элементам между ними, если такие есть. Также попробуйте добавить outline: 0; – этот параметр отвечает за “обводку” ссылок при нажатии на них.

И самый главный совет: скачайте для своего firefox (вот за что я люблю этот браузер) расширение firebug (https://addons.mozilla.org/en-us/firefox/addon/firebug/). Я сам всегда использую его для вылавливания ошибок верстки. Оно добавит внизу окна кнопочку и позволит проанализировать любые элементы страницы и стили, которые к ним применяются. Просмотрите стили вашей ссылки и внешних/внутренних по отношению к ней элементов – скорее всего, увидите, откуда берется лишняя рамка.

By: Екатерина

Екатерина — Wed, 16 Mar 2011 13:17:56 +0000

Да, о нем, но я пока тренируюсь на локалхосте, поэтому там ничего нет:) работаю в мазиле. Так что делать-то?

By: Kitich

Kitich — Wed, 16 Mar 2011 13:07:34 +0000

Речь идет о “моем книжном”? В каком браузере возникают рамка и значок?
Ил на хостинг залита версия без “артефакта”?

By: Екатерина

Екатерина — Wed, 16 Mar 2011 12:42:28 +0000

так я в классе для хедера и ссылки хедера поставила значение border: none

div.art-Header-logo
{
position: absolute;
margin: 1px 445 93 13px;
z-index: 2;
}

div.art-Header-logo img
{
border: none !important;
margin: 0px;
}

div.art-Header-logo a img
{
border: none !important;
margin: 0px;
}

или не здесь? или вообще везде, что касаемо тега “а”?