[Помогите] Сделать рамку вокруг страницы

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем fzx, 10 дек 2013.

  1. fzx

    fzx

    Регистрация:
    26 ноя 2013
    Сообщения:
    6
    Симпатии:
    0
    Привет всем!


    Вот скачал шаблон UrbanNews демо тут http://themes.siiimple.com/themeselector/?theme=UrbanNews , помогите плиз со стилями.
    Вопрос не сложный, но я чет не вкуриваю, как правильно сделать рамку вокург странички, чтоб было так (красная рамка)

    [​IMG]

    Я делал так:

    Код:
    body {
    border-top: 1px solid #000 !important;
    border-left: 1px solid #000 !important;
    border-right: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
    margin-left: 150px !important;
    margin-right: 150px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important
    }
    
    На ноуте отображается нормально, а на планшете верстка едет.

    Как сделать правильно? Буду признателен за любую помошь.

    Шаб лежит здесь http://morestyle.ru/themeforest/urbannews-premium-wordpress-tema.html
     
  2. dron78

    dron78

    Регистрация:
    20 сен 2013
    Сообщения:
    26
    Симпатии:
    7
    В этом шаблоне вёрстка и на ноуте едет то же :Smile:

    Попробуйте засунуть весь контент который необходимо отображать внутри рамки в какой нибудь "жёсткий" ( в таблицу к примеру ) внешний контейнер, а уже на него и пропишите свойства рамки иначе плавать так и будет.
     
    fzx нравится это.
  3. fzx

    fzx

    Регистрация:
    26 ноя 2013
    Сообщения:
    6
    Симпатии:
    0
    Не, на ноуте не едет, нормальный шаб. А как засунуть в контейнер? Я CSS только начинаю изучать, как только не пробовал - ничего не выходит
     
  4. Scholes

    Scholes

    Регистрация:
    16 дек 2013
    Сообщения:
    20
    Симпатии:
    2
    Там шапка, основное содержание и футер представлены дивами. Можно дать им отдельные рамки, например для шапки #section-menu сделать границы наверху, слева и справа
    #section-menu {
    border-top: 1px solid #000 !important;
    border-left: 1px solid #000 !important;
    border-right: 1px solid #000 !important;
    }
    и так для всех элементов контента.

    Или просто завернуть все содержание в div, задать ему width и margin: 0 auto;

    Например,

    <div class="page">
    <div class="header">...</div> <!-- Шапка -->
    <div class="content">...</div> <!-- Содержание -->
    <div class="footer">...</div> <!-- Футер -->
    </div>

    и в стиле
    div.page{
    width: 980px;
    margin: 0 auto;
    }