Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Вёрстка дивами 
:(
    Опции темы
AntonioBanderaz
Дата 26.12.2005, 11:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Velichko Anton
**


Профиль
Группа: Участник
Сообщений: 851
Регистрация: 28.4.2005
Где: Санкт-Петербург

Репутация: нет
Всего: 18
Всегда верстал таблицами,хотелось бы узнать, какие основные принцыпы вёрстки дивами... Какие преимущества и недостатки?


--------------------
ГЫ... 
PM MAIL ICQ   Вверх
Ciber SLasH
Дата 26.12.2005, 12:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 15
Всего: 67
Преимущества:
1) быстрее грузится контент (визуально), т.к. браузер отображает инфу в DIV-ах по мере загрузки, а не так как в таблице — пока вся таблица не загрузится, ничего не покажется
2) страница на DIV-ах внутренне выглядит гораздо понятнее и легко редактируемой, чем на таблицах
3) в DIV-ах можно хранить что угодно и как угодно, к примеру можно сделать графику на DIV-ах, отрисовывая пиксели одно- двух-пиксельным DIV-ом
4) на DIV-ах легко делается footer, который будет всегда внизу, даже если на странице ничего нет
5) DIV-ы можно юзать ещё и как подобие фреймов, установив им CSS-атрибут overflow: auto

Недостатки:
1) при вёрстке DIV-ами можно встретиться с кучей проблем, как то:
  • сайт сделанный на DIV-ах может совсем стать галимым при другом разрешении. К примеру для проверки измени размер окна браузера в двое и посмотри, как сползают DIV-ы со своего места
  • приходится подгонять DIV-сайт под разные браузеры, т.к. все они сволочи отображают совсем по разному
  • при вёрстке DIV-ми часто приходится манипулировать такими св-ми, как: margin, padding, border. Которые в свою очередь по-разному отображаются браузерами. А именно — IE по своему отрисовывает бокс, Gecko-браузеры по своему

Пока всё, что вспомнил и на что наткнулся...
Добавлено @ 12:47
ЗЫ: лучше использовать гибридную вёрстку: каркас сайта на DIV-ах, а внутренности на таблицах, имхо.
PM   Вверх
Bangladesh
Дата 26.12.2005, 22:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


AsBest
***


Профиль
Группа: Завсегдатай
Сообщений: 1089
Регистрация: 4.9.2004
Где: Калининград

Репутация: 4
Всего: 17
из моего опыта: smile

если я делаю сайт, где в основном идут дивы, то я точно выбираю общую длину сайта и устанавливаю фиксированное положение (т.е. не процентное) таким образом, чтобы на всех разрешениях было достойное отображение...

а вообще я юзаю дивы в основном при td {position: relative } tr {position: relative}, т.е. для размещения чего-либо внутри ячейки таблицы (ну это и есть гибридное в общем).

на заметку:

по моему мнению smile в работе с дивами очень пригодиться js для выравнивание и подгонки под размеры...




--------------------
ок
PM MAIL WWW ICQ Skype   Вверх
Ciber SLasH
Дата 27.12.2005, 04:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 15
Всего: 67
Вот, что бывает при вёрстке DIV-ми:
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<meta http-equiv="MSThemeCompatible" content='No'>
<meta name="Generator" content='EditPlus 2.21.330'>
<meta name="Author" content='Ciber SLasH'>
<title>Shop :: Main</title>
<style type='text/css'>
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #83888E;
}
/*////////////////////////////////////////////////////////////////////////////*/
/*==[ Контейнер ]=============================================================*/
/*////////////////////////////////////////////////////////////////////////////*/
#main {
    height: 100%;
    position: relative;
    color: #C5BBBB;
    background: #444;
}
/*--[ Шапка ]-----------------------------------------------------------------*/
#header {
    height: 70px;
    position: relative;
    background: #83888E;
}
/*--[ Подвал ]----------------------------------------------------------------*/
#footer {
    width: 100%;
    height: 22px;
    padding-top: 0.9em;
    position: absolute;
    bottom: 0;
    background: #83888E;
}
/*--[ Тело ]------------------------------------------------------------------*/
#body {
    width: 100%;
    height: 82.7%;
    background: #444;
}
#body td {
    height: 94%;
    padding: 0.6em 0.4em;
    border: 2px groove #83888E;
}
html>body #body td {height: 100%; padding: 0 0.4em}
/*-- Меню --------------------------------------------------------------------*/
#navbar {
    width: 20%;
}
/*-- Контент -----------------------------------------------------------------*/
#content {
}
/*-- Новости -----------------------------------------------------------------*/
#news {
    width: 20%;
}
</style>
</head>

