Тривиальные задачи по вёрстке

Вот для чего был создан Хабр!

Мне кажется или в первом примере можно обойтись одним дивом, а отступы задавать во вложенных p или h*?

ну, что ж, попробуем использовать чужие наработки, как раз надо начинать верстку )

Мечтаю о том, чтобы кто-то начал цикл статей о JS-программинге, ибо сам толком ничего не выучу.

Спасибо. Как раз этого здесь не хватало, это будет хорошим «читшитом» :)

Статья и примеры очень хорошие!

но мне не понравилось:
1) в футере копирайт нужно писать так: &_copy; (без подчеркивания)
2) подход не тот… мы про верстку говорим? — тогда при чем тут jQuery?=)
Посудите сами — еще до начала работы вес вашей странички УЖЕ 72 кБ! (http://cgvault.ru/vilz/blank/ — Web Page, complete — и это без картинок), а вся страница www.google.com.ua/ весит 16 кБ! (с картинками).

Вобщем нечего со старта кучу всего подключать=)

height:100%; и min-height:100%;
конфликтуют друг с другом, я выношу первый только для IE6 как конструкцию:
* html height:100%;

Интересная особенность — в «нормальных» браузерах при установке height блоку его контент «проваливается» при переполнении, а в IE6 высота блока увеличивается в зависимости от контента. Поэтому для реализации эффекта увеличения блока при переполнении и фиксации определенной высоты применяю двойную конструкцию.

В разделе про футер «мы сразу же от него избавляемся, отодвигая блок на верх на ШИРИНУ футера», высоту наверное?

Возможно для осликов стоит использовать условные комментарии (conditional comments)? Они и валидацию пройти помогут, и не придётся по несколько раз объявлять параметры, чтобы IE всё правильно понял.

Зер гут!

Что бы это все хорошо и правильно работало во всех браузерах, хорошо бы указать доктайп

А почему у вас в примере с, например, футером class="wrap", но id="footer"? Я бы написал id="wrap" (такой враппер у нас один, как ни крути), но нужно придерживаться хотя бы одного стиля.

Ещё у вас в примере пустого шаблона не закрыты тэги <link />.

Я в пустом шаблоне создаю под-папку img/content, куда складываю все «рыбные» изображения (вставленные дизайнером в макет для примера, но которые не относятся непосредственно к общему шаблону).
Человек, который будет ставить вёрстку на движок скажет вам спасибо.

спасибо!

Спасибо за статью. Все очень толково написано. Побольше бы подобных статей.

Спасибо, возьму на заметку

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

В первом примере в CSS не хватает html, body{margin:0}, поэтому появляется скролл в Опере (в остальных не проверял). В целом же — отличная подборка. Спасибо.

то, что доктор прописал.
спасибо огромное!

Спасибо большое.Интересно. Но я всегда использовал float вместо position. Мне кажется с флоатом больше кроссбраузерный CSS получается.

Давно уже хотел научится дивами верстать, все времени и сил не нахожу.
Думаю начну с этой статьи.

Спасибо! Только начинаю изучать верстку. Премного благодарен :)

Спасибо за статью — мне как раз очень не хватает знаний по решению верстальных задач. Продолжайте в том же духе!

В примере с подвалом внизу страницы можно не использовать лишний блок, в данном случае empty_inner, а просто задать нижние внутренние отступы у тех блоков в контентной части которые будут последними.

Для «прижатого» футера сам долго пользовался этим способом, решение довольно распространенное но, в числе прочих недостатков имеет вот такую багу… в Опере и ИЕ при растягивании окна по вертикали футер остается на месте. В Опере без JS пока никак не лечится, а вот для ИЕ проблема решается.

boagworld.com/technology/fixed_footers_without_javascri/

Если попытаться растянуть окно браузера по вертикали потянув за нижнюю границу окна, футер остается на месте как будто он позиционирован абсолютно. Такая бага есть только в ИЕ и в Опере. Кстати, если растягивать окно за нижний-правый угол (т.е. по вертикали и горизонтали одновременно) ошибка уже не наблюдается.

Плюс за топик, побольше таких. Буду рад прочитать продолжение.
В итоге может получиться хороший cookbook для вёрстки.

