Помогите расположить блоки

Тема в разделе "Верстка", создана пользователем ram222, 2 июн 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. ram222

    ram222 Da Vinci

    Регистр.:
    27 апр 2009
    Сообщения:
    749
    Симпатии:
    73
    Есть шаблон вида
    <div id="topheader">шапка</div>
    <div id="left">меню</div>
    <div id="content">контент</div>
    <div id="right">доп меню</div>
    <div id="footer">подвал</div>
    стили:
    #topheader{
    width: 100%;
    float: none;
    }
    #left{
    width: 30%;
    float: left;
    }
    #content{
    width: 50%;
    float: left;
    }
    #right{
    width: 20%;
    float: left;
    }
    #footer{
    float: none;
    width: 100%;}
    [​IMG]
    требуется поменять блоки МЕНЮ и КОНТЕНТ в коде местами, но чтобы визуально всё осталось как есть.
    Или тыкните на такой готовый шаблон или пример сайта.
    Ещё лучше чтобы КОНТЕНТ был первым в коде.
     
    Последнее редактирование: 2 июн 2014
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    668
    а стили где?
     
  3. Sunday

    Sunday

    Регистр.:
    13 дек 2009
    Сообщения:
    732
    Симпатии:
    323
    Последнее редактирование: 2 июн 2014
    humen и ram222 нравится это.
  4. ram222

    ram222 Da Vinci

    Регистр.:
    27 апр 2009
    Сообщения:
    749
    Симпатии:
    73
    стили например вот так:
    #topheader{
    width: 100%;
    float: none;
    }
    #left{
    width: 30%;
    float: left;
    }
    #content{
    width: 50%;
    float: left;
    }
    #right{
    width: 20%;
    float: left;
    }
    #footer{
    float: none;
    width: 100%;}
     
  5. e80

    e80 Постоялец

    Регистр.:
    16 июл 2012
    Сообщения:
    58
    Симпатии:
    15
    Поменяй в html их местами и все.
    то есть сначала content, потом left:
    <div id="topheader">шапка</div>
    <div id="content">контент</div>
    <div id="left">меню</div>
    <div id="right">доп меню</div>
    <div id="footer">подвал</div>
     
  6. DevOrc

    DevOrc Создатель

    Регистр.:
    5 июн 2014
    Сообщения:
    31
    Симпатии:
    10
  7. Droid37

    Droid37 Писатель

    Регистр.:
    7 июн 2014
    Сообщения:
    7
    Симпатии:
    0
    плюсом ширину поправить
    #left{
    width: 50%;
    float: left;
    }
    #content{
    width: 30%;
    float: left;
    }

    но для чего это надо?
     
  8. Sherzod

    Sherzod Создатель

    Регистр.:
    26 сен 2011
    Сообщения:
    22
    Симпатии:
    8
    Это скорее всего нужно автору для оптимизации сайта под поисковые системы. Контент находится выше, поисковик видит его первым и показывает в запросе сразу описание.
     
  9. s300

    s300 Писатель

    Регистр.:
    25 июн 2014
    Сообщения:
    1
    Симпатии:
    0
    Поменяй в html их местами, чтобы было так:
    <div id="content">контент</div>
    <div id="topheader">шапка</div>
    <div id="left">меню</div>
    то есть сначала content, потом left.

    а в CSS так:
    #left{
    width: 300px;
    float: left;
    }
    #content{
    margin-left: 300 px;
    width: 50%;
    }
    т.е. в CSS в Left надо заменить 30% на 300px, а Content будет отступать от левого края на 300px. Если, конечно, я не ничего не напутал. Единственное неудобство - левая колонка будет фиксированной ширины 300 px.

    Если при этом возникнут проблемы с позиционированием правой колонки, то ей в CSS укажи так:
    #right{
    width: *%;
    float: left;
    }
    кажется *% означает ЗАНЯТЬ ОСТАВШИЕСЯ ПРОЦЕНТЫ, но в этом я не уверен, если не прав - подскажите.
     
    Последнее редактирование: 27 июн 2014
  10. humen

    humen Писатель

    Регистр.:
    2 июл 2014
    Сообщения:
    1
    Симпатии:
    0
    csstemplater.com - очень удобный сервис, сам давно им пользуюсь(плюсанул Sunday).
    Но сейчас все модней становится пользоваться css скелетами такие как бутстрап, скелетон и т.д.
    Они хороши тем, что тебе дается удобный конструктор, из которого можно сделать все что хочешь, и при этом в css файле будут прописаны @media правила, для правильной работы сайта на устройствах с разными разрешениями.