Jump to content

Размещение плавающих блоков


ermoha
 Share

Recommended Posts

И вот мой вопрос: имеется блок плавающей ширины (%), в нем размещаются, блоки новинок (часто встречается на сайтах). Необходимо сделать, так, чтоб в зависимости от размера главного блока, добавлялись новинки. (если ширина главного блока недостаточна, то пропадали с экрана )

Какие есть возможные способы решения…….очень интересны варианты….

Link to comment
Share on other sites

Вы наверное имели ввиду:overflow:hidden......

Я "постил" эту тему, наверное для более полных ответов с вариантами.......

И я бы хотел видеть скорее всего, чтобы внутренний блок, который не помещается в главный блок, совсем не показывался на экране, а не обрезался....

Link to comment
Share on other sites

Непонятны некоторые критерии. Можно написать программу на JS, но чем она должна руководствоваться, что ширины блока достаточно или нет? Есть ведь еще перенос строк. Не помещается текст в ширину, строки переносятся и уже помещается. Так что надо сформулировать более точно критерии.

Link to comment
Share on other sites

Я предполагаю, что у внутреннего блока будет фиксированная ширина (текст, картинка будет размещаться тоже в этом фиксированном блоке).

Этот вопрос у меня возник при просмотре сайта http://webprofy.ru/ Единственное отличие, что мне не надо делать прокрутку....

Link to comment
Share on other sites

На указанном сайте не заметил что-либо экстраординарного. Куда смотреть?

И еще, надо определиться с терминологией. Плавающий блок - это блок, к которому добавляется свойство float. Фиксированная ширина - это ширина, обычно заданная в пикселах. Фиксированный блок - это блок у которого position: fixed.

Link to comment
Share on other sites

Всем привет.....я реализовал......если кому интересно, смотрите пример (http://www.light-heads.com/uploads/files/adaptive_blocks.rar)

Сейчас другая проблема, необходимо сделать скроллинг всего этого содержимого........ обратил внимание на следующий плагин (http://sorgalla.com/projects/jcarousel/) в принципе все просто.....но есть одно но........мне необходимо указывать количество отображаемых внутренних блоков.....в зависимости от разрешения экрана браузера (если 1024, то 3 внутренних блока, если 1600, то 10 и т.д )

Ознакомился с параметрами.... visible:8, scroll:8,- они позволяют указывать количество отображаемых блоков........

Вопрос, как реализовать мне такую задачу.....есть ли у кого наработки по моему вопросу.....Сразу оговорюсь, что в Javascript я не силен, только начал с ним разбираться......

Код вызова скроллинга:

<script type="text/javascript">

jQuery(document).ready(function() {

jQuery('#mycarousel').jcarousel({

visible:8,

scroll:8,

});

});

</script>

Вместо visible:8, scroll:8, мне необходимо подставить значение, которое определяется в завимости от разрешения экрана

Спасибо

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share

  • Обсуждения

    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy