Битая верстка blogspot при использовании <!-- more -->

Очень смутила меня ситуация с внезапно поплывшим дизайном этого блога.
Сразу и не понял в чем дело.


Редактор blogspot.com позволяет вводить тексты и править их в визуальном режиме — то есть «Что вижу, то и получу». Приятно. Одной из функций редактора является разрыв страницы. Вставляется он с помощью кнопки справа, выглядящей, (что логично) как два куска разорванного листа. Второй вариант — в режиме «Изменить HTML» написать <!-- more -->


Редактор проводит неплохую проверку на соответствие xhtml стандартам, даже ругается, если есть что-то не то.

Так вот разрыв текста допустим в любом месте. Даже посредине абзаца, таблицы и прочего. В результате может поплыть верстка. Причина — проста, пример — тоже.

<div>Ой-ляля
<!-- more -->
Тру-ляля</div>

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

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

Так что, спосибо кодерам blogspot, что показали подкинули в «копилку незабудок» момент, который нужно отслеживать при программировании своих сайтов.

Мамбо, Дивный шаблон

Снова пришлось мне повозиться с сайтиком. На этот раз основная задача — уйти-таки от табличной верстки.
Как оказалось, mambo в принципе поддается такой переработке без особых усилий.
Переписаны два файла includes/frontend.html.php и includes/frontend.php

Шаблончик создан стандартный — трехколоночный резиновый.
Честно говоря удивлен тому, что для многих подобная задача — создание трехколоночного резинового шаблона является проблемой.
Всё же элементарно:

<div class="container">
  <div class="header"></div> 
  <div class="leftBlock">asdf</div>
  <div class="rightBlock">asd</div>
  <div class="middleBlock">asdf</div>
  <div class="foother"></div>
</div>


преобразуется в нормальный дизайнЦик, если всего лишь проследить за  правилами css примерно такого вида:

.container { min-width:700px;}
.leftBlock { float:left; max-width:200px;}
.rightBlock { float:right; max-width:200px;}
.middleBlock { width:100%; padding-left:220px; padding-right:220px;}
.header, .foother {clear:both; width:100%}