Проблема опять появилась,делаю шапку сайта с адаптивной версткой,использую Bootstrap+Joomla.Похожая проблема у меня уже была,но тут другое.В общем сам хедер при масштабировании экрана,масштабируется вместе с браузером,то есть при сужении браузера не появляется нижней полосы прокрутки,но когда под этим хедером создаю модуль с картинкой,при сужении картинка не ужимается вместе с шапкой и появляется нижний скрол.Как решить эту проблему?Нужно чтобы картинка вместе с хедером сжималась и не появлялась полоса прокрутки.
(19-12-2014 19:17)Ox1de писал(а): [ -> ]Нужно чтобы картинка вместе с хедером сжималась и не появлялась полоса прокрутки.
Напомню, подобному вопросу уже было решение, чтобы картинка на сайте стала "резиновая", нужно к блоку с этой картинкой прописать стиль, например так:
Код:
.logo img {max-width: 100%;}
То есть, нужно задать максимальную ширину блока в процентах, а не в пикселях. Тогда эта картинка должна сжиматься вместе с окном сайта.
Ну в Css прописал max-width: 100%; не помогло.Так и остается что шапка сжимается а картинка остается и появляется полоса прокрутки.
<div class="row">
<div class="col-md-12 Promo">
<jdoc:include type="modules" name="Promo" style="xhtml" />
</div>
</div>
</div>
Вот код. Промо ,это модуль тип html,в него я и ставлю картинку,этот модуль как и хидер сайта находится в container-fluid,но хидер нормально сжимается,а этот модуль не хочет,я даже в него просто текст прописывал он не становится резиновым.Так что дело в модуле,как его сделать резиновым?
вот css к этому модулю
.Promo{
margin: 0 auto;
text-align: center;
width: 100%;
max-width: 100%;
Насколько я понимаю, здесь width: 100%; мешает выполнять max-width: 100%; . Это нужно убрать, или разделить, width: 100%; - может быть в стиле для всей страницы, а max-width: 100%; - для блока с картинкой.
Я могу полностью убрать css стили этого модуля,ничего не меняется.
Вот полный html код шапки и всего что там находится.
Мне кажется косяк где то в коде html
<div class="container-fluid">
<div class="row">
<div class="col-md-12 TopHeader">
<div class="visible-md.visible-lg">
<div class="row">
<div class="col-md-4 logo">
<?php if ($tmpl_logo) : ?>
<a href="/" ><img src="<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($tmpl_logo);?>" alt="MYLOGO"/></a>
<?php endif;?>
</div>
<div class="col-md-8">
<div class="nav Topmenu">
<jdoc:include type="modules" name="Topmenu" style="none" />
</div>
</div>
</div>
</div>
<div class="hidden-md.hidden-lg">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 Promo">
<jdoc:include type="modules" name="Promo" style="xhtml" />
</div>
</div>
</div>
Как видно мой модуль расположен в container-fluid вот он <div class="col-md-12 Promo"> вот хедер <div class="col-md-12 TopHeader"> они в одном контейнере но почему хедер резиновый,а этот модуль нет? вообще на данный момент bootstrap 3 версии и джумла тоже,во 2й версии такого небыло
(20-12-2014 13:58)Ox1de писал(а): [ -> ]Я могу полностью убрать css стили этого модуля,ничего не меняется.
Так нет, если полностью убрать CSS стили, то ничего и не будет меняться.
(20-12-2014 13:58)Ox1de писал(а): [ -> ]вообще на данный момент bootstrap 3 версии и джумла тоже,во 2й версии такого небыло
А вообще не понимаю я этот Bootstrap и зачем он нужен в то время когда существует много лучших инструментов для создания сайтов.