Как вставить картинку в шапку сайта html: Как вставить картинку в шапку сайта? – Вопросы Timeweb Community

Размещение картинок в шапке сайта — Вопрос от Юрий Маков #3

• Вопросы
• Горячие
• Пользователи
• Вход/Регистрация

>

Категории вопросов

Задать вопрос +

Основное

• Вопросы новичков (16691)
• Платные услуги (2168)
• Вопросы по uKit (83)

Контент-модули

• Интернет-магазин (1448)
• Редактор страниц (237)
• Новости сайта (501)
• Каталоги (809)
• Блог (дневник) (115)
• Объявления (296)
• Фотоальбомы (434)
• Видео (258)
• Тесты (60)
• Форум (581)

Продвижение сайта

• Монетизация сайта (222)
• Раскрутка сайта (2465)

Управление сайтом

• Работа с аккаунтом (5367)
• Поиск по сайту (428)
• Меню сайта (1768)
• Домен для сайта (1549)
• Дизайн сайта (13523)
• Безопасность сайта (1493)
• Доп. функции (1312)

Доп. модули

• SEO-модуль (226)
• Опросы (63)
• Гостевая книга (99)
• Пользователи (434)
• Почтовые формы (321)
• Статистика сайта (198)
• Соц. постинг (214)
• Мини-чат (91)

Вебмастеру

• JavaScript и пр. (645)
• PHP и API на uCoz (236)
• SMS сервисы (10)
• Вопросы по Narod. ru (435)
• Софт для вебмастера (39)

…

Как сделать кликабельной фоновую картинку в шапке сайта, или всю шапку (header) сайта в вордпресс

Вчера пришел вопрос – как сделать шапку, он же header, кликабельным. Не добавить какую-то еще картинку, как здесь, а сделать кликабельной уже существующую фоновую картинку, ссылка на которую подгружается, например, из БД, а не прописана напрямую. Чтобы при клике на нее пользователь попадал на главную страницу. Я, откровенно говоря, даже удивился – поскольку не подозревал, что существуют темы, которые нарисованы как-то по другому, и что клик по шапке никак не адресуется. В принципе, известно, что в шапке можно выводить название сайта, которое по сути, представляет собою линк на home page – но вот если его нет, и при отсутствии кликабельности header – а – это проблема.

Но к счастью, она достаточно легко решается, правкой всего одной строчки.

Сначала необходимо отдельно отметить, что “кликабельность” — это функционал. Поэтому все мечты сделать это через правку style.css – стоит сразу оставить. CSS у нас отвечает исключительно за “внешний вид”. Поэтому, с помощью CSS сделать ничего кликабельным никак нельзя, а вот с помощью HTML, или javascript, вписав одну маленькую строчечку в header.php — пожалуйста.

Сначала надо определить, какой div у нас отвечает за шапку. Проще всего сделать это в Опере, щелкнув правой кнопкой мышки на шапке, и выбрав в выпавшем меню строчку “Проинспектировать элемент”.

Видим, что за вывод header-а у нас отвечает div с классом container_12.

У вас может быть и другой, а может и вообще не быть – тогда правки надо будет вносить в строчку с div id=”header”. В принципе, не суть важно.

Итак – нам надо решить три задачи – во-первых, чтобы при наведении на шапку курсор принимал вид руки, во-вторых – чтобы осуществлялся переход на главную страницу, а в третьих – чтобы при наведении на хидер отражалось название сайта, или то, что щелчок ведет на главную страницу. Как я уже говорил, решаются они элементарно редактированием header.php. Открываем его в Notepad++ (а можно – прямо в админке – во внешний вид-редактор, там выбираете Заголовок(header.php)), ближе к низу ищем строку

<div>

<div>

и меняем ее на

<div title=»site.ru»>

<div title=»site.ru»>

Где site.ru – используем URL домашней страницы вашего сайта.