<body>
<div id='main'>
    <div id='header'></div>

    <table id='body' cellspacing="10" cellpadding="5">
    <tr>
    <td id='navbar'>&nbsp;</td>
    <td id='content'>&nbsp;
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </td>
    <td id='news'>&nbsp;</td>
    </tr>
    </table>

    <div id='footer'></div>
</div>
</body>
</html>

задумано было так, как если бы не было набора BR-ов. Смотреть в Gecko-браузерах для того, чтобы увидеть где остался footer.

Вот те и вёрстка DIV-ми. Даже не знаю как эту проблему побороть, наверно прийдётся всё впихивать в одну таблицу smile
PM   Вверх
Ciber SLasH
Дата 27.12.2005, 05:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 15
Всего: 67
Проблема решилась:
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<meta http-equiv="MSThemeCompatible" content='No'>
<meta name="Generator" content='EditPlus 2.21.330'>
<meta name="Author" content='Ciber SLasH'>
<title>Shop :: Main</title>
<style type='text/css'>
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
/*////////////////////////////////////////////////////////////////////////////*/
/*==[ Контейнер ]=============================================================*/
/*////////////////////////////////////////////////////////////////////////////*/
#main {
    height: 100%;
    color: #C5BBBB;
    background: #444;
}
/*--[ Шапка ]-----------------------------------------------------------------*/
#header {
    height: 70px;
    position: relative;
    background: #83888E;
}
/*--[ Подвал ]----------------------------------------------------------------*/
#footer {
    width: 100%;
    height: 22px;
    padding-top: 0.9em;
    background: #83888E;
}
/*--[ Тело ]------------------------------------------------------------------*/
#body {
    width: 100%;
    height: 82.7%;
    background: #444;
}
#body td {
    padding: 0.6em 0.4em;
    border: 2px groove #83888E;
}
html>body #body td {padding: 0 0.4em}
/*-- Меню --------------------------------------------------------------------*/
#navbar {
    width: 20%;
}
/*-- Контент -----------------------------------------------------------------*/
#content {
}
/*-- Новости -----------------------------------------------------------------*/
#news {
    width: 20%;
}
</style>
</head>

<body>
<div id='main'>
    <div id='header'></div>

    <table id='body' cellspacing="10" cellpadding="5">
    <tr>
    <td id='navbar'>&nbsp;</td>
    <td id='content'>&nbsp;
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </td>
    <td id='news'>&nbsp;</td>
    </tr>
    </table>

    <div id='footer'></div>
</div>
</body>
</html>
PM   Вверх
AlexBra
Дата 27.12.2005, 10:58 (ссылка) | (голосов: 0) Загрузка ... Загрузка ... Быстрая цитата Цитата


Unregistered
А как можно вырезать область вокруг DiV чтобы остальные элементы на сайте были неактивны при вилимости объекта див (создаю псевдоокно)
  Вверх
Ciber SLasH
Дата 27.12.2005, 18:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 15
Всего: 67
2AlexBra:
Твой вопрос к теме не относится. Здесь обсуждается вёрстка, а не различные фокусы с дивами.
К тому же твой вопрос вообще должен быть в топике JavaScript, т.к. без JS такое не сделаешь...
PM   Вверх
z-END
Дата 27.12.2005, 18:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прафесар™
****


Профиль
Группа: Комодератор
Сообщений: 3014
Регистрация: 13.3.2003
Где: Венья, Пиетари

Репутация: 4
Всего: 102
а почему бы не создать 1 div 100% по ширине и высоте с прозрачной картинкой, а поверх него еще один с "псевдоокном"


--------------------
Каждый чилавек пасвоему праф...а памоему НЕТ! 
PM WWW ICQ   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.1022 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.