Архив рубрики: Программирование

как работает float:left, почему блочные элементы переносятся на новую строку или как оставить элемент HTML на той же строке


блочные элементы в 1 строку через float: left
html код страницы
CSS код страницы
  1. Элемент должен являться блочным чтобы это работало, т.е. когда применено свойство float: left элемент переводится браузером в блочный (display: block)
  2. Блочные элементы по-умолчанию начинаются с новой строки. Не достаточно просто сделать элемент блочным, чтобы оставить его на той же строке.
  3. Чтобы блочный элемент оставался на той же строке нужно задать предыдущему перед ним элементу CSS стиль float: left .
  4. У родителя обоих элементов (их контейнера) должна быть задана ширина width в процентах, пикселях или чем-то еще.
  5. Эта ширина не должна быть меньше ширины обоих объектов внутри контейнера, включая их margin, padding, border.
Continue reading “как работает float:left, почему блочные элементы переносятся на новую строку или как оставить элемент HTML на той же строке” »

Добавление хлебных крошек в Битрикс

<?$APPLICATION->IncludeComponent(
    «bitrix:breadcrumb»,
    «breadcrumb»,
    array(
        «COMPOSITE_FRAME_MODE» => «A»,
        «COMPOSITE_FRAME_TYPE» => «AUTO»,
        «PATH» => «»,
        «SITE_ID» => «s2»,
        «START_FROM» => «1»,
        «COMPONENT_TEMPLATE» => «breadcrumb»
    ),
    false
);?>

резиновая верстка на col-xx-xx Bootstrap 3

шаг этой разметки довольно большой что начинает сразу видеться на больших и маленьких экранах
к примеру фото каталога 100px на 100px задать для всех экранов col-md-2 col-xs-2… это значит что на средних экранах смотреться будет хорошо, на больших более 20′ будет разъезжаться в разные стороны а на совсем маленьких — телефонах текст описания из соседней col-xs-10 будет наезжать на фото
выход — свой стиль и прописать размеры используя свою медиа разметку
    @include BootstrapGridBreakpoint(xs) {
      height: auto;
      left:   0px;
        }
    @include BootstrapGridBreakpoint(sm) {
      height: auto;
      left:   0px;
    }

Включение фоновой отладки в браузерах Chrome

chrome://flags/

silent-debug-google-chrome

 

 

 

 

 

 

во вкладке найти Фоновый режим откладки :

silent-debug-google-chrome1

Фоновый режим отладки Mac, Windows, Linux, Chrome OS

Не показывать информационную панель, когда расширение связано со страницей с помощью API chrome debugger. Установка этого флажка позволяет выполнять отладку фоновых страниц расширений.
Включить

Ну и напоследок: «А зачем мне это нужно?»  — чтобы отключить сообщение «Включен режим отладки NetBeans при отладке веб-страниц в NetBeans

 

 

сдвиги блоков, div, кнопок, картинок и т.п. CSS, Bootstrap

чтобы объект «съехал» нужно применить к нему стиль float:

со значением:

  • left;     — влево
  • right;  — вправо

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

в Bootstrap это организовано добавлением класса уже содержащего этот стиль:

xx — число от 1 до 12 ширина сдвига, равная ширине колонки такого же формата. Эта ширина задается в процентах и ее можно увидеть в boostrap.css файле

отличия всех -sm-, -xs-,-md- классов в том, что у Boostrap есть 3 основных вида разрешения экрана контролируемых через


<span class="p">@media (</span><span class="n">max-width</span><span class="o">:</span> <span class="o">@</span><span class="n">screen-xs-max</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}
</span>
внутри boostrap.css таблицы стилей. Итак, классы для:

для сдвига вправо:

  • col-sm-push-xx
  • col-xs-push-xx
  • col-md-push-xx

для сдвига влево:

  • col-sm-pull-xx
  • col-xs-pull-xx
  • col-md-pull-xx

чтобы сдвинуть колонки ВЛЕВО за счет увеличения свойства CSS margin-left (левого промежутка или поля между колонками) нужно использовать эти классы CSS из комплекта Boostrap:

только для сдвига влево:

  • col-sm-offset-xx
  • col-xs-offset-xx
  • col-md-offset-xx

 

Перенос по словам CSS, HTML

если часть содержимого контейнера скрывается, есть замечательное CSS свойство и его значение:

CSS код:
word-wrap: break-word;

оно делает так, чтобы текст переносился по словам на другую строку, а не прятался за границами контейнера (кнопки, div…)

Boostrap — картинка в круге (кружочке)

есть такой стиль в Boostrap

.img-circle {
border-radius: 50%;
}

если в class тега img, например, через пробел добавить img-circle  будет картинка в круглой рамке — не надо писать в свою таблицу стилей такой тег — он стандартный для Boostrap

MS SQL конвертация (преобразование) строки в число

чтобы сконвертировать или преобразовать строку MS SQL в число (для последующего анализа по условию на больше, меньше, равно…) нужно использовать команду CAST и выразить как INT — целое число

CAST('12' AS INT)