Адаптация табличной верстки


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

В чем сложности адаптации табличной верстки?

Самый простой способ адаптации (после проставления тега meta name="viewport", увеличения шрифта и прочего) – это сборка блоков «в столбик». То есть div-ы, которые были рядом, просто становятся друг под другом, и исчезает горизонтальная прокрутка. Для блочной верстки, к примеру, достаточно прописать, если два блока рядом

<div class="tt">1</div>
<div class="tt">2</div>
<style>
.tt{
float:left;
width:50%;
}
</style>
Когда ширина становится критической, добавляем вот это:

<style>
@media screen and (max-width: 640px) {
.tt{
width:100%;
}
}
<style>
То есть просто растягиваем блоки во всю ширину. А если имеем аналогичную табличную верстку:

<style>
.tt{
width:50%;
}
</style>
<table>
<tr>
<td class="tt">1</td>
<td class="tt">2</td>
</tr>
</table>
то уже такое решение не прокатит.

Что делать?

Чтобы расположить две ячейки таблицы (td) друг под другом, необходимо правой присвоить позишн абсолют, отнести влево (если автоматически не отнесется) и установить отступ от отверхней границы в размере высоты ячейки. Все!

То есть в нашем случае как-то так:

<style>
@media screen and (max-width: 640px) {
.tt{
width:100%;
}
.tt:nth-child(2){
position: absolute;
left: 0px;
margin-top: 1900px;
}
}
</style>


Кстати частично именно так адаптирован и данный блог, который вы в настоящий момент читаете. Если у вас есть проблемы с версткой, отображением элементов на сайте или чем-то еще, то смело пишите на почту up777up@yandex.ru - я с удовольствием и за небольшую плату вам помогу.
Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

тегизаметки, верстка, css, сайтостроение




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

Комментарии

Александра: Т.е. если сайт собран таблицей, то его можно адаптировать к мобильным устройствам?
Юрий: Да, все верно, можно адаптировать. Даже нужно :)
Саша: Здравствуйте. Мне нужно адаптировать сайт собранный блоками, но в таблице. Т.е. в блоки вставлялись и делились с помощью PHP . Сайт трех колоночный. Хотелось бы узнать сумму этих изменений.
Юрий: Здравствуйте. Стоимость адаптации сайта в каждом случае рассчитывается индивидуально. Свяжетесь, пожалуйста, со мной по любым контактам, покажите сайт, распишите подробнее, что требуется сделать и я вам озвучу цену.



Как получать оповещения вконтакте по смс бесплатно
Правила именования файлов Windows
Все о Smarty