Перейти к публикации
View in the app

A better way to browse. Learn more.

Дизайн и модификация Invision Community

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Как заменить обычную шапку на CSS код?

Опубликовано:

Здравствуйте, извините за то что не нашёл решение этой проблемы на форуме.

 

Вобщем у меня вопрос: Как заменить обычную шапку на CSS код?

 

Допустим у меня есть код:

 

<style>

li a{

display: block;

width: 1902px;

height: 181px;

background: url(//s7.hostingkartinok.com/uploads/images/2014/05/10833f88e00cc684027913cc79c50fba.png) no-repeat;

white-space: nowrap;

text-indent: 100%;

}

li:hover a{

background-image: url(//s7.hostingkartinok.com/uploads/images/2014/05/af0c10cbe9083bf4bb122ec753bb87dc.png)

}

</style>

<ul>

<li>

<a href="#">Игровое сообщество Free Alliance</a>

</li>

</ul>

 

Возможно ли как то поставить его вместо обычной шапки?

 

Буду очень признателен.

Рекомендованные сообщения

Опубликовано:

Что мешает css код прикрепить к обычной шапки? Стандартный лого сверстан по определенным правилам, вы уверены что что ваш код не разъедется в шапке?

Стандартная шапка находится в шаблоне Глобальные -> defaultHeader

А сам блок шапки в Глобальные -> globalTemplate: div#logo

Опубликовано:
  • Автор

Что мешает css код прикрепить к обычной шапки? Стандартный лого сверстан по определенным правилам, вы уверены что что ваш код не разъедется в шапке?

Стандартная шапка находится в шаблоне Глобальные -> defaultHeader

А сам блок шапки в Глобальные -> globalTemplate: div#logo

 

Дело в том что, когда я прикрепляю css код изображение буквально умножается.

Возможно ли как то убрать эту проблему?

 

http://s7.hostingkartinok.com/uploads/images/2014/05/5c96d9f04153abb36262d211f4d81396.png

Опубликовано:

Умножается, потому что у селекторах нет никаких идентификаторов, или классов к кому бы они конкретно относились, поэтому выбираются все элементы li на странице. Нужно указать кому конкретно применять данные правила

#logo li a{

и

#logo li:hover a

Опубликовано:
  • Автор

Умножается, потому что у селекторах нет никаких идентификаторов, или классов к кому бы они конкретно относились, поэтому выбираются все элементы li на странице. Нужно указать кому конкретно применять данные правила

#logo li a{

и

#logo li:hover a

 

Извините, я плохо разбираюсь в css, Вы не могли бы указать куда подставлять индификатор?

 

 <a href='{$this->settings['board_url']}' title='{$this->lang->words['go_home']}' rel="home" accesskey='1'><img src='{parse replacement="logo_img"}' alt='{$this->lang->words['logo']}' /></a>
<style>
   li a{
       display: block;
       width: 1902px;
       height: 181px;
       background: url(http://s7.hostingkartinok.com/uploads/images/2014/05/10833f88e00cc684027913cc79c50fba.png) no-repeat;
       white-space: nowrap;
       text-indent: 100%;
   }
   li:hover a{
       background-image: url(http://s7.hostingkartinok.com/uploads/images/2014/05/af0c10cbe9083bf4bb122ec753bb87dc.png)
   }
</style>
<ul>
   <li>
       <a href="#">Игровое сообщество Free Alliance</a>
   </li>
</ul> 

Опубликовано:

Дык, я же указал, нужно только немного смекалки.

 

   #logo li a{
     ...
   }
   #logo li:hover a{
     ...
   }

Опубликовано:
  • Автор

Дык, я же указал, нужно только немного смекалки.

 

   #logo li a{
     ...
   }
   #logo li:hover a{
     ...
   }

 

Большое спасибо!

Проблема заключалась в том, что:

 

Название файла было не "logo", а "logo_img"

 

Ещё раз спасибо, желаю удачи!

Опубликовано:

По моему вы либо суть, либо проблему перепутали. О каком "название файла" идет речь?.. Название бэкграунд файла к css селекторам не имеет никакого отношения. В худшем случае изображение просто бы не отобразилось.

Создайте аккаунт или войдите в него для комментирования

Сейчас на странице 0

  • Нет пользователей, просматривающих эту страницу.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.