Соответственно, style=”cursor: pointer; cursor: hand;” делает курсор в виде руки в кросс-браузерно, а onclick=”self.location = ‘http://site.ru’” – выводит главную страницу при клике на этот блок, title=”site.ru” – отвечает за вывод надписи при наведении курсора, можно написать Home Page, можно – название сайта. Если пишем название на русском – не забываем перед тем, как писать по-русски – в нотепеде в меню “Кодировки” поставить галочку в “Кодировать в UTF-8 (без BOM)”, иначе выводится будет абракадабра и крякозябры.

Соответственно, если за хидер отвечает только

<div>

<div>

то меняем уже его на

<div title=»site.ru»>

<div title=»site.ru»>

Также здесь необходимо очень внимательно отнестись к тому, какие кавычки, и открывающие-закрывающие скобки-уголки используются. Вордпресс их переделывает по-своему – и поэтому необходимо брать строчки именно из выделенных блоков с прокруткой, а не просто из текста.

Понятно, что вариантов переадресации может быть еще более 100500 – и ссылку делать типа простого слэша, или index.php?id=home (в случае, если чпу не используется, и .htaccess не переписывается), и self.location делать с href, и т.д.

Но приведенный вариант, как мне кажется – самый надежный.

Вообще, в некоторых случаях правильнее делать кликабельной не всю шапку, а дополнительно в шапку вывешивать логотип, делая кликабельным только его – вот тогда надо вносить изменения и в css, и править header.php. Сделать это тоже несложно – хорошо описано здесь. Только отмечу, что если шапка уже является кликабельной – то тут, действительно, уже можно просто обойтись правкой css – добавляем туда наш логотип, внося в style.css в блоке #header .home строчки типа

background: url(‘http://site.ru/wp-content/themes/ink-stain/images/logo_hc.png’) no-repeat scroll 0 0 transparent; background-position: 25% 80px;

background: url(‘http://site.ru/wp-content/themes/ink-stain/images/logo_hc.png’) no-repeat scroll 0 0 transparent; background-position: 25% 80px;

И вуаля.

1

Твитнуть

Category: Сайт  Tags: WordPress, программирование, Сайт, сделать кликабельной картинку, сделать кликабельной шапку

Список в шапке + изображение.

(HTML, CSS)

спросил 1 год, 6 месяцев назад

Изменено 1 год, 6 месяцев назад

Просмотрено 587 раз

Я сталкиваюсь с трудностями при реализации заголовка со списком и небольшим логотипом в правом верхнем углу страницы (объединенным со строками заголовка) (ссылка на первое изображение — это то, что я хочу сделать, второе — это место, где я застрял ).

• HTML
• CSS

4

Это должно работать:

с отступами и поплавками вы можете выровнять элементы в заголовке.

 /* Стиль заголовка с серым фоном и некоторыми отступами */
            .заголовок {
              переполнение: скрыто;
              цвет фона: серый;
              отступ: 10px 10px;
            }
            /* Стиль ссылок заголовка */
            . заголовок {
              плыть налево;
              черный цвет;
              выравнивание текста: по центру;
              отступ: 12px;
              текстовое оформление: нет;
              размер шрифта: 18px;
              высота строки: 25 пикселей;
              радиус границы: 4px;
            }
            /* Стиль ссылки с логотипом (обратите внимание, что мы устанавливаем одинаковые значения высоты строки и размера шрифта, чтобы заголовок не увеличивался при увеличении шрифта */
            .логотип заголовка {
              поплавок: справа;
              высота: 50px;;
            }
            /* Изменение цвета фона при наведении мыши */
            .header: наведите {
              цвет фона: #ddd;
              черный цвет;
            }
            /* Стиль активной/текущей ссылки*/
            .header а.актив {
              цвет фона: dodgerblue;
              белый цвет;
            }
            /* Переместить раздел ссылки влево */
            .header-левый {
              плыть налево;
            }
            /* Добавьте медиа-запросы для отзывчивости — когда ширина экрана 500 пикселей или меньше, размещайте ссылки друг над другом */
            Экран @media и (максимальная ширина: 500 пикселей) {
              . заголовок {
                поплавок: нет;
                дисплей: блок;
                выравнивание текста: по левому краю;
              }
              .header-левый {
                поплавок: нет;
              }
            } 

 <дел>
          <дел>
            Главная
            Контакт
            О нас