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

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

Опрос

Windows Mobile
Symbian
Android
iPhone
Linux
другая
не знаю
у меня обычный телефон



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

Архив новостей
Май 2019 (2)
Март 2019 (1)
Январь 2019 (1)
Декабрь 2018 (1)
Ноябрь 2018 (3)
Октябрь 2018 (2)

Информация
Простенький трёхколонный резиновый макет на 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качиваний: 54)



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

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

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


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



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


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


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

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