по поводу центрирования — проскакивал с полгода назад способ с использованием двух флоат-блоков вокруг основного
это, кажется, единственный способ без экспрешенов и нехороших отрицательных марджинов

только вот ссылка не сохранилась и гуглом не найти

Футер снизу уплывает если в ФФ поменять размер шрифта. Появляется скролл вертикальный.

Автору спасибо, хочу попробовать начать верстать, поэтому ваши уроки весьма в тему. Спасибо.

Спасибо за отличный пост! Занимаюсь версткой, и сравнительно не так давно перешел с табличной. Очень сложно найти подобные качественные примеры в одном месте.

А я надеялся увидеть небольшую подборку задач без решения… (или со скрытым за линком решением)

Спасибо, переверстал одну из главных, за которыми наблюдаю ;-)

Мне кажется статьи для habrahabr.ru должны быть проработаны до мелочей :-)

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

height:20px;
  margin-top:-21px;

  line-height: 20px;
  vertical-align:middle;

  border-top: 1px solid #e8e9e8;  
  width:100%;
  text-align:right;
  font-size:10px;

можно бы было сгруппировать:

width: 100%;
height: 20px;
margin-top: -21px;
font-size: 10px;
line-height: 20px;
text-align: right;
vertical-align: middle;
border-top: 1px solid #e8e9e8;

И форматирование кода хромает, то есть пробел между значением свойства и двоеточием, то все слитно. Вы же научить чему-то людей хотите, так преподносите материал соответственно уровню преподавателя :-)

Что за название «contentdiv»? В остальные имена классов тоже названия тегов, к которым они привязаны, добавлять?
А «empty_inner» зачем так называть, если я туда что-нибудь добавлю потом, это уже не empty будет и придется переименовывать класс? Да и без пустых блоков можно обойтись…

А вот еще:

/*украшательства*/  
  border-left:1px solid #69b401;
  border-right:1px solid #69b401; 

субъективно конечно, но я бы сделал так:

border-width: 0 1px;
border-style: solid;
border-color: #69b401;

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

Спасибо большое! Ждем продолжения…

А зачем указывать line-height в футере? Для вертикального выравнивания?
А если в футере будет несколько строк?

Как сделать чтобы contentdiv тоже был на всю высоту?

Не хочу показаться занудой, но в пустой html файл я бы еще добавил строку
/>

вы не подскажете как решить такую задачу

<header> (fix px)
<content> (100%)
<footer> (fix px)

логично было бы предположить если в footer используется margin-top с минусом
то в header использовать margin-bottom c минусом
либо в content margin:0 auto (-(header)px + -(footer)px);
но это оказывается не верным решением

а почему её просто не поставить в контентой части в самом верху 0_о

<div class='wrap'>
<div class='header'></div>
</div>
<div class='footer'></div>

не выдумывайте лишних сложностей

Сначала часа полтора поломал голову, как же это долбаный центральный блок сделать по центру во всех браузерах. Потом нашел эту статья.
Огромное человеческое спасибо вам!:)

Автор, когда там продолжение будет? заждались

Я не знаю что не так, но даже на вашем примере, когда футер попробывать увеличить до 200пх например, и соответственно добавить ему margin-top: -201px то он налезет на контент сверху.
Пробовал в ФФ2 и опера 9.24, но думаю в остальных не будет отличаться.

Спасибо!

>У этого решения есть один значительный минус. левая верхняя точка у нас получается по середине блока, а от неё ведется позиционирование. Поэтому, когда размеры браузера превышают размеры блока, то он прячется верхней и левой частью за границу экрана без прокрутки.

.popup {
position:absolute;
...
}

Заменить на position:fixed

У меня возникла какая-то непонятная бага. А именно, когда футер прижимается к низу, то в фаерфоксах он находится за дивом с id wrap и нажать на ссылки не получается, ФФ их отказывается видеть напрочь. IE6+, Opera 9.24+ — все нормально, бажит только ФФ2, ФФ3.5. С чем это может быть связано?
P.S. z-index я конечно же пробовал, футеру — 9999, остальным, которые могут его перекрывать — 1, 0, -1. Ничего не помогает.

Буду очень благодарен за помощь.