Сделать стартовойДобавить в закладки  
Главная страничка Главная страничка
В номере:

    Выходит с 17 июля 2008 г. цена договорная

    Опрос

    gismeteo.ru
    Погода на Яндексе
    pogoda.ru
    meteonova.ru
    по телевизору
    за окном
    в газете
    а че его смотреть?
    в другом месте
    по счетчику гейгера



    Календарь
    «    Декабрь 2010    »
    ПнВтСрЧтПтСбВс
     12345
    6789101112
    13141516171819
    20212223242526
    2728293031 

    Архив новостей
    Март 2022 (1)
    Декабрь 2021 (1)
    Август 2021 (1)
    Июль 2021 (3)
    Февраль 2021 (3)
    Январь 2021 (1)

    Информация
    Простенький трёхколонный резиновый макет на div-ах
    Web » css
    автор: dimon, опубликовано: 23 декабря 2010

    Простейший макет странички на div-ах с тремя колонками - левая и правая фиксированной ширины, центральная растягивается на всю оставшуюся ширину странички.

    резиновый макет с тремя колонками


    Код:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
    <head>
    <title>Простой div-макет с тремя колонками</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <style type="text/css">
    html,body{margin:0;padding:0}
    body{font: 76% arial,sans-serif}
    div {border: 2px solid; padding: 1px;}
    </style>
    </head>

    <body>

    <div style="width: 100%; height:50px; background: #ccc; text-align: center;">Шапка сайта</div>


    <div style="margin:2px 50px; overflow: hidden; border-color: green;">

        <div style="float: left; width: 200px; margin: 2px 2px; background: #B9CAFF; border-color: red;">
        Левая колонка</br>
        Главное меню</br>
        </div>


        <div style="float: right; width: 200px; margin: 2px 2px; background: #B9CAFF; border-color: red;">
        правая колонка с текстами или блоками    
        </div>

        <div  style="margin: 0 212px; background: #B9CAFF; border-color: blue;">
        Служба Яндекс.Рефераты предназначена для студентов и школьников, дизайнеров и журналистов, создателей научных заявок и отчетов — для всех, кто относится к тексту, как к количеству знаков.</br>
        Нажав на кнопку «Написать реферат» вы лично создаете уникальный текст, причем именно от вашего нажатия на кнопку зависит, какой именно текст получится — таким образом, авторские права на реферат принадлежат только вам.</br>
    Теперь никто не сможет обвинить вас в плагиате, ибо каждый текст Яндекс.Рефератов неповторим.</br>
    Текстами рефератов можно пользоваться совершенно бесплатно, однако при транслировании и предоставлении текстов в массовое пользование ссылка на Яндекс.Рефераты обязательна.
        </div>
        

    </div>



    <div style="width: 100%; height:20px; background: #ccc; text-align: center;">подвал</div>


    </body>
    </html>


    Я специально не выносил стили отдельно, а прописал их сразу в div-ах, чтобы они выглядели более наглядно.
    Так же все div-ы имеют границу и отступы - тоже для наглядности.

    div-maket_3_colomns.rar [2,13 Kb] (cкачиваний: 62)



     
    Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Чтобы Вам были доступны все функции Вам необходимо либо зарегистрироваться, либо зайти на сайт под своим именем.

    Другие новости по теме:

  • Рекурсивный список подкатологов и файлов в текстовый лог
  • Скрипт копирования файлов с установленным архивным битом в резервный катало ...
  • Список файлов в каталоге в текстовый файл
  • Перенос приложений на SD карту в ОС Android
  • DLE: Как создать модуль или как я делал дополнительную форму обратной связи


  • Комментарии:



     
    Информация
     
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


    Поиск по сайту:


    Облако тегов
    Arduino, backup, CentOS, cmd, div, DLE, DLE хаки, domoticz, dzvents, event, Home Assistant, Linux, log, LUA, Monster, ogf3, RDP, Template, VBS, w2k8, windows, WSH, бумага, бумажный самолетик, верстка, иструкция, Карты, кино, Навигация, оригами, программа, рецензия, рецепт, скрипт, уведомления, фигуры, шаблон, Яндекс, яндекс-карты

    Показать все теги
    Реклама
    раскрутка сайта бесплатно
    Главная страница | Регистрация | Добавить новость | Новое на сайте | Статистика | Поддержка | Правила ресурса Copyright © 2005-2021 by dimon - all right reserved!
    Тираж:           экземпляров.   Дизайн, верстка by dimon