Перенос левого сайдбара в резиновом макете

(Ответов: 7, Просмотров: 339)
  1. Дипломник Аватар для Gesser
    • Регистрация: 07.04.2013
    • Сообщений: 147
    • Репутация: 11
    Здравствуйте! Появилась задача сделать шаблон сайта резиновым, начал изучать эту тему и возник вопрос. В шаблоне присутствует левый сайдбар. Основная область страницы реализована таким образом:
    PHP код:
    <table>
    <
    tr>
      <
    td>
        <
    div class="sidebar">
      </
    td>
      <
    td>
        <
    div class="content">
      </
    td>
    </
    tr>
    </
    table
    Как мне перенести сайдбар ниже области контента при уменьшении экрана? Нашел, как убрать его с помощью медиазапроса @media (max-width:ХХХ){div.sidebar {display:none;}}. Но как сделать так, чтобы пользователь мог его видеть ниже контента?
    • 0
  2. Дипломник
    • Регистрация: 16.04.2011
    • Сообщений: 150
    • Репутация: 48
    Уберите таблицу и сделайте всё блоками.
    PHP код:
    <div class="sidebar" style="float:left; width:25%">
    <
    div class="content" style="float:left; width:74%">

    (
    max-width:ХХХ){
    div.sidebar {width:100%}
    div.content {width:100%}

    А вообще - используйте фреймворки, если знаний не хватает

    Вот решение на jQuery со сменой блоков:
    Поторопился... не то написал))
    Последний раз редактировалось FullHouse; 15.07.2016 в 14:19.
    • 1

    Спасибо сказали:

    Gesser(15.07.2016),
  3. Дипломник Аватар для Gesser
    • Регистрация: 07.04.2013
    • Сообщений: 147
    • Репутация: 11
    Цитата Сообщение от FullHouse Посмотреть сообщение
    А вообще - используйте фреймворки, если знаний не хватает
    FullHouse, да вот и наткнулся как раз только что на bootstrap 3. А там можно не создавать с нуля, а переделывать? а то сайт то уже есть и давно.
    • 0
  4. Дипломник
    • Регистрация: 16.04.2011
    • Сообщений: 150
    • Репутация: 48
    Дописал смену блоков на jQuery.

    Да, можете взять стандартные шаблоны-примеры и их менять: http://bootstrap-3.ru/bootstraptheme.php
    Понимание придёт быстро.
    • 0
  5. Дипломник Аватар для Gesser
    • Регистрация: 07.04.2013
    • Сообщений: 147
    • Репутация: 11
    FullHouse, спасибо большое!
    • 0
  6. Дипломник
    • Регистрация: 16.04.2011
    • Сообщений: 150
    • Репутация: 48
    Gesser, Вот правильное решение:

    PHP код:
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

    <div class="sidebar" style="float:left; width:25%; background-color:#ff0000; height:100px;"></div>
    <div class="content" style="float:left; width:74%;  background-color:#00ff00; height:100px;"></div>

    <script>
    $(window).resize(function(){
        if ($(window).width() < 768) {
            $('div.sidebar').insertAfter($('div.content'));
        }
        else {
            $('div.content').insertAfter($('div.sidebar'));
        }
    });
    if ($(window).width() < 768) {
        $('div.sidebar').insertAfter($('div.content'));
    }
    else {
        $('div.content').insertAfter($('div.sidebar'));
    }
    </script> 
    • 0
  7. Опытный Аватар для Neumann1970
    • Регистрация: 29.01.2016
    • Сообщений: 297
    • Репутация: 4
    Здравствуйте! Появилась задача сделать шаблон сайта резиновым, начал изучать эту тему и возник вопрос.
    http://getbootstrap.com/css/#grid

    Как вариант - один из быстрых способов IMHO.
    • 0
  8. Опытный Аватар для Vlad03
    • Регистрация: 21.05.2014
    • Сообщений: 379
    • Репутация: 32
    • Webmoney BL: ?
    Капец блин Пересел с БМВ на боинг, можно сменить левую педаль с руля горизонта на сцепление?
    • 0

Похожие темы

Темы Раздел Ответов Последний пост
Как убрать ссылки на свой сайт с левого сайта?
Вопросы от новичков 10 03.10.2015 12:27
Поправте информер сайдбара
Обсуждение форума и ваши предложения 0 18.09.2014 19:34
Убрать h2 в заголовках сайдбара
Вопросы от новичков 5 08.07.2013 12:24
Создание информера в блоке сайдбара
WordPress 0 03.04.2013 00:22
Как исключить из сайдбара выборочные категории?
WordPress 5 18.03.2012 22:58

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры