Публикации с тегом "HTML"

Перенос плавающих HTML-блоков

Хочу рассказать вам о небольшой хитрости, которую я лично очень часто применяю. При верстке плавающими HTML-блоками (с использованием CSS-стиля float) иногда возникает необходимость принудительно "перенести" определенные блоки на новую строку в независимости от значения стиля float как самих, так и соседних блоков. Для этого может помочь специальный невидимый блок, сформированный следующим образом:
.clearer {
  clear: both;
  display: block;
  font-size: 0;
  line-height: 0;
}
<div class="clearer">&nbsp;</div>

Выравнивание таблицы по центру

Если таблицу поместить в блок с CSS-стилем

text-align: center

то желаемого эффекта не произойдет. Многие для выравнивания таблицы по центру используют тег center. Это не самое лучшее решение, так как данный тег является устаревшим.

Выровнять таблицу по центру можно, поместив ее в блок со следующим CSS-стилем:

<div style="margin: 0 auto">
  <table> ... </table>
</div>

Таким же образом можно отцентрировать и блок внутри блока.

Блок с закругленными углами на CSS3

Еще один полезный CSS-стиль третьей версии — border-radius, позволяющий закруглить углы у блока. Браузеры-лидеры последних версий поддерживают данный стиль, Internet Explorer потихоньку подтягивается и в 9 версии также научился закруглять углы.

Пример использования стиля border-radius:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Page</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
      .box {background: #F2F213; width: 400px; height: 200px;}
      .round-corners {border-radius: 20px;}
    </style>
  </head>
  <body>
    <div class="box round-corners"></div>
  </body> 
</html>

Создание блока с тенью на CSS3

Один из уроков на сайте был посвящен созданию блока с тенью. В нем предлагалось отрисовать и сверстать тень. С приходом CSS3 веб-дизайнеру стали доступны многие интересные стили, в частности, box-shadow, который позволяет создать тень для блока. В данный момент этот стиль поддерживается всеми современными популярными браузерами.

Пример использования стиля box-shadow:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Page</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
      .box {background: #F2F213; width: 400px; height: 200px;}
      .shadow {box-shadow: 5px 5px 10px #777;}
    </style>
  </head>
  <body>
    <div class="box shadow"></div>
  </body> 
</html>

Выравнивание изображения по центру в XHTML

Одним из наиболее простых способов выравнить изображение при применении блочной верстки — поместить его в блок с выравниванием по центру:

<div style="text-align: center">
  <img src="pan.jpg" width="400" height="120" alt="Панорама" />
</div>