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

Тема в разделе "Дизайн, оформление и шаблоны", создана пользователем Глеб К, 8 июн 2015.

  1. Глеб К

    Глеб К Новичок

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

    medi-kemerovo.png
     
  2. Ален

    Ален Эксперт

    Сообщения:
    2.055
    Симпатии:
    634
    Учите бутсрап. Там ведь совсем для школьников!!!
    Вот так должен выглядеть 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>
     
    Zlata Jesen и Глеб К нравится это.
  3. Глеб К

    Глеб К Новичок

    Сообщения:
    7
    Симпатии:
    0
    Спасибо, попробую.
     
  4. Глеб К

    Глеб К Новичок

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

    Ален Эксперт

    Сообщения:
    2.055
    Симпатии:
    634
    читайте дальше бутстрап. Для планшетов вам видимо надо добавить col-xs-4
     
  6. Superman

    Superman Новичок

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

    [​IMG]

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

    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>
     
  7. Vlad

    Vlad Эксперт

    Сообщения:
    3.869
    Симпатии:
    936
    лучше ссылку на сайт дайте. так проще.
     
  8. Superman

    Superman Новичок

    Сообщения:
    16
    Симпатии:
    2
    test.sqip.ru
    3 иконки и номер телефона находятся на одной картинке
     
  9. Vlad

    Vlad Эксперт

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

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

    Superman Новичок

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

    Vlad Эксперт

    Сообщения:
    3.869
    Симпатии:
    936
    не видно что уменьшили. Давайте сделаем так.
    Попробуйте изменить <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>
     
    Superman нравится это.
  12. Superman

    Superman Новичок

    Сообщения:
    16
    Симпатии:
    2
    Во, классно! Теперь всё получилось как надо. Спасибо огромное!
     
  13. RoS

    RoS Специалист

    Сообщения:
    221
    Симпатии:
    216
    У Вас class="row" два раза повторяется, уберите один
    PHP:
    <header>
      <
    div class="container">
        <
    div class="row">
          <
    div class="row">
     
    Марина-КМВ и Superman нравится это.
  14. Superman

    Superman Новичок

    Сообщения:
    16
    Симпатии:
    2
    Точно, исправил, спасибо.
     
  15. RoS

    RoS Специалист

    Сообщения:
    221
    Симпатии:
    216
    Я бы сделал так:
    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>
    т.к. сейчас на мобильном экране оно выглядит так: Безымянный1.jpg
     
    Марина-КМВ и Romans нравится это.