Столкнулся с такой проблемой, писал страницу не я и хочу попробовать оптимизировать её хоть как то под телефон, проблема в том, что все время куда то уезжает сайдбар, он появляется и тут же убегает влево за границы экрана и я не могу понять какая часть кода за это отвечает. Может вы, как профессионалы сможете сказать где сокрыта эта неведомая сила, если конкретно в этой части кода её нет, я могу предоставить все файлы для более полной проверки, но всё таки у меня предчувствие, что оно зарыто где-то здесь. Если же вам необходимо будет смотреть это где-то, в индивидуальном порядке могу скинуть на почту файл styles.css, сюда он не грузится, увы. Код (Text): <? $con[0] = mysql_query("Select * FROM `fankyo_global`"); $gl = mysql_fetch_array($con[0]); $user = $_SESSION['Name']; $con[1] = mysql_query("Select * FROM `accounts` WHERE `NickName` = '$user'"); $ac = mysql_fetch_array($con[1]); $con[3] = mysql_query("SELECT COUNT(*) FROM `accounts` WHERE `Online` != '1001'"); $row = mysql_fetch_row($con[3]); $stat = $row[0]; ?> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title><? echo $gl['Name']; ?></title> <link rel="stylesheet" href="Templates/<? echo $gl['Templates']; ?>/vendor/fontawesome/css/font-awesome.css" /> <link rel="stylesheet" href="Templates/<? echo $gl['Templates']; ?>/vendor/metisMenu/dist/metisMenu.css" /> <link rel="stylesheet" href="Templates/<? echo $gl['Templates']; ?>/vendor/animate.css/animate.css" /> <link rel="stylesheet" href="Templates/<? echo $gl['Templates']; ?>/vendor/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="Templates/<? echo $gl['Templates']; ?>/fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css" /> <link rel="stylesheet" href="Templates/<? echo $gl['Templates']; ?>/fonts/pe-icon-7-stroke/css/helper.css" /> <link rel="stylesheet" href="Templates/<? echo $gl['Templates']; ?>/styles/style.css"> <link rel="stylesheet" href="Templates/<? echo $gl['Templates']; ?>/vendor/sweetalert/lib/sweet-alert.css" /> <link rel="stylesheet" href="Templates/<? echo $gl['Templates']; ?>/vendor/toastr/build/toastr.min.css" /> <script src="Templates/<? echo $gl['Templates']; ?>/vendor/jquery/dist/jquery.min.js"></script> <script src="Templates/<? echo $gl['Templates']; ?>/vendor/jquery-ui/jquery-ui.min.js"></script> <script src="Templates/<? echo $gl['Templates']; ?>/vendor/slimScroll/jquery.slimscroll.min.js"></script> <script src="Templates/<? echo $gl['Templates']; ?>/vendor/bootstrap/dist/js/bootstrap.min.js"></script> <script src="Templates/<? echo $gl['Templates']; ?>/vendor/flot.curvedlines/curvedLines.js"></script> <script src="Templates/<? echo $gl['Templates']; ?>/vendor/jquery.flot.spline/index.js"></script> <script src="Templates/<? echo $gl['Templates']; ?>/vendor/metisMenu/dist/metisMenu.min.js"></script> <script src="Templates/<? echo $gl['Templates']; ?>/vendor/iCheck/icheck.min.js"></script> <script src="Templates/<? echo $gl['Templates']; ?>/vendor/peity/jquery.peity.min.js"></script> <script src="Templates/<? echo $gl['Templates']; ?>/vendor/sparkline/index.js"></script> <script src="Templates/<? echo $gl['Templates']; ?>/scripts/homer.js"></script> <script src="Templates/<? echo $gl['Templates']; ?>/scripts/charts.js"></script> </head> <body> <div class="splash"><div class="splash-title"><h1><? echo $gl['Name'];?><p> Идёт загрузка страницы</p></h1><img src="Templates/FankyoCMS/images/loading-bars.svg" width="64" height="64" /> </div> </div> <div id="header"> <div id="logo" class="light-version"> <span> <? echo $gl['Name']; ?> </span> </div> <nav role="navigation"> <div class="small-logo"> <span class="text-primary"><? echo $gl['Name']; ?></span> </div> <div class="navbar-right"> <ul class="nav navbar-nav no-borders"> <? if($_SESSION['Name']) { echo ' <li><a href="?page=account"><i class="pe-7s-user"></i></a></li> <li><a href="?page=bank"><i class="pe-7s-cash"></i></a></li> <li><a href="?page=acsetting"><i class="pe-7s-key"></i></a></li> <li><a href="?page=acticket"><i class="pe-7s-help1"></i></a></li> <li><a href="?page=aclogout"><i class="pe-7s-upload pe-rotate-90"></i></a></li> '; } else {echo '<li class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown"> <i class="pe-7s-speaker"></i> </a> <ul class="dropdown-menu hdropdown notification animated flipInX"> <li> <a> <span class="label label-success">ОНЛАЙН</span> Игроков '.$stat.' </a> </li> <li class="summary"><a href="samp://46.174.48.46:8212">Подключится к серверу</a></li> </ul> </li>';} ?> </ul> </div> </nav> </div> <aside id="menu"> <div id="navigation"> <ul class="nav" id="side-menu"> <li> <a href="/"> <span class="nav-label"><span class="fa news"></span> Новости</span> </a> </li> <li> <a href="http://eternity-life.ru/forum/"> <span class="nav-label"><span class="fa forum"></span> Форум</span></a> </li> <li> <a href="#"><span class="nav-label">Мониторинг</span> <span class="fa arrow"></span> </a> <ul class="nav nav-second-level"> <li><a href="?page=maps">Карта штата</a></li> <li><a href="?page=server">Статистика сервера</a></li> </ul> </li> <li> <a href="?page=addcash"> <span class="nav-label"> <span class="fa donate"></span>Донат</span></a> </li> <? if($_SESSION['Name'] && $ac['AdminLevel'] > 4) { echo ' <li> <a href="?page=acptick"> <span class="nav-label">[ACP] Тикеты</span></a> </li>'; } if($_SESSION['Name'] && $ac['AdminLevel'] == 9999) { echo ' <li> <a href="#"><span class="nav-label">Админцентр</span> <span class="fa arrow"></span> </a> <ul class="nav nav-second-level"> <li><a href="?page=acpnews">Система новостей</a></li> <li><a href="?page=acpblock">Система IP-Банов</a></li> <li><a href="?page=acplog">Система Логов</a></li> </ul> </li> '; } if(!$_SESSION['Name']) { echo ' <li> <a href="?page=login"> <span class="nav-label"><span class="fa logged"></span>Авторизация</span></a> </li> <li> <a href="?page=joined"> <span class="nav-label"><span class="fa joined"></span>Создать аккаунт</span></a> </li> '; } ?> </ul> </div> </aside>
Очень похоже по принципу работы на шаблон Prologue (ссылка) , только у Вас не хватает кнопки вывода сайдбара на малой ширине экрана и картинкам надо max-width:100% прописать и не указывать в коде страницы для картинок width и height
Это задача чисто фронтовая, к PHP никакого отношения не имеет. В скрипте homer.js имеется функция Код (Javascript): function setBodySmall() { if ($(this).width() < 769) { $('body').addClass('page-small'); } else { $('body').removeClass('page-small'); $('body').removeClass('show-sidebar'); } } которая привязана к событию изменения размера экрана и скрывает сайдбар на определенных разрешениях. Нужно либо её подправить, либо сделать кнопку показать сайдбар, как уже было сказано выше.
код не копал, но изменяя размер окна можно понять, что эта функция есть в JS. СайтБар не отображается при маленьких разрешениях. Как видно из поста выше - менее 769 (наверное px ^_^) Дизайн сыпется при уменьшении окна браузера. Если прописать min-width, то будет появляться полоса прокрутки. --- Добавлено --- и вообще я за фиксированную ширину блока контента...
А многие вообще за адаптивную вёрстку, ибо могут. Пришло время, для многих проектов адаптивность очень нужна. Пора учиться адаптивно верстать. Ну, или изучать бутстрап. Он сам всё сделает адаптивным.
Адаптивная верства сейчас вообще обязаловка. За последние 1,5 года не было ни одно заказа без адаптивной верстки. Да и гугл при ранжировании при прочих равных отдает предпочтение адаптивному сайту. И инструменты разработки у него адаптивность проверяют. https://developers.google.com/speed/pagespeed/insights/?hl=ru https://www.google.com/webmasters/tools/mobile-friendly/ На счет бутстрапа не знаю, не владею им, всё ручками.
Ну не знаю, если верстать mobile first и дизайн начинать рисовать с версии под мобильник (всё по минимуму, только основные элементы) и постепенно расширять к десктопной (все элементы и свистелки с перделками), то я не вижу никаких ограничений. А если сначала нарисовать десктопный дизайн и попытаться из него сделать мобильный, убрав всё "лишнее", то тогда конечно тут возникнут проблемы.
Не, ограничений много, конечно. Особенно это касается сайтов каких-либо личностей искусства: будь то музыкальная группа, художник и т.д. На таких сайтах должно выглядеть всё красиво, много мелких деталей, которые никак не получится "резинить".
С этим постоянно сталкиваюсь и далеко даже не на сайтах личностей искуства. Считаю что это недоработка дизайнера, мало кто из них знает и понимает что такое адаптивный сайт. В большинстве случаев можно не резинить, и рисовать несколько состояний в зависимости от ширины экрана, либо рисовать паттерны, чего дизайнеры не делают, а рисуют картинку фиксированной ширины с кучей градиентов которую не зарепитить и выкручивайся как хочешь.
@bikerlex, вот, а на сайтах творческих личностей сам дизайн часто и зависит от этих мелких деталей. Хотя, конечно, можно сделать костыли в виде нескольких состояний. Но опять же это время, наркомания и опять же все зависит от сложности дизайна
Чувак. Ты должен понять простую вещь. Сайт делается не для того, чтобы быть модным и современным, резиновым и адаптивным, прикольным и трендовым. Сайт делается только для того, чтобы продавать. Что продавать - разнится раз от разу. Но если для продажи тут должны быть элементы, то они должны быть. А ты крайне однобоко смотришь: сайт должен быть резиновым, если сразу делать сайт под мобилу - это хорошо, лишнее надо откинуть, недоработка дизайнера. Так далеко не уедешь. Лишнее это что? Почему ты решил, что это лишнее? Почему, если на десктопах у тебя есть дополнительные возможности - не использовать их? Что глупее: не использовать возможности, или использовать их? Если 75% визитов у тебя с десктопов, кто идиот, тот кто сразу верстает под мобилу, или тот, кто решает эту задачу иным образом? Ответь на эти вопросы и ты возможно увидишь эту проблему с другой стороны. Потому что, если бы существовал однозначный ответ на эту проблему, то проблемы бы не существовало. А она есть, потому что никакого радикального решения не существует.
"лишнее" у меня в кавычках, всё зависит от контекста. Если оно должно там быть и необходимо, то зачем его убирать? А дополнительные возможности на то они и дополнительные, что не обязательные. И я имел ввиду не функционал, а всякие визуальные элементы, которые в мобиле могут быть гораздо проще оформлены. Да и не нужны они там сложными.
звучит то как... Прям статус для ВК. чуток перефразировать и в цитатник ^_^ --- Добавлено --- На харбаре в качестве примера хорошей адаптивной верстки вот такую ссылку дают: http://alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
да. Но почему ты решил, что это не важно? Разве реклама насыщена функционалом? На продающем сайте очень мало элементов, которые действительно функциональны. Но остальные элементы помогают продавать. И под продажей я имею в виду любой обмен денег или времени пользователя на то, что ему нужно. Новостной портал продаёт новости, может ему стоит тупо херачить xml и на этом остановиться? Зачем нужен сайт тогда? Чтобы продавать людям услугу "новостей" нужна не только конфетка, но и красивая обёртка. А она редко дружит с адаптивной вёрсткой. Это надо просто принять. --- Добавлено --- и как по-твоему это можно сделать так, чтобы на десктопной версии они были красивые, а на мобиле - проще оформлены, но при этом это была бы единая вёрстка, пусть и адаптивная? Это уже просто напросто две версии сайта - десктопная и мобильная, получается.
Это делается легко и изящно, но это работа для для UX/UI специалистов и дизайнеров. Фронтэндеру остается только реализовать это с помощью медиакверисов и JS. Адаптивная верстка - реально работающий и продающий инструмент, это конкурентное преимущество.
Легко, с появлением в CSS3 транформаций, анимаций и флексбокс можно сделать всё что угодно. И время от времени чистый JS помогает мелкий функцонал сделать.
@bikerlex слушай, ну это ты уже в область безумия переходишь. Ты понимаешь, что тут на каждый элемент нужно накинуть кучу работы просто потому, что ты не хочешь делать две версии сайта, а тебе в попе свербит сделать именно одну. пиздеть не мешки ворочать. Пруфы давай. Иначе - балабол. Инструмент? - Какое предназначение имеет? Продающий? - Как?
Какие именно тебе пруфы нужны? Общий процент заходов с мобильника и статистика заказов с мобильного девайса? Извини, но это коммерческая информация моего текущего проекта, которую я не имею права разглашать. Могу лишь сказать, что цифра существенная и заказчик тратит достаточно много денег и времени на проработку адаптива.
Вовсе нет. Адаптивку сделать проще. Последние 1.5 года пилю адаптивные сайты. По началу конечно было трудно, новое непонятное. Но когда разобрался во всем и набил руку, стало очень просто. Когда делаешь две версии сайта, то делаешь две верстки, а в адаптивке она одна, медиазапросами меняешь стили и поведение нужных кусков и всё. Специально замерял, на верстку адаптивного сайта на чистом CSS, без картинок (кроме лого), с выпадающим мобильным меню и поиском (без JS), переходящими в обычное меню и поиск в десктопе. Ушло 8 часов реального времени. Это конечно простой сайтик, без излишеств. А если в дизайне много всяких картинок, разных вариантов отображения одного элемента в мобилке и десктопе, то дня 3 рабочих уходит, плюс/минус.