[РЕШЕНО] Как картинку всивить в 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]

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