-Поиск по дневнику

Поиск сообщений в mycss

 -Подписка по e-mail

 

 -Постоянные читатели

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 18.09.2009
Записей:
Комментариев:
Написано: 210


колонки

Суббота, 26 Сентября 2009 г. 19:35 + в цитатник
карты все записи автора

хорошие способы создать несколько колонок

все комментарии следует удалить


--------------------------4


<*html xmlns="http://www.w3.org/1999/xhtml"> <!--не влияет-->
<*head>
<*style type="text/css">
* {
   margin: 0;
   border: 0;
   padding: 0;
} <!--маргины бордеры и паддинги для всеx элементов контента-->
body {
   margin: 20px 15%;
} <!--смещение обьектов в  боди сверху и слева-->
#content{
   position: relative;
   width: auto;
   _height: 1px;
   top: 0px;
   left: 0;
    }
.col1, .col2, .col3, .col4 {
   float: left;
   width: 25%;
} <!--для кажддой колонки отступ слева относительно предыдущей и длина 25%. кстати если ставить бордеры то последняя не влезает. -->

#content .clear{
   clear: both;
}<!--Отменяет обтекание элемента одновременно с правого и левого края.Этим самым мы обеспечим "невылезание" колонок за пределы основного слоя.-->
 
   <*/style>
<*/head>

<*body>
   <*div id="content">
      <*div class="txt">
         <*div class="col1">Текст первой колонки</div>
         <*div class="col2">Текст второй колонки</div>
         <*div class="col3">Текст третьей колонки</div>
         <*div class="col4">Текст четвертой колонки</div>
         <*div class="clear"><*br /><*p class="copy">Copyright<*/p><*/div>
      <*/div>
<*/div>
<*/body>
<*/html>

------------------------------------5

хз лично  я просто сделал 3 колонки, а внутри одной из них ещё три..

<*div style="Float:left;width:20%;border:1px solid blue;">колонка1<*/div>
<*div style="float:right;width:20%;border:1px solid blue;">колонка5<*/div>
<*div style="margin-left:20%;margin-right:20%;width:60%;border:1px solid blue;">
                            <*div style="Float:left;width:33%;border:1px solid blue;">колонка2<*/div>
                            <*div style="float:right;width:33%;border:1px solid blue;">колонка4<*/div>
                            <*div style="margin-left:33%;margin-right:33%;width:34%;border:1px solid blue;">колонка5<*/div>
<*/div>

 

Метки:  

 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку