Блок социальных сетей для сайта

Создавая сайт, вебмастер хочет привлечь побольше посетителей. Сайты бывают разные, есть сервисы рисования и конвертации музыки, есть блоги и просто информационный статьи. Пользователю, попавшему на любой сайт, может показаться интересной информация, представленная на страничке. Желание поделить с друзьями, которые обычно находятся в социальных сетях, может появиться. В таких случаях очень рекомендовано иметь на страницах сайта всякие кнопки, нажимая на которые человек сможет запостить сайт своим друзьям и коллегам.

Любую кнопку каждой социальной сети может сделать вам программист. Для этого на сайтах социальных сетей есть раздер "Разработчику" и похожие названия. С помощью предоставленных API, программист может выбрать какую кнопку показывать, что отображать рядом с ней, показывать ли количесво лайков/репостов и т.д. Так же можно сделать собственный дизайн кнопок соц. сетей, при этом нажимание на кнопку может либо открыать новую вкладку для возможности поделиться или же прямо на сайте может появляться всплывающее окно с необходимой функциональностью. Сделать последнее намного труднее и будет стоить дорого.

Читать полностью

Иконка сайта. В чем отличие формата ICO и PNG?

О favicon  стало известно уже давно. Сайт выглядит лучше в окне браузера, если у него есть иконка, которая отображается первой на вкладке, далее идет описание сайта title.

С самого начала задумали использовать специальный формат изображения ICO, размер картинки которого составляет 16 х 16 пикселей. Для того чтобы прописать в HTML коде, что иконка для сайта есть применяется специальный код, который я приведу ниже. К тому же следует отметить, что инициализация favicon  и сейчас, в конце 2019 года прекрасно поддерживается всеми браузерами. Не смотря на поддержку ico технология считается устаревшей. Вот код, который инициализирует технологию favicon  посредством файта *. ico:

Читать полностью

Как разместить вложенный div у div по центру

При вёрстке страницы изначально всё расчитано на выравнивание по левому краю. Очень много сайтов, документов именно так и работают. Но с появлением мобильных устройств левое выравнивание выглядит нелепо. Это когда экран и так маленький, а картинки и текст все сбоку. Не смотря на наличие этой проблеммы, такие фреймворки как bootstrap не сделали ничего в пользу автоматического размещения по центру.

Для исполнения протокола "Mobile First" поисковой компании Google, нужно знать, как размещать элементы по центру. Устаревший метод размещения элементов по центру - это использование таблиц. Таблицы позволяют центровать элемент как по горизонтали, так и по вертикали. Анализ исходного кода показал, что даже совремённая програма для создания HTML5 анимации Hippani Animator использует таблицы для элементов анимации, там почти все элементы сидят в своей таблицы.

Читать полностью

Базовий шаблон HTML

Якось мені знадобилось створити швидко 1 сторінку - сайт. Для того щоб не копіювати, я знайшов в англійському гуглі шаблон HTML5, який і використав для створення сторінки. Перевага HTML5 від HTML в тому, що треба писати менше директив і не вказувати уже не потрібні речі. Отже .... ось шалон:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>The HTML5 Salomoon</title>
  <meta name="description" content="The HTML5 Salomoon">
  <meta name="author" content="Salomoon">
  <link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>

  <script src="js/scripts.js"></script>
</body>
</html>

Розглянемо тепер основні відмінності HTML5 від HTML

Читать полностью

input checkbox – пример кода и что возвращает в РНР

Если флажок установлен, то возвращается то, что установлено в value, в примере ниже это единица в строке - '1'.

Если флажок не установлен, то возвращается пустая строка ''

Читать полностью

Как разместить картинку по центру блока

Ниже предоставлен код для центрирования картинки внутри блока DIV. Данный код очень интересен для тех, кто разрабатывает универсальный шаблон на бутстрап (bootstrap):

<div class="dp-highlighter">
<ol class="dp-c" start="1">
<li class="alt">
<div><span class="keyword">class</span>=<span class="string">"holdImg "</span>></div>
</li>
<li class="alt"><a class="string" href="<span">"http://7.poltava.ua/_/images/fullscreen/river01.jpg"</a><a class="string" href="<span"> > </a></li>
</ol>
<ul>
<li class=""><figure><img class="string" src="<span"></figure>"http://7.poltava.ua/_/images/river01.jpg" width=<span class="string">"160"</span> height=<span class="string">"120"</span> /></li>
</ul>
<ol class="dp-c" start="1">
<li class="alt"> </li>
<li class=""> </li>
</ol>
</div>

А вот и стили:

  1. .holdImg {
  2. display: block;
  3. height: 124px;
  4. margin-left: auto;
  5. margin-right: auto;
  6. width: 164px;
  7. }

Читать полностью

Вертикальные столбцы, аналог таблиц

clear both в конце обязательно. Все тянется. Ширина столбцов обязательна. Сумма ширин столбцов не должно превышать ширину контейнера, а еще лучше сделайте меньше на 5 пикселей - для браузеров дяди Билла.

HTML:

Читать полностью

Почему иногда не работает margin-top?

Столкнувшись 2 раза с подобным фокусом решил разобраться. Все оказалось просто. Дело в том что у вашего контейнера вероятно фиксированная высота, а внутренний контейнер, для которого вы прописываете не работающий margin-top, превышает высоту родительского. Выход: прописать для родителя overflow: auto;

Если даже это не решит ваш вопрос, то направит на мысли. У меня начала появляться горизонтальная прокрутка, увеличил высоту родителя, указал фон не повторять и все.

Читать полностью