Question

Здравствуйте, подскажите пожалуйста как можно вставить картинку 500х100 в шапку сайта.
Весь день парился чет не что так и не получилось, разъезжается шаблон и все тут :(((
Хочется как на картинке:
http://idei-mira.do.am/Vopros.jpg
Код шапки:
<div class="part-l">
 <div id="site-logo">
 <span class="site-l">
 <span class="site-n"><a href="$HOME_PAGE_LINK$">$SITE_NAME$</a></span>
 </span>
 </div>
 </div>
 <div class="part-r">
 <div id="sch-box">
 <div class="search-box">
 $SEARCH_FORM$
 </div>
 </div>
 <div id="soc-box">
 <a href="http://vk.com/" class="soc-vk" target="_blank"></a>
 <a href="https://www.facebook.com/" class="soc-fc" target="_blank"></a>
 <a href="https://vimeo.com/" class="soc-vi" target="_blank"></a>
 <a href="https://twitter.com/" class="soc-tw" target="_blank"></a>
 <a href="http://www.flickr.com/" class="soc-fl" target="_blank"></a>
 </div>
 </div>
 <div class="clr"></div>
 <div id="catmenu">
 <!-- <sblock_nmenu> -->
<?if($NMENU_1$)?><!-- <bc> -->$NMENU_1$<!-- </bc> --><?endif?>
<!-- </sblock_nmenu> -->
 <span class="nav-rib rib-l"></span>
 <span class="nav-rib rib-r"></span>
 <div class="clr"></div>
 </div>

Answer 1

Как должно быть чтобы все работало, код верхней части сайта:

<div class="part-l">

     <div id="site-logo">

      <span class="site-l">

       <span class="site-n"><a href="$HOME_PAGE_LINK$">IDEI-MIRA</a></span>

      </span>

<div style="float:right;width:500px;"><img src="http://idei-mira.do.am/kartinki/500kh100-1.jpg" alt=""></div>

     </div>

   </div>

   <div class="part-r">

    <div id="sch-box">

          <div class="search-box">

            $SEARCH_FORM$

          </div>

    </div>

    <div id="soc-box">

     <a href="http://vk.com/" class="soc-vk" target="_blank"></a>

     <a href="https://www.facebook.com/" class="soc-fc" target="_blank"></a>

     <a href="https://vimeo.com/" class="soc-vi" target="_blank"></a>

     <a href="https://twitter.com/" class="soc-tw" target="_blank"></a>

     <a href="http://www.flickr.com/" class="soc-fl" target="_blank"></a>     

    </div>

   </div>

   <div class="clr"></div>

   <div id="catmenu">

   <!-- <sblock_nmenu> -->

<?if($NMENU_1$)?><!-- <bc> -->$NMENU_1$<!-- </bc> --><?endif?>

<!-- </sblock_nmenu> -->    

   <span class="nav-rib rib-l"></span>

   <span class="nav-rib rib-r"></span>

   <div class="clr"></div>

   </div>

   В таблицу стилей CSS добавить стили для нашего изображения:

#site-logo img {height:80px;margin: 10px auto;}

Вот и все. Результат работы

 

Comments

О..., все круто!!! Огромнейшее спасибо, за проделанную работу!!!
Только вот вопрос, я в CSS не чего не прописывал и все ровно все работает.

---

в CSS нужно прописать, для того чтобы лого корректно смотрелось

---

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

Answer 2

 

<div class="part-l">
<div id="site-logo">
<span class="site-l">
<span class="site-n"><a href="$HOME_PAGE_LINK$">$SITE_NAME$</a></span>
</span>

<div style="float:right; background:url('тут ссылка к картинке') no-repeat"></div>
</div>
</div>
<div class="part-r">
<div id="sch-box">
<div class="search-box">
$SEARCH_FORM$

Comments

Не работает (

---

А так...
<div style="float:right; background:url('тут ссылка к картинке') no-repeat; width:500px;"></div>

---

Не в первом не во втором случаи в обще не происходит не каких изменений, я даже не вижу самой картинки. Не сдвигов шаблона :( что то не то ... пальто ... :(

---

ещё раз вставьте, я посмотрю..
<div style="float:right; background:url('тут ссылка к картинке') no-repeat; width:500px;"></div>

---

Вставил.
<div style="float:right; background:url('http://idei-mira.do.am/kartinki/500kh100-1.gif') no-repeat; width:500px;"></div>

Смотрите
http://idei-mira.do.am/

---

Загрузите картинку в расширении .jpg

---

не каких изменений :( чет косяк в самом коде,