Размещение информационного блока в виде картинки, в header'е

Здравствуйте, подскажите пожалуйста, возможно-ли разместить, информацию в виде картинки, в определенном месте header'а? Картинку с пояснением прилагаю.

 

Учите бутсрап. Там ведь совсем для школьников!!!
Вот так должен выглядеть header

Код:

<header>
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div id="logo">
          <?php if ($logo) { ?>
          <?php if ($class == "common-home") { ?>
          <img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" />
        <?php } else { ?>
        <a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
        <?php } ?>
          <?php } else { ?>
          <h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
          <?php } ?>
        </div>
      </div>
      <div class="col-sm-8">
          <div class="row">
              <div class="col-sm-8"><?php echo $search; ?> </div>
              <div class="col-sm-4"><?php echo $cart; ?></div>
          </div>
              <div class="row">
              <div class="col-sm-12">картинка или дополнительная информация </div>
          </div>
      </div>
    </div>
  </div>
</header>

 

Спасибо, попробую.

 

Все получилось. Добавил: <div class="col-sm-8"><img src="image/info-medi-kemerovo.png" alt="компрессионный трикотаж medi в городе Кемерово"></div>
Но, как всегда, есть вопрос. На планшете, вставленное изображение, отображается слишком большим размером. Можно с этим что-нибудь сделать?

 

читайте дальше бутстрап. Для планшетов вам видимо надо добавить col-xs-4

 

Подскажите пожалуйста, а как выровнять картинку чтобы ровно была между лого и блоком с корзиной и поиском? Уходит вправо. Поиск должен располагаться под корзиной. Как на картинке:



Код на данный момент выглядит таким образом:

HTML:

<header>
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div id="logo">
          <?php if ($logo) { ?>
          <a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
          <?php } else { ?>
          <h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
       
          <?php } ?>
       
        </div>
     
      </div>
   
     <div class="col-sm-8">
  
      <div class="row">
   
              <div class="col-sm-7 pull-left"><img src="/shapka.jpg" height="70"></div>
     
      <div class="col-sm-4 pull-right"><?php echo $cart; ?></div>
      </div>
  
      <div class="row">
      <div class="col-sm-4 pull-right"><?php echo $search; ?></div>
      </div>


      </div>
    </div>
  </div>
</header>

 

лучше ссылку на сайт дайте. так проще.

 

test.sqip.ru
3 иконки и номер телефона находятся на одной картинке

 

видимо никак, пока не измените изображение или не пересмотрите концепцию шапки.
1. Изображение тупо не помещается, даже при полном помещении влево.

И уберите пока в подвале, что вы студия итд.. не солидно как то. Студии такие вопросы "детского" html, должны решать еще в зародыше...т.к это основы...

 

Я только учусь ) Все когда-то с чего-то начинали. Думал в размере изображения причина. Делал ширину в 2 раза меньше, а оно все равно вправо смещенным получается...

 

не видно что уменьшили. Давайте сделаем так.
Попробуйте изменить <div class="col-sm-4"> на <div class="col-sm-2"> это для лого
Далее col-sm-8 на col-sm-10
А для вашего изображения добавьте класс img-responsive

т.е должно получится как то так

Код:

<div class="row">
      <div class="col-sm-2">
        <div id="logo">
                    <a href="http://test.sqip.ru/index.php?route=common/home"><img class="img-responsive" alt="Your Store" title="Your Store" src="http://test.sqip.ru/image/catalog/logo.png"></a>
                   
        </div>
       
      </div>
     
     <div class="col-sm-10">
    
      <div class="row">
     
              <div class="col-sm-8 pull-left"><img height="70" class="img-responsive " src="/shapka.jpg"></div>
       
      <div class="col-sm-4 pull-right"><div class="btn-group btn-block" id="cart">
  <button class="btn btn-inverse btn-block btn-lg dropdown-toggle" data-loading-text="Загрузка..." data-toggle="dropdown" type="button"><i class="fa fa-shopping-cart"></i> <span id="cart-total">Товаров 0 (0.00)</span></button>
  <ul class="dropdown-menu pull-right">
        <li>
      <p class="text-center">Ваша корзина пуста!</p>
    </li>
      </ul>
</div>
</div>
      </div>
    
      <div class="row">
      <div class="col-sm-4 pull-right"><div class="input-group" id="search">
  <input type="text" class="form-control input-lg" placeholder="Поиск" value="" name="search">
  <span class="input-group-btn">
    <button class="btn btn-default btn-lg" type="button"><i class="fa fa-search"></i></button>
  </span>
</div></div>
      </div>


      </div>
    </div>

 

Во, классно! Теперь всё получилось как надо. Спасибо огромное!

 

У Вас class="row" два раза повторяется, уберите один

PHP:

<header>
  <div class="container">
    <div class="row">
      <div class="row">

 

Точно, исправил, спасибо.

 

Я бы сделал так:

PHP:

<header>
   <div class="container">
     <div class="row">
       <div class="col-sm-2 col-xs-12">
         <div id="logo">
           <?php if ($logo) { ?>
             <a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
           <?php } else { ?>
             <h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
           <?php } ?>
         </div>
       </div>
     
       <div class="col-sm-6 col-xs-12"><img height="70" src="/shapka.jpg" class="img-responsive "></div>
     
       <div class="col-sm-4 col-xs-12 pull-right">
         <?php echo $cart; ?>
         <?php echo $search; ?>
       </div>
     </div>
   </div>
</header>


т.к. сейчас на мобильном экране оно выглядит так: