Здравствуйте, подскажите пожалуйста, возможно-ли разместить, информацию в виде картинки, в определенном месте header'а? Картинку с пояснением прилагаю.
тема · 3 694 просмотра · 14 ответов
Размещение информационного блока в виде картинки, в header'е
Дизайн, оформление и шаблоны
Учите бутсрап. Там ведь совсем для школьников!!!
Вот так должен выглядеть header
Вот так должен выглядеть header
code
<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 иконки и номер телефона находятся на одной картинке
3 иконки и номер телефона находятся на одной картинке
видимо никак, пока не измените изображение или не пересмотрите концепцию шапки.
1. Изображение тупо не помещается, даже при полном помещении влево.
И уберите пока в подвале, что вы студия итд.. не солидно как то. Студии такие вопросы "детского" html, должны решать еще в зародыше...т.к это основы...
1. Изображение тупо не помещается, даже при полном помещении влево.
И уберите пока в подвале, что вы студия итд.. не солидно как то. Студии такие вопросы "детского" html, должны решать еще в зародыше...т.к это основы...
Я только учусь ) Все когда-то с чего-то начинали. Думал в размере изображения причина. Делал ширину в 2 раза меньше, а оно все равно вправо смещенным получается...
не видно что уменьшили. Давайте сделаем так.
Попробуйте изменить <div class="col-sm-4"> на <div class="col-sm-2"> это для лого
Далее col-sm-8 на col-sm-10
А для вашего изображения добавьте класс img-responsive
т.е должно получится как то так
Попробуйте изменить <div class="col-sm-4"> на <div class="col-sm-2"> это для лого
Далее col-sm-8 на col-sm-10
А для вашего изображения добавьте класс img-responsive
т.е должно получится как то так
code
<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>
Во, классно! Теперь всё получилось как надо. Спасибо огромное!
Точно, исправил, спасибо.
Я бы сделал так:
т.к. сейчас на мобильном экране оно выглядит так:
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>т.к. сейчас на мобильном экране оно выглядит так:
Чтобы ответить, войдите или зарегистрируйтесь.