Question

1. Как вставить логотип в шапку, чтобы название сместилось вправо от него без переноса строки?

2. Как вставить логотип по центру шапки, чтобы все надписи отсались на месте?

 

Answer 1

Попробуйте в таблицу стилей CSS прописать следующие стили:

.site-n:before {width: 80px;height: 60px;margin-left: -80px;margin-top: -10px;content:"";background: url(/logo.png)no-repeat;position: absolute;}

Comments

А как сделать, чтобы логотип был ссылкой на главную страницу?

---

12 1000,

Чтобы было кликабельно, тогда код в шапке сайта:

<span class="site-n"></span>

заменить на подобный:

<a href="ссылка" style="font-size: 20px; text-decoration: none"><span class="site-n"></span></a>

и да, в стилях выше заменить margin-top: -10px; на margin-top: -32px;

---

Yuri_Geruk,

Так изменяется шрифт заголовка и его не получается настроить.

---

где и как изменяется шрифт? я вижу нормально

---

webanet,

Шрифт крупнее не делается.

Вот исходный код:

<header>
 <div id="header">
 <div class="wrapper clearfix">
 <div id="site-logo">
<span class="site-l">
<a href="ссылка"><span class="site-n"><a href="$HOME_PAGE_LINK$" style="font-size: 20px; text-decoration: none">$SITE_NAME$</a></span></a></span></div>
 <nav>
 <div id="catmenu" class="clearfix">
 <!-- <sblock_nmenu> -->
<?if($NMENU_1$)?><!-- <bc> -->$NMENU_1$<!-- </bc> --><?endif?>
<!-- </sblock_nmenu> -->
 </div>
 </nav>
 </div>
 </div>
</header>

___________________

Как вы вставили - (<a href="ссылка" style="font-size: 20px; text-decoration: none"><span class="site-n"></span></a>), что у вас получилось?

---

12 1000,

Выделил красным в вашем коде как нужно сделать.

---

Yuri_Geruk,

Посмотрите сейчас с вашим изменённым кодом меняется шрифт и надпись уходит немного вверх.

---

12 1000,

Замените код:

<a href="$HOME_PAGE_LINK$" style="font-size: 20px; text-decoration: none">$SITE_NAME$</a>

на:

<a href="$HOME_PAGE_LINK$" style="font-size: 20px;text-decoration: none;position: relative;top: 3px;">$SITE_NAME$</a>

---

Yuri_Geruk,

Заменил. Ничего не изменилось.

---

12 1000,

Кеш в браузере не очистили потому и не изменилось.

---

12 1000,

Очистил кэш. Вот такой код получается:

<header>
 <div id="header">
 <div class="wrapper clearfix">
 <div id="site-logo">
<span class="site-l">
<a href="$HOME_PAGE_LINK$"><span class="site-n"><a href="$HOME_PAGE_LINK$" style="font-size: 20px;text-decoration: none;position: relative;top: 3px;">$SITE_NAME$</a></span></a></span></div>
 <nav>
 <div id="catmenu" class="clearfix">
 <!-- <sblock_nmenu> -->
<?if($NMENU_1$)?><!-- <bc> -->$NMENU_1$<!-- </bc> --><?endif?>
<!-- </sblock_nmenu> -->
 </div>
 </nav>
 </div>
 </div>
</header>

---

12 1000,

вы ранее писали:

• > Посмотрите сейчас с вашим изменённым кодом меняется шрифт и надпись уходит немного вверх.
• >> После моих рекомендаций текст не уходит вверх, он стоит ровно по центру не ниже и не выше, вы сами можете еще отрегулировать регулируя цифровое значение в параметре top:3px;

---

Yuri_Geruk,

Скажите, пожалуйста, можно ли сделать, чтобы текст не переносился при увеличении шрифта, чтобы он хотя бы до половины шапки доходил?

---

12 1000,

Можно. В стилях найдите строку номер 29:

#catmenu{float:right; width:69%; text-align:right; padding:12px 0 0}

замените 69 на 59. Далее найдите в стилях строку номер 25:

#site-logo{float:left; max-width:30%}

замените 30 на 40. И в строке 639:

.site-n:before {width: 80px;height: 60px;margin-left: 475px;margin-top: -32px;content:"";background: url(/logo.png)no-repeat;position: absolute;}

замените 32 на 40

---

Yuri_Geruk,

Здорово. Благодарю вас.