1. Мы продолжаем публиковать интересные статьи на тему SocialEngine 4. Одна из статей посвящена правильному выбору сервера для вашей социальной сети, а другая содержит советы по увеличению производительности платформы. Также мы добавили большую статью о пользовательских уровнях. Ознакомиться со статьями вы можете в разделе Вопросы и Ответы SocialEngine 4.

  2. Вам кажется, что ваша версия SocialEngine 4, работает медленно?

    Голосуйте. Пишите свою версию системы, железо на чем работает и количество пользователей. Будем увеличивать производительность :-) Подробнее

  3. В связи с участившимися случаями попыток продажи пользователями форума различных "сборок" коммерческих социальных платформ, обычно основанных на SocialEngine 3, вводится новое правило для форума. Запрещается создание тем или размещение в уже созданных предложений о продаже или размещение ссылок на сайты, где происходит продажа "сборок". Пользователи, которые продолжат свою коммерческую деятельность в данном направлении, будут заблокированы. Подробнее.
Новые полезные статьи о SocialEngine 4 Ваш SocialEngine 4 медленно работает? Запрет на размещение информации о "Сборках"

Верстка шаблонов спомощью тега DIV

Discussion in 'HTML и CSS' started by J.O.K.E.R., Dec 17, 2010.

  1. J.O.K.E.R. Thread starter User


    Offline
    Message Count:
    152
    Likes Received:
    27
    Получилось поровну. И я решил, что мне пришла пора изучить возможности верстки боксами, тем более мир не стоит на месте, а боксы, как никак, новая технология.

    Трехколоночная div верстка

    Попробуем вместе с вами, читатели, создать боксовую верстку в три колонки поэтапно. Открываю пустую html страничку блокнотом и вписываю туда основные страничные параметры:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Верстка</title>
    </head>
    <body>
    </body>
    </html>



    Пока хватит. Давайте разместим их на нашей странице. Сначала сделаем враппер и сразу под ним футер, затем в враппер поместим хэдэр и сразу под хэдэром - контейнер, в котором в свою очередь расположим дивы колонок:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Верстка</title>
    <style type="text/css">
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="header"></div>
      <div id="container">
      <div id="left"></div>  
      <div id="right"></div>
      <div id="center"></div>
      </div>  
    </div>
    <div id="footer"></div>
    </body>
    </html>


    Как видите, я назначил каждому диву свой идентификатор. Теперь нам нужно позиционировать наши дивы относительно друг друга:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Верстка</title>
    <style type="text/css">
    #header {height:100px;}
    #container {min-width:800px;} <!-- указываем минимальную ширину -->
    #center {margin:0px 200px 0px 200px;}
    #left {float:left; width:200px;}
    #right {float:right; width:200px;}
    #footer {height:100px;}
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="header"></div>
    <div id="container">
      <div id="left"></div>  
      <div id="right"></div>
      <div id="center"></div>
    </div>  
    </div>
    <div id="footer"></div>
    </body>
    </html>


    После установки подобных стилей, наш шаблон приобрел более менее завершенный вид, но это ещё не всё. Обратите внимание: если вы начнете добавлять контент в левую или в правую колонку - она, растягиваясь, проедет над футером. Это происходит от того, что боксы с параметром float:left; или float:right; не растягивают родительский бокс (бокс в котором находятся).
    Для решения этой проблемы нам нужно добавить в самый низ бокса "контейнер" ещё один пустой бокс с параметром clear:both; и после этого контейнер будет растягиваться при увеличении контента в колонках:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Верстка</title>
    <style type="text/css">
    #header {height:100px;}
    #container {min-width:800px;} <!-- указываем минимальную ширину -->
    #center {margin:0px 200px 0px 200px;}
    #left {float:left; width:200px;}
    #right {float:right; width:200px;}
    #footer {height:100px;}
    .clear {clear:both;}
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="header"></div>
    <div id="container">
      <div id="left"></div>  
      <div id="right"></div>
      <div id="center"></div>
    <div class="clear"></div>
    </div>  
    </div>
    <div id="footer"></div>
    </body>
    </html>


    Но и это ещё не всё...

    Приклеиваем футер к нижней границе экрана

    Часто, когда на странице мало контента, под футером образуется некрасивый пропуск, что может полностью испортить дизайн. Чтобы избежать этого, нам необходимо сначала придать основному диву высоту в 100% относительно высоты окна браузера, а затем сдвинуть его вверх вместе с футером на ширину футера, которую нам нужно точно знать.
    Сначала установим 100% высоту дива с id=wrapper :

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Верстка</title>
    <style type="text/css">
    
    /* устанавливаем высоту на 100% */
    html, body {height:100%;}  
    #wrapper {height:auto !important;height:100%;min-height:100%;}
    /* -- -- */
    
    #header {height:100px;}
    #container {min-width:800px;} /* указываем минимальную ширину */
    #center {margin:0px 200px 0px 200px;}
    #left {float:left; width:200px;}
    #right {float:right; width:200px;}
    #footer {height:100px;}
    .clear {clear:both;}
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="header"></div>
    <div id="container">
      <div id="left"></div>  
      <div id="right"></div>
      <div id="center"></div>
    <div class="clear"></div>
    </div>  
    </div>
    <div id="footer"></div>
    </body>
    </html>

    А теперь сдвигаем на место уехавший за пределы экрана футер, для этого сдвигаем его вверх на его высоту, а для того чтобы контент не заезжал под футер, установим ещё один пустой див-распорку:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Верстка</title>
    <style type="text/css">
    html, body {height:100%;}  
    #wrapper {height:auto !important;height:100%;min-height:100%;}
    #header {height:100px;}
    #container {min-width:800px;} /* указываем минимальную ширину */
    #center {margin:0px 200px 0px 200px;}
    #left {float:left; width:200px;}
    #right {float:right; width:200px;}
    #footer {height:100px;margin-top:-100px;} /* добавляем отступ */
    .clear {clear:both;}
    #space {height:100px;} /* стиль распорки */
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="header"></div>
    <div id="container">
      <div id="left"></div>  
      <div id="right"></div>
      <div id="center"></div>
    <div class="clear"></div>
    <div id="space"></div> <!-- div-распорка -->
    </div>  
    </div>
    <div id="footer"></div>
    </body>
    </html>
    J.O.K.E.R., Dec 17, 2010
    #1

  2. dream User


    Offline
    Message Count:
    144
    Likes Received:
    32
    ооо боже...проклятый DIV чур меня чур :beee::crazyface:
    ------------------он действительно очен страшен и коварен------
    dream, Dec 18, 2010
    #2

  3. Gooos абырвалГ


    Offline
    • Admin
    Message Count:
    2,435
    Likes Received:
    645
    My version of SE:
    3.20
    Центрирование чего? Содержимого в блоке или самого блока?
    Всё элементарно центрируется.
    Какие ещё значительные недостатки имеют DIV(ы)?

    P.S: для справки - <span> это тоже контейнер, как и <div> ;)
    Gooos, Dec 20, 2010
    #3

  4. sewgen User


    Offline
    Message Count:
    259
    Likes Received:
    40
    My version of SE:
    3.20
    Один из главных недостатков табличной верстки: содержимое таблицы не загружается на экран, пока не загрузится ВСЁ содержимое таблицы. Особенно это заметно для таблиц со множественными вложениями в них других таблиц. Юзер в это время видит пустой экран.
    Блочная верстка "заполняет экран" по мере подгружения дивов.
    Оптимальное решение как раз реализовано в SE: основной каркас сверстан из таблиц , а вложенности - из div-ов.


    Пыс-пыс: Предлагаю в дальнейшем "боксы" называть - "блоками" ))
    sewgen, Dec 20, 2010
    #4

  5. Gooos абырвалГ


    Offline
    • Admin
    Message Count:
    2,435
    Likes Received:
    645
    My version of SE:
    3.20
    Как раз это кривое решение, должно быть наоборот, помня об этом:
    То лучше всё основное в div(ы), а уж в них, при необходимости таблицы.
    Gooos, Dec 21, 2010
    #5

Share This Page

All rights reserved SocEngine.ru ©