[РЕШЕНО] Как картинку вставить в header

[gle]

Подскажите, пож, как в шапку сайта вставить картинку с правой стороны, помимо логотопа?

[hurupachka]

<img src="catalog/view/theme/default/image/КАРТИНКА.РАСШИРЕНИЕ" />

[Benjamin]

в css

#header {

...

...

...

background: url('../image/header-bg.gif') no-repeat top center;

}

[smy]

в css

#header {
...
...
...
background: url('../image/header-bg.gif') no-repeat top center;
}

Вот это чудесно работает. Но вдруг стало нужно добавить еще одну картинку. Как это сделать? Через background две картинки не добавить, можно в фотошопе к логотипу прикрутить но это геморой, проще через css. Помогите пожалуйста, если кто знает.

[R1peR]

так а в чем проблема добавить картинку в header.tpl?

[smy]

так а в чем проблема добавить картинку в header.tpl?

Одну не проблема, две не получается, точнее получается, но все тогда плывет и фигня выходит.

[R1peR]

добавляйте через position:relative

[localhost]

А чё сложного то..... создай 2 блока и пихай чё хошь туда))))

Например...

HTML

<div class="tops">
<div class="tops1">
<?php if ($logo) { ?>
<div id="logo"><a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></a></div>
<?php } ?>
</div>
<div class="tops2"><img src="../image/tel.png" alt="" /></div>
</div>

CSS

.tops {height: 137px; width: 950px; display:table;}
.tops1 {float:left; display:block; width:500px;}
.tops2 {float:left; display:block; width:450px;}

Соответственно если картинку фоном нужно сделать - то = background: #009EDA url('../image/tel.png') top right no-repeat;

Надеюсь понятие height и width Вам понятны)))) не забудьте text-align:right; или left....

[smy]

Надеюсь понятие height и width Вам понятны)))) не забудьте text-align:right; или left....

Спасибо, CSS и HTML асилил. :-D

[vastrel]

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

мне нужно лишь добавить пару доп картинок к уже имеющимся.

подскажите, будет ли в таком виде работать?

<div class="tops">

<div class="tops1">
<a href="http://xxx/image1.png">
<img src="../image/image1.png" title="ЛЮБОЙ ТЕКСТ 1" alt="" /></a></div>

<div class="tops2">
<a href="http://xxx/image2.png">
<img src="../image/image2.png" title="ЛЮБОЙ ТЕКСТ 2" alt="" /></a></div>

</div>

это вставить в любое место catalog/view/theme/xxx/template/common/header.tpl ?

[vastrel]

спасибо!

 

вариант 2 - то что надо. буду пробовать завтра.

кстати, их можно делать несколько по отдельности? не надо в общий div "tops" "заворачивать"?

 

 

 

вряд ли будет работать, Вы применили относительные ссылки, их корректнее применять в стилях
а ссылка эта мне совсем не понятна:

<a href="http://xxx/image2.png">

это я не то написал, имел в виду ссылку на страницу.

[vastrel]

от себя добавлю для таких же непродвинутых как и я :)
в tpl файл надо вставлять в соответствующее место, а не абы куда (думал просто в конец впихнуть, чтобы потом изменения проще видеть было). скорее всего это сразу после <div id="header">

в css тоже надо вставлять в свое место, хотя, думаю, что не так критично.
по css - background что-то не хотел показывать картинку, поэтому путь к картинке я прописал в tpl. похоже, что прятал ее на задний план или что-то другое.

<div class="header-picture"><a href="http://xxxxx.html"><img src="../image/data/other/xxxxx.gif"></a></div> 

какую ссылку пропишешь в tpl - туда перейдет по клику на картинке.
css получился таким в итоге

#header .header-picture {position: absolute; top: AApx; left: BBpx; width: CCpx; height: DDpx; }

я так понял, что absolute проще - не слетает верстка. на мобилке показывает корректно.

[Tribunal]

 

вряд ли будет работать, Вы применили относительные ссылки, их корректнее применять в стилях

а ссылка эта мне совсем не понятна:

<a href="http://xxx/image2.png">

предложу 2 других варианта: 

1. адрес картинки в header.tpl :

а) грузим картинки в папку image в корне сайта

б) прописываем адрес в коде: 

<div class="tops1">
<a href="ССЫЛКА">
<img src="/image/image1.png" alt="ЛЮБОЙ ТЕКСТ 1"/></a></div>

2. картинки с использованием стилей: 

а) в header.tpl 

<div class="tops1"><a href="ССЫЛКА"></a></div>

б) в стили css:

 

 .tops1 {  
position: relative;
top: ОТСТУП СВЕРХУpx;
left: ОТСТУП Слеваpx;
background: url(../image/image2.png);
width: ШИРИНА КАРТИНКИpx;
height: ВЫСОТА КАРТИНКИpx;
}
 

Может не вовремя, но только сейчас столкнулся с этим вопросом, но ссылки не работают, картиник есть все красиво, но они не активны, можете посмотреть что не так?

[Tribunal]

Вопрос открыт.