На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

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


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

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

Самый простой способ адаптации (после проставления тега 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 - я с удовольствием и за небольшую плату вам помогу.



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





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

Комментарии

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



Почему я пишу программы на заказ на C#?
Ю. Пахолков - AI Factory's Chess, уровень 7, 21 февраля 2019


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.