Адская верстка

Всем добрый вечер, в студии Джо Саратино, здравствуйте ! Недавно я решил заняться версткой шаблона для нового проекта, а именно блога к нему. Раскопал на диске подходящий исходник (я обычно не делаю шаблоны WP с нуля, так как это чрезвычайно долго и муторно, часто забываешь проставлять нужные функции в разных файлах, вылезают ошибки), и загрузил его на сервер.

Первым делом я решил изменить ширину сайта. Порывшись в CSS, установил ширину в 1022 пикселя, что мне показалось вполне приемлемым. Однако заметил, что размеры картинки в хидере не изменились ! Думая, что сайт закешировался, я пересохранил CSS и вызвал его из другого браузера. Однако результат оставался тем же. Я снова зашел в CSS и поменял ширину блока на 250 пикселей, а высоту – на 155. Сохранил – нет результата !

Пошел по форумам. Причин – никаких, либо кеширование, либо родительские элементы. Все это я уже и так проверил и осмотрел. Между тем картинка в хидере стояла намертво – сам рисунок в центре, а по бокам – пустые поля. Отчаявшись, я стал неистово курочить CSS в поисках «лишних» отступов, но их не было, да и все пункты CSS я обычно тщательно подписываю. Ничего.

И вдруг мысль пришла ко мне в голову – исходники, как правило, составлены мной из уже готовых шаблонов, просто их структура упрощена, изменен и прокомментирован CSS, а стандартные файлы, типа page.php или там single.php, остаются те же – ведь они все равно одинаковые, и названия блоков я обычно делаю тоже одинаковые, типа header, footer, sidebar, content-zone и т. п. – так легче ориентироваться.

И вот я заглянул в исходный код и увидел, что стили хидера находятся в теле страницы, а не в файле CSS ! Теперь-то уж я догадался, что они, вероятнее всего, выведены php-скриптом, и он имеет приоритет перед CSS, потому-то никакие изменения и не отражаются на сайте. Взяв functions.php, я нашел там параметры хидера, выводимые через php define (), поменял их – и все заработало ! Упоенный результатом, я тотчас же приступил к моделированию нового блока.

В CSS я задал его параметры, в header.php быстренько встроил в код – готово ! Блок расположен на странице, я немного подкорректировал позиции, закрыл все и завалился спать.

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

Короче говоря, я проверил и перепроверил весь CSS вдоль и поперек, сличал синтаксис, рассматривал подписи – не раскомментированы ли. Нашел незакрытую скобку, но она относилась к комментариям, и это исправление ничего не изменило.

Копался я и рылся во всем этом очень долго, пока не вспомнил, что дополнительный модуль должен иметь абсолютное позиционирование, иначе он находится не внутри родительского блока, а как бы поверх него. Вбил в CSS модуля строку с надписью position: absolute – и вот, все стало на место.

Выводы ? Прежде всего, сначала все работало без позиционирования – это меня сбило. Я и предположить не мог, что сделал что-то неправильно. А затем – стоило помнить о том, что новый блок необходимо привязать внутрь родительского, тем более что я сам когда-то писал об этом статью с подробной инструкцией

Ваш комментарий !