Div A перед Div B

Вопрос:

На данный момент у меня div B перед div A в разметкеHTML, и он имеет свойство float. Необходимо визуально оставить все так же, но поменять местами div A и div B в HTML коде.

До тех пор пока блок B и блок A имеют фиксированную ширину, и их общая ширина меньше или равна ширине родительского блока, не имеет значения какой из них первый объявлен в коде HTML!

Также следует помнить что если блоки A и B имеют свойство float то они должны иметь фиксированный размер, в обратном случае не работает.

Позиционирование элементов внизу блока

Вопрос:

Как можно разместить что-либо внизу блока используя или нет позиционирование, и так чтобы это выглядело одинаково во всех браузерах.

Когда вы задаете relative для элемента, это ограничивает область абсолютного позиционирования для всех его дочерних элементов. Это одна и з любимых техник в CSS дизайне.

 <div id="parent">
 Lorem ipsum....       
<p id="child">*Just a little footnote</p>
 </div>

#parent {     
position: relative;     
padding-bottom: 20px;  
}  

#child {     
position: absolute;     
bottom: 0;     
right: 0;  
}

Небольшое дополнение, сочетание bottom/right требует применения hasLayout для IE 6.

Расположение блоков вопреки порядку в коде

Вопрос:

Блоки top, middle, bottom. Как расположить Top в коде ниже блока content.

Я так понимаю задача состоит в том, что header сайта должен в коде быть расположен после основного содержимого, но при этом в браузере все должно выглядеть как положено. Сила CSS как отчасти заключается в том что наш дизайн не обязан быть привязан к порядку в разметке как это происходит с табличными макетами. Вот например как я бы решил эту задачу:

<div id="page-wrap"> 
      <div id="main-content"></div> 
      <div id="header"></div>
</div>

#page-wrap { 

padding-top: 100px; 
position: relative; 

}  

#header { 

position: absolute; 
top: 0; 
left: 0; 
width: 100%; 

}

Теоретически, это дает некоторое преимущетво для SEO, особенно если мольшое количество информации в header сдвигает более важную информацию в теле страницы вниз. See an example of this, where I talk about putting excessive navigation below the content.

Центрирование "резиновой" области

Вопрос:

Как добиться центрирования резинового блока внутри блока 100% ширины.

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

div {      margin: 0 auto;  }

Layout

Вопрос:

Для чего следует применять для элементов zoom: 1; в условных комментариях для IE.

Если кто-то еще не слушал об этом, применяя zoom: 1; для элементов позволяет установить для них свойство hasLayout в браузерах IE. Это помогает исправить некоторое количество багов в IE.

Выравнивание элементов Label и Input

Вопрос:

Подскажите нормальное решение выравнивания элементов “label-input” с помощью CSS.

Элементв label и input (все их типы) это элементы типа inline, однако, если сделать их типом блок или добавить свойство float, то можно избежать многих проблем и значительно упростить разметку, но тут уже могут возникнуть проблеммы с кросс-браузерностью. Обычно я в таких случаях всже оставляю эти элементы как inline и применяю к ним vertical-align: middle; , но дополнительно заключаю каждую пару label/input в блоки . Также не стоит забывать что если возникают какие то проблемы только в IE то стоит воспользоваться хаками.

Автоматические отступы Top Bottom

Вопрос:

Как отцентрировать div

К сожалению, вертикальное центрирование средствами CSS намного сложнее чем горизонтальное. Если вы точно знаете значение height вашего блока, то можно использовать абсолютное позиционирование.

div {
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -100px; /* half of div's height */
      height: 200px;
  }

Если же вам неизвестна высота, то как ни больно это говорить, но придется использовать таблицу и свойство vertical-align.

Один или несколько CSS файлов?

Вопрос:

Как лучше использовать CSS? Несколькими разными файлами ( type.css, layout.css, и т.д.) или один большой файл?

Есть только одно обстоятельство при котором я разбиваю CSS на несколько файлов, это случается когда CSS абсолютно уникальна и делается под одну страницу без использования этих стилей где либо еще. Например у вас есть страница “About” с уникальным внешним дизайном, то загружать будем общий style.css, и about.css чтобы он переделал все что надо для этого уникального внешнего вида.

Некоторые специалисты будут кричать вам, что загрузка дополнительного файла стилей повлечет лишние HTTP запросы, что снизит скорость обработки, и следовательно необходимо использовать только один CSS файл и только один JavaScript файл на страницу. И они будут правы, но на практике для большинства сайтов это будет некритично, так как "тормоза" могуть быть слишком малы, чтобы как то их заметить.