Форум dkLab и Denwer
Здесь общаются Web-разработчики.
Генеральный спонсор:
Хостинг «Джино»

Где почитать про верстку с помощью <DIV> для начинающих? (Maus, оценка: 5)
Goto page 1, 2  Next
Author Message
Maus
Модератор



Joined: 29 Jun 2003
Posts: 8151
Карма: 270
   поощрить/наказать

Location: пос. Омсукчан Магаданской области

PostPosted: Thu Jul 21, 2005 4:34 pm (написано за 5 минут 45 секунд)
   Post subject: Где почитать про верстку с помощью <DIV> для начинающих?
Reply with quote

Вопрос в общем-то про CSS - все эти float, position, display. На W3C есть спецификация, но мне для понимания её недостаточно. Хочется с примерчиками - чтоб можно было посмотреть, подергать и поковыряться.

Просто я сейчас сижу и не могу решить такие идиотские вопросы:
1) Как нарисовать в IE див размерами 1x1 пиксель?
2) Как табличку из 1х2 ячеек переверстать в дивы?
Back to top
View user's profile Send private message
HardNik
Участник форума



Joined: 03 Feb 2005
Posts: 183
Карма: 12
   поощрить/наказать

Location: Бишкек, Кыргызская Республика

PostPosted: Thu Jul 21, 2005 8:36 pm (спустя 4 часа 1 минуту; написано за 1 минуту 41 секунду)
   Post subject:
Reply with quote

Хм, мне помогло:
www.webmascon.com/topics/coding/42a.asp
ну и далее по ссылкам с этой странички.
Back to top
View user's profile Send private message
Maus
Модератор



Joined: 29 Jun 2003
Posts: 8151
Карма: 270
   поощрить/наказать

Location: пос. Омсукчан Магаданской области

PostPosted: Thu Jul 21, 2005 8:54 pm (спустя 18 минут; написано за 3 минуты 13 секунд)
   Post subject:
Reply with quote

HardNik
Я там был. На Вебмасконе много хорошего, но там или некие общие соображения, или решения очень конкретных задач. Единственно, что вроде бы похожее нашел - это
1) трехпиксельный баг
2) (двух/трех)колоночная верстка

Но вообще я надеялся, что есть некий грамотный ресурс, предназначенный именно для объяснения как перейти с табличной верстки на дивную. Задача-то актуальная.
Back to top
View user's profile Send private message
Юрий Насретдинов
Модератор



Joined: 13 Mar 2003
Posts: 8642
Карма: 195
   поощрить/наказать

Location: 007 495

PostPosted: Thu Jul 21, 2005 8:57 pm (спустя 2 минуты; написано за 35 секунд)
   Post subject:
Reply with quote

Maus wrote:
Задача-то актуальная.
Ты знаешь, она скорее надуманная. В большинстве случаев надёжнее и удобнее делать таблицами. Т.к. современные браузеры уже давно их умеют по частям показывать.
Back to top
View user's profile Send private message Send e-mail
Maus
Модератор



Joined: 29 Jun 2003
Posts: 8151
Карма: 270
   поощрить/наказать

Location: пос. Омсукчан Магаданской области

PostPosted: Thu Jul 21, 2005 9:01 pm (спустя 4 минуты; написано за 3 минуты 9 секунд)
   Post subject:
Reply with quote

Юpий Насрeтдинов
уметь-то умеют.. Но вот когда даже на каждый спейсер расходуется таблица - рендерится это ооочень медленно. Особенно в ИЕ.
А еще веселее - когда в одной из ячеек таблицы обитает баннер, джаваскриптом подгружаемый из баннерокрутилки, которая тормозит. В таком случае ИЕ долго-долго кажет белую страничку, а потом ррраз! - и все отрендерил. С баннерорезкой фаза "долго-долго" отсутствует, к счастью..
Back to top
View user's profile Send private message
Юрий Насретдинов
Модератор



Joined: 13 Mar 2003
Posts: 8642
Карма: 195
   поощрить/наказать

Location: 007 495

PostPosted: Thu Jul 21, 2005 9:05 pm (спустя 4 минуты; написано за 52 секунды)
   Post subject:
Reply with quote

Maus wrote:
когда в одной из ячеек таблицы обитает баннер, джаваскриптом подгружаемый из баннерокрутилки, которая тормозит.
В крайнем случае можно повесить загрузку баннера куда-нибудь в конец документа, где уже таблицы нет. И динамически её туда засовывать.
Maus wrote:
Но вот когда даже на каждый спейсер расходуется таблица
В смысле?
Back to top
View user's profile Send private message Send e-mail
Maus
Модератор



Joined: 29 Jun 2003
Posts: 8151
Карма: 270
   поощрить/наказать

Location: пос. Омсукчан Магаданской области

PostPosted: Thu Jul 21, 2005 9:11 pm (спустя 5 минут; написано за 1 минуту 15 секунд)
   Post subject:
Reply with quote

Юpий Насрeтдинов
Можно конечно. Так в общем и предполагается сделать, но времени нет == руки не доходят == лень в дебри JS лезть.
Юpий Насрeтдинов wrote:
В смысле?
В прямом. У нас дизайнер со специфичным чувством юмора
Back to top
View user's profile Send private message
Юрий Насретдинов
Модератор



Joined: 13 Mar 2003
Posts: 8642
Карма: 195
   поощрить/наказать

Location: 007 495

PostPosted: Thu Jul 21, 2005 9:23 pm (спустя 11 минут; написано за 18 секунд)
   Post subject:
Reply with quote

Maus wrote:
У нас дизайнер со специфичным чувством юмора
:)). Ну, тогда я боюсь и дивы вряд ли могут помочь :).
Back to top
View user's profile Send private message Send e-mail
Maus
Модератор



Joined: 29 Jun 2003
Posts: 8151
Карма: 270
   поощрить/наказать

Location: пос. Омсукчан Магаданской области

PostPosted: Thu Jul 21, 2005 9:45 pm (спустя 22 минуты; написано за 24 секунды)
   Post subject:
Reply with quote

Юpий Насрeтдинов
Смогут. Я терпеливый, перевоспитаю
Back to top
View user's profile Send private message
HardNik
Участник форума



Joined: 03 Feb 2005
Posts: 183
Карма: 12
   поощрить/наказать

Location: Бишкек, Кыргызская Республика

PostPosted: Fri Jul 22, 2005 3:07 am (спустя 5 часов 21 минуту; написано за 23 минуты 50 секунд)
   Post subject:
Reply with quote

Maus
Я, вообще-то, присоединяюсь к мнению Юpия Насретдинова. Причины следующие: каждый браузер имеет свою CSS по умолчанию, в FF вы ее и просмотреть можете. Мало этого, в приложении спецификации CSS2 признается, что пока только ее средствами HTML не описать(и через шесть лет ничего не изменилось). Кстати, часть примеров не проходит в IE5.x(с IE6 тоже не все гладко, несмотря на все декларации). А вот таблицы отображаются практически единобразно. Опять же, касаясь JS, DOM IE6 не совпадает с FF. C таблицами - все вроде одинаково. Объясняется это тщательной проработкой таблиц в HTML. Следет признать, что отказ от табличной верстки - глупость. На похожем принципе основаны большинство графических библиотек для GUI: (в Tk изначально была только табличная упаковка, wxWindows(если внимательно проанализировать иерархию объектов), AWT и их форки - яркий пример).
Единственное от чего следует отказаться - распорки.
IMHO, естественно.
Back to top
View user's profile Send private message
Лобач Олег
Участник форума



Joined: 05 May 2003
Posts: 72
Карма: 6
   поощрить/наказать

Location: Новокузнецк

PostPosted: Fri Jul 22, 2005 3:51 am (спустя 44 минуты; написано за 6 минут 56 секунд)
   Post subject:
Reply with quote

[off]
Лично я за "дивную" вёрстку. Объясню свои мотивы:
  1. "Дивный" код получается лаконичным и достаточно простым.
  2. для редизайна достаточно изменит CSS не трогая HTML
  3. нет необходимости делать отдельную версию для печати
  4. разделение информации и представления (а это всегда гуд :))
  5. соответствие духу и букве стандартов
[/off]
Back to top
View user's profile Send private message
bæv
Модератор «Дзена»



Joined: 27 Aug 2003
Posts: 7275
Карма: 9994
   поощрить/наказать


PostPosted: Fri Jul 22, 2005 5:11 am (спустя 1 час 20 минут; написано за 3 минуты 18 секунд)
   Post subject:
Reply with quote

Примеры вёрстки (много и разные):
www.csszengarden.com/
www.mezzoblue.com/zengarden/alldesigns/

Тут -- статьи:
www.mezzoblue.com/articles/essentials/

(Сейчас найти не могу -- попадался мне один хороший сайт. Если найду/вспомню -- кину ссылку.)

P.S. Во! Вспомнил:

www.westciv.com/style_master/house/tutorials/quick/positioning/index.html
-- там и других статей много, но эта, кажется, как раз то, что нужно.
Back to top
View user's profile Send private message
Ant
Сотрудник «Лаборатории»



Joined: 17 Jun 2003
Posts: 6836
Карма: 131
   поощрить/наказать


PostPosted: Fri Jul 22, 2005 10:56 am (спустя 5 часов 44 минуты; написано за 2 минуты 13 секунд)
   Post subject:
Reply with quote


М

Так, только давайте без религиозных войн. Человек хочет получить больше знаний. Не вижу ни чего в этом плохого. У табличной вёрстки есть сови преимущества. У блочной - свои. И использовать нода обе вместе. Тогда будет полная гармония. (-:

P.S. А вообще, сейчас как Илья придёт и разнесёт тут всё в пух и прах... (-;
Back to top
View user's profile Send private message Send e-mail
Maus
Модератор



Joined: 29 Jun 2003
Posts: 8151
Карма: 270
   поощрить/наказать

Location: пос. Омсукчан Магаданской области

PostPosted: Fri Jul 22, 2005 1:44 pm (спустя 2 часа 48 минут; написано за 43 секунды)
   Post subject:
Reply with quote

bæv
Домо аригато годзаимас!

Пошел продираться сквозь ангрийские глаголы...
Back to top
View user's profile Send private message
Дмитрий Котеров
Администратор



Joined: 10 Mar 2003
Posts: 13665
Карма: 411
   поощрить/наказать


PostPosted: Fri Jul 22, 2005 9:47 pm (спустя 8 часов 2 минуты; написано за 35 секунд)
   Post subject:
Reply with quote

Я вот, грешным делом, до сих пор не понимаю, ну как можно сделать div-ами таблицу из 2 столбцов, да так, чтобы оба столбца имели одинаковую высоту.
Back to top
View user's profile Send private message Send e-mail
HardNik
Участник форума



Joined: 03 Feb 2005
Posts: 183
Карма: 12
   поощрить/наказать

Location: Бишкек, Кыргызская Республика

PostPosted: Fri Jul 22, 2005 10:38 pm (спустя 50 минут; написано за 1 минуту 9 секунд)
   Post subject:
Reply with quote

Дмитрий Котеров
DIV.TABLE{ display: table }
DIV.TR { display: table-row }
DIV.TD { display: table-cell }
:)
Back to top
View user's profile Send private message
Лобач Олег
Участник форума



Joined: 05 May 2003
Posts: 72
Карма: 6
   поощрить/наказать

Location: Новокузнецк

PostPosted: Mon Jul 25, 2005 3:37 am (спустя 2 дня 4 часа 58 минут; написано за 32 секунды)
   Post subject:
Reply with quote

Дмитрий Котеров wrote:
Я вот, грешным делом, до сих пор не понимаю, ну как можно сделать div-ами таблицу из 2 столбцов, да так, чтобы оба столбца имели одинаковую высоту.
rusmarket.ru/test/two_column/

Ну и в догонку - три колонки: rusmarket.ru/test/three_column/
Back to top
View user's profile Send private message
bæv
Модератор «Дзена»



Joined: 27 Aug 2003
Posts: 7275
Карма: 9994
   поощрить/наказать


PostPosted: Tue Jul 26, 2005 11:04 pm (спустя 1 день 19 часов 27 минут; написано за 3 минуты 1 секунду)
   Post subject:
Reply with quote


М

Ветка выделена в отдельную тему «Пустые споры: "DIV или TAB"»,
расположенную в форуме Прочее (27 Июля 2005, 00:04).
P.S.
Это...
Просили уже: "Без религиозных войн".

Высказывайтесь по теме топика.
Back to top
View user's profile Send private message
aross
Участник форума



Joined: 14 May 2005
Posts: 48
Карма: 3
   поощрить/наказать

Location: Вологда

PostPosted: Thu Jul 28, 2005 2:07 pm (спустя 1 день 15 часов 2 минуты; написано за 2 минуты 21 секунду)
   Post subject:
Reply with quote

Лобач Олег wrote:
Дмитрий Котеров wrote:
... не понимаю, ну как можно сделать div-ами таблицу из 2 столбцов, да так, чтобы оба столбца имели одинаковую высоту.
rusmarket.ru/test/two_column/
Ну и в догонку - три колонки: rusmarket.ru/test/three_column/
А если раскрасить колонки? Попробовал. Ни о какой ОДИНАКОВОЙ ВЫСОТЕ DIVов в примерах речь и не идет.
Хотя в целом пример неплохой
Back to top
View user's profile Send private message
Лобач Олег
Участник форума



Joined: 05 May 2003
Posts: 72
Карма: 6
   поощрить/наказать

Location: Новокузнецк

PostPosted: Fri Jul 29, 2005 3:26 am (спустя 13 часов 19 минут; написано за 1 минуту 45 секунд)
   Post subject:
Reply with quote

aross wrote:
Ни о какой ОДИНАКОВОЙ ВЫСОТЕ DIVов
Вам обязательно нужна ОДИНАКОВАЯ ВЫСОТА? Или нужно чтобы они ВЫГЛЯДИЛИ одинаковой высоты?
Приведите пример, когда одинаковая высота необходима и без неё обойтись не получится.
Back to top
View user's profile Send private message
aross
Участник форума



Joined: 14 May 2005
Posts: 48
Карма: 3
   поощрить/наказать

Location: Вологда

PostPosted: Fri Jul 29, 2005 11:03 am (спустя 7 часов 36 минут; написано за 4 минуты 40 секунд)
   Post subject:
Reply with quote

HardNik:
Opera 7.23, Firefox 0.9 - работает :), IE 6 - нет :(

[offtop]
Лобач Олег:
Не нужна, в общем-то, по крайней мере сегодня. А завтра... Завтра, быть может спецификацию все-таки дочитаю.
[/offtop]
Back to top
View user's profile Send private message
Maus
Модератор



Joined: 29 Jun 2003
Posts: 8151
Карма: 270
   поощрить/наказать

Location: пос. Омсукчан Магаданской области

PostPosted: Fri Jul 29, 2005 11:43 am (спустя 39 минут; написано за 1 минуту 23 секунды)
   Post subject:
Reply with quote

Лобач Олег wrote:
Приведите пример, когда одинаковая высота необходима и без неё обойтись не получится.
Бэкграунд белый, фон каждой колонки темно-серый. Если колонки разной высоты - смотрится некузяво
Back to top
View user's profile Send private message
Лобач Олег
Участник форума



Joined: 05 May 2003
Posts: 72
Карма: 6
   поощрить/наказать

Location: Новокузнецк

PostPosted: Fri Jul 29, 2005 11:48 am (спустя 5 минут; написано за 35 секунд)
   Post subject:
Reply with quote

Maus, Вы смотрели ссылки, которые я приводил?
Back to top
View user's profile Send private message
Maus
Модератор



Joined: 29 Jun 2003
Posts: 8151
Карма: 270
   поощрить/наказать

Location: пос. Омсукчан Магаданской области

PostPosted: Fri Jul 29, 2005 9:48 pm (спустя 9 часов 59 минут; написано за 19 секунд)
   Post subject:
Reply with quote

Лобач Олег
Смотрю.. Что-то плохо воспринимается, извините..
Back to top
View user's profile Send private message
WingedFox
Профессионал



Joined: 29 Apr 2003
Posts: 4064
Карма: 269
   поощрить/наказать

Location: Питер

PostPosted: Fri Jul 29, 2005 10:57 pm (спустя 1 час 8 минут; написано за 12 минут 28 секунд)
   Post subject:
Reply with quote

Maus, Дмитрий Котеров
На 2 вопрос Олег уже ответил.
Если не придираться к разной высоте дивов, то с соблюденнием стандартов используется техника "ложных" колонок (оригинал - faux columns (www.alistapart.com/articles/fauxcolumns/) на Alist A Part)
Без соблюдения - используется такой трюк (найден на XPoint):
Code (html): скопировать код в буфер обмена
< (december.com/html/4/element/.html)?xml version="1.0" encoding="iso-8859-1"?> (december.com/html/4/element/.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html (december.com/html/4/element/html.html) xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> (december.com/html/4/element/.html)
 <head> (december.com/html/4/element/head.html)
  <style (december.com/html/4/element/style.html) type="text/css"> (december.com/html/4/element/.html)
#t, #t div {
   border: 1px solid blue;
   _float: left;
   _height: 1px;
}
#t {
   display: table;
}
#t div {
   height: 100%;
   display: table-cell;
}
  </style>
 </head>
 <body> (december.com/html/4/element/body.html)
  <div (december.com/html/4/element/div.html) id="t"> (december.com/html/4/element/.html)
   <div> (december.com/html/4/element/div.html)1</div>
   <div> (december.com/html/4/element/div.html)<p> (december.com/html/4/element/p.html)2</p><p> (december.com/html/4/element/p.html)2</p><p> (december.com/html/4/element/p.html)2</p></div>
  </div>
 </body>
</html>
Знак _ - это хак для IE.

Maus
Решение 1 вопроса:
а) #div {font-size: 1px}
b) <div><!-- --></div>

Что почитать - Xpoint, CodingForums, AlistAPart, Webmascon и т.п.

Вообще, лучше не читать, а экспериментировать и делиться своими соображениями с коллегами. Так быстрее будет освоена техника и легче добиться нужного результата.
Ну и мыслить надо иначе.
У меня есть знакомый, которому проще нарисовать таблицу по срезам из Фотошопа, вместо того, чтобы подумать - где какой блок должен быть расположен.

PS: За последнее время единственное для чего я использовал таблицы в структуре страницы, был сайт в 3 колонки, где требовалась работоспособность при отключенном JS.
Back to top
View user's profile Send private message
aross
Участник форума



Joined: 14 May 2005
Posts: 48
Карма: 3
   поощрить/наказать

Location: Вологда

PostPosted: Mon Aug 01, 2005 3:49 pm (спустя 2 дня 16 часов 52 минуты; написано за 14 минут 48 секунд)
   Post subject:
Reply with quote

WingedFox wrote:
Знак _ - это хак для IE.
Эксперимент показывает, что "хаком для IE" является не знак "_", а "<?xml version="1.0" encoding="iso-8859-1"?>" перед DOCTYPE
Работает. Колонки действительно ОДИНАКОВОЙ высоты.
+1 (за найденную информацию)
Back to top
View user's profile Send private message
aross
Участник форума



Joined: 14 May 2005
Posts: 48
Карма: 3
   поощрить/наказать

Location: Вологда

PostPosted: Mon Aug 01, 2005 4:47 pm (спустя 58 минут; написано за 18 минут 1 секунду)
   Post subject:
Reply with quote

WingedFox wrote:
Знак _ - это хак для IE.
Позднее эксперимент показал, что без знака "_" в ОгнеЛисе теряется правая колонка, если в ней символов много.
[offtop]Едва нашел, как ее вернуть. А куда она девается... Может здесь ясновидящие есть? (-;[/offtop]
Back to top
View user's profile Send private message
aross
Участник форума



Joined: 14 May 2005
Posts: 48
Карма: 3
   поощрить/наказать

Location: Вологда

PostPosted: Mon Aug 01, 2005 5:22 pm (спустя 35 минут; написано за 4 минуты 24 секунды)
   Post subject:
Reply with quote

Подытожу.
Code (css): скопировать код в буфер обмена
#t{
  display: table;
}
#t div {
  display: table-cell;
}
Это CSS 2. Для FireFox и Оперы достаточно. :-) ( у меня FireFox 0.9.3 и Opera 7.23 - работает)
Для глючных IE (работает в 6.0 и 5.0)
1. "<?xml version="1.0" encoding="iso-8859-1"?>"
2.
Code (css): скопировать код в буфер обмена
#t{
  height: 1px;
}
#t div {
  _float: left;    /* "_float" - чтобы FireFox не глючила */
  height: 100%;    /* для IE */
}
Back to top
View user's profile Send private message
WingedFox
Профессионал



Joined: 29 Apr 2003
Posts: 4064
Карма: 269
   поощрить/наказать

Location: Питер

PostPosted: Tue Aug 02, 2005 12:36 am (спустя 7 часов 13 минут; написано за 3 минуты 9 секунд)
   Post subject:
Reply with quote

aross
<?xml в начале документа сносит крышу IE.
Т.е. в режиме соблюдения стандартов работают MZ, FF, Opera, Safari и прочие.
IE работает в quirks mode.
Только так в нём можно добиться растягивания колонок по высоте.

Знак подчёркивания заставляет все браузеры, кроме IE, игнорировать последующую инструкцию.
Back to top
View user's profile Send private message
aross
Участник форума



Joined: 14 May 2005
Posts: 48
Карма: 3
   поощрить/наказать

Location: Вологда

PostPosted: Tue Aug 02, 2005 10:05 am (спустя 9 часов 29 минут; написано за 10 секунд)
   Post subject:
Reply with quote

Забыл совсем.
Конструкция
Code (css): скопировать код в буфер обмена
#t div
означает, что установки стиля будут влиять на всех потомков, в том числе на все вложенные DIV'ы.
Правильнее использовать
Code (css): скопировать код в буфер обмена
#t>div
В этом случае стиль применяется только к непосредственным потомкам, не затрагивая их потомков
Back to top
View user's profile Send private message
WingedFox
Профессионал



Joined: 29 Apr 2003
Posts: 4064
Карма: 269
   поощрить/наказать

Location: Питер

PostPosted: Tue Aug 02, 2005 12:25 pm (спустя 2 часа 19 минут; написано за 1 минуту 7 секунд)
   Post subject:
Reply with quote

aross
Для совместимости с IE это делать не стоит.
Иначе придётся вводить ещё одно правило для указания IE height: 100%
Back to top
View user's profile Send private message
aross
Участник форума



Joined: 14 May 2005
Posts: 48
Карма: 3
   поощрить/наказать

Location: Вологда

PostPosted: Thu Aug 04, 2005 10:27 am (спустя 1 день 22 часа 1 минуту; написано за 5 минут 45 секунд)
   Post subject:
Reply with quote

Попробовал поставить внутрь этой конструкции еще DIV'ы :-( (в IE все поплыло, но, впрочем, есть ведь еще тэги ;-))
И WingedFox прав: IE не всегда хочет понимать Element > SubElement правильно
[Offtop]Скоро мое спокойное приятие продукции Мелкософт перейдет в радикальное неприятие :-([/Offtop]
Back to top
View user's profile Send private message
Maus
Модератор



Joined: 29 Jun 2003
Posts: 8151
Карма: 270
   поощрить/наказать

Location: пос. Омсукчан Магаданской области

PostPosted: Thu Aug 04, 2005 4:43 pm (спустя 6 часов 16 минут; написано за 1 минуту 53 секунды)
   Post subject:
Reply with quote

// offtop:
урл топика
Lingvo wrote:
Esteem - ...
2. гл.
1) высоко ценить; почитать, уважать, чтить; быть высокого мнения, отдавать должное
Back to top
View user's profile Send private message
WingedFox
Профессионал



Joined: 29 Apr 2003
Posts: 4064
Карма: 269
   поощрить/наказать

Location: Питер

PostPosted: Fri Aug 05, 2005 12:55 pm (спустя 20 часов 11 минут; написано за 1 минуту 43 секунды)
   Post subject:
Reply with quote

aross
IE в принципе не поддерживает CSS2 селекторы (el > sub, el + sib, el[attr] и прочие).
Back to top
View user's profile Send private message
bæv
Модератор «Дзена»



Joined: 27 Aug 2003
Posts: 7275
Карма: 9994
   поощрить/наказать


PostPosted: Fri Aug 05, 2005 10:59 pm (спустя 10 часов 3 минуты; написано за 1 минуту 49 секунд)
   Post subject:
Reply with quote

Тут наткнулся: типа, "CSS в картинках".
css.maxdesign.com.au/floatutorial/

Может, слишком упрощённо, но -- довольно наглядно.
Back to top
View user's profile Send private message
Андрей Фрoлов
Участник форума



Joined: 10 Dec 2004
Posts: 27
Карма: 2
   поощрить/наказать

Location: Набережные Челны

PostPosted: Sat Aug 06, 2005 8:04 pm (спустя 21 час 4 минуты; написано за 1 минуту 10 секунд)
   Post subject:
Reply with quote

Вот здесь я в свое время разбирался с дивами.
Мне тогда нужно было закладки как можно проще сделать.
Вроде понятно написано.
www.htmlbook.ru/content/
Смотреть раздел *Использование слоев*
Back to top
View user's profile Send private message
Андрей Фрoлов
Участник форума



Joined: 10 Dec 2004
Posts: 27
Карма: 2
   поощрить/наказать

Location: Набережные Челны

PostPosted: Fri Aug 26, 2005 1:37 pm (спустя 19 дней 17 часов 33 минуты; написано за 56 секунд)
   Post subject:
Reply with quote

Еще одну статью про способы позиционирования блоков HTML-документа с помощью CSS в рассылке увидел - может кому пригодится:
softwaremaniacs.org/blog/2005/08/03/css-layout-positioning/
Back to top
View user's profile Send private message
Антон Макаренко
Участник форума



Joined: 05 Feb 2004
Posts: 374
Карма: 31
   поощрить/наказать

Location: Киев

PostPosted: Wed Sep 14, 2005 11:48 am (спустя 18 дней 22 часа 10 минут; написано за 2 минуты 27 секунд)
   Post subject:
Reply with quote

Готовые техники вёрстки CSS:
glish.com/css/
Очень помогло. За пару недель мучений наконец-то понял принципы вёрстки CSS и создал собственный макет документа, который и соответствует стандартам, и работает без глюков.
Back to top
View user's profile Send private message Send e-mail
Maus
Модератор



Joined: 29 Jun 2003
Posts: 8151
Карма: 270
   поощрить/наказать

Location: пос. Омсукчан Магаданской области

PostPosted: Wed Sep 14, 2005 1:02 pm (спустя 1 час 14 минут; написано за 4 минуты 40 секунд)
   Post subject:
Reply with quote

не знаю, описано ли это (сходу найти не удалось, а название вроде "Peekaboo bug" не шибко информативно, согласитесь), но:
1) Есть подключаемый CSS файл на удаленном сервере (когда все локально, эффект не проявляется)
2) В нем дважды объявлен некий класс:
Code (css): скопировать код в буфер обмена
p {
        margin-bottom: 7px;
        margin-top: 6px;
}
/*
тут еще пачка стилей
*/


p {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        margin-top: 0px;
        margin-bottom: 0px;
}
Так вот, FF и Opera обрабатывают это нормально, а IE 6 отрисовывает как ему заблагорассудится (не в варианте "1 или 2", а вообще как угодно)
Back to top
View user's profile Send private message
v3.14
Guest





Карма: 386
   поощрить/наказать


PostPosted: Fri Sep 16, 2005 8:26 pm (спустя 2 дня 7 часов 23 минуты; написано за 44 секунды)
   Post subject:
Reply with quote

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>Band</title>

<style type="text/css" media="screen">
/*<![CDATA[*/
<!--
body {
margin: 0px;
padding: 0px;
font-family: helvetic, arial, sans-serif;
color: #000000;
font-size: x-small;
background-color: #ffffff;
}

p {
color: #000000;
font-size: x-small;
}

#header {
margin:5px 0 0 0;
background-color: #ffdead;
height:100px;
width:750px;
text-align:right;
vertical-align:middle;
margin-left: auto;
margin-right: auto;
border: 1px solid #ff9900;
}

.address {
float:right;
width:35%;
margin:5px 10px 0 0;
color: #ffffff;
}

#foot {
margin-bottom: 10px;
text-align: center;
font-size: x-small;
width: 752px;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
border-top: 1px dotted #ff9900;
}

#foot a {
color: #000000;
text-decoration: none;
}
#foot a:hover {
color: #ff9900;
text-decoration: underline;
}

a {
color:#000000;
}

#menu_panel {
margin:3px 0 0 0;
border: 1px solid #ff9900;
background-color: #ffdead;
width:750px;
vertical-align:middle;
margin-left: auto;
margin-right: auto;
overflow: auto;
}

#body_panel {
margin: 3px 0 0 0;
width: 752px;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
overflow: auto;
}

#left_panel {
width: 160px;
float: left;
height: auto;
}

#right_panel {
width: 160px;
float: right;
height: auto;
}

#center_panel {
margin-right: 165px;
margin-left: 165px;
width: auto;
}

.box {
border: 1px solid #ff9900;
margin-bottom:3px;
padding: 2px
}
.box_header {
font-size: medium;
font-weight: bold;
background-color: #ffdead;
padding:0 10px 0 5px;
margin: 0;
text-align: center;
border: 0px solid #ff9900;
}
.box_footer {
background-color: #ffdead;
padding: 3px 10px 3px 0;
text-align: right;
font-size: xx-small;
margin-top: 4px;
}
.box_footer a {
color: #000000;
text-decoration: underline;
}

table {
font-weight: normal;
text-align: left;
vertical-align: middle;
border: 1px solid #cccccc;
padding: 3px 5px 3px 5px;
background: #fffff;
border-collapse: collapse;
margin-left: auto;
margin-right: auto
}
td {
font-weight: normal;
text-align: left;
vertical-align: middle;
border: 1px solid #cccccc;
padding: 3px 5px 3px 5px;
background: #fffff;
border-collapse: collapse
}
th {
font-weight: normal;
text-align: left;
vertical-align: middle;
border: 1px solid #cccccc;
padding: 3px 5px 3px 5px;
background: #ffdead;
border-collapse: collapse
}

-->
/*]]>*/
</style>
</head>

<body>

<!-- Заголовок -->
<div id="header">
  <div class="address">

123 Любая улица, Город, индекс<br />
(812) 555-1212
  </div>
</div>

<!-- Панель меню -->
<div id="menu_panel">
<div style="margin-right:2px; float: left; cursor: hand; width: auto; padding: 2px; text-align: center; border: 1px solid Gray; background-color: transparent" onmouseover="style.backgroundColor='#EEEEEE'" onmouseout="style.backgroundColor='transparent'" onclick="self.location='www.blumentals.net'">
  Нажми меня
</div>
<div style="margin-right:2px; float: left; cursor: hand; width: auto; padding: 2px; text-align: center; border: 1px solid Gray; background-color: transparent" onmouseover="style.backgroundColor='#EEEEEE'" onmouseout="style.backgroundColor='transparent'" onclick="self.location='www.blumentals.net'">
  Нажми меня
</div>
<div style="margin-right:2px; float: left; cursor: hand; width: auto; padding: 2px; text-align: center; border: 1px solid Gray; background-color: transparent" onmouseover="style.backgroundColor='#EEEEEE'" onmouseout="style.backgroundColor='transparent'" onclick="self.location='www.blumentals.net'">

  Нажми меня
</div>
<div style="margin-right:2px; float: left; cursor: hand; width: auto; padding: 2px; text-align: center; border: 1px solid Gray; background-color: transparent" onmouseover="style.backgroundColor='#EEEEEE'" onmouseout="style.backgroundColor='transparent'" onclick="self.location='www.blumentals.net'">
  Нажми меня
</div>
<div style="margin-right:2px; float: left; cursor: hand; width: auto; padding: 2px; text-align: center; border: 1px solid Gray; background-color: transparent" onmouseover="style.backgroundColor='#EEEEEE'" onmouseout="style.backgroundColor='transparent'" onclick="self.location='www.blumentals.net'">
  Нажми меня
</div>
<div style="margin-right:2px; float: left; cursor: hand; width: auto; padding: 2px; text-align: center; border: 1px solid Gray; background-color: transparent" onmouseover="style.backgroundColor='#EEEEEE'" onmouseout="style.backgroundColor='transparent'" onclick="self.location='www.blumentals.net'">
  Нажми меня
</div>
<div style="margin-right:2px; float: left; cursor: hand; width: auto; padding: 2px; text-align: center; border: 1px solid Gray; background-color: transparent" onmouseover="style.backgroundColor='#EEEEEE'" onmouseout="style.backgroundColor='transparent'" onclick="self.location='www.blumentals.net'">
  Нажми меня

</div>
</div>

<div id="body_panel">

<!-- Левый блок -->
<div id="left_panel">
  <div class="box">
      <div class="box_header">Статьи</div>
        &raquo;<a href="#">Статья 1</a><br />
        &raquo;<a href="#">Статья 2</a><br />

        &raquo;<a href="#">Статья 3</a>
  </div>
</div>

<!-- Правый блок -->
<div id="right_panel">
  <div class="box">
      <div class="box_header">Новости</div>
      <div>
        <p>Содержимое блока</p>

      </div>
  </div>
    <div class="box">
      <div class="box_header">Новости</div>
      <div>
        <p>Содержимое блока</p>
      </div>
  </div>

  <div class="box">
      <div class="box_header">Новости</div>
      <div>
        <p>Содержимое блока</p>
      </div>
  </div>
  <div class="box">
      <div class="box_header">Новости</div>

      <div>
        <p>Содержимое блока</p>
      </div>
  </div>
  <div class="box">
      <div class="box_header">Новости</div>
      <div>
        <p>Содержимое блока</p>

      </div>
  </div>

</div>

<!-- Центральный блок -->
<div id="center_panel">
<div class="box">
  <div class="box_header">Имя блока - 11:10 16 января 2015 г.</div>
    <p>Это текстовая часть</p>
    <p>Это текстовая часть</p>

    <div class="box_footer">
    <a href="#">Нажми меня</a>
    </div>
</div>
</div>
</div>
<!-- Нижнее меню-->
<div id="foot">
 <a href="#">Нажми меня</a> |
 <a href="#">Нажми меня</a> |
 <a href="#">Нажми меня</a> |
 <a href="#">Нажми меня</a> |
 <a href="#">Нажми меня</a> |
 <a href="#">Нажми меня</a> |
 <a href="#">Нажми меня</a>

</div>

</body>
</html>

Не знаю поможет или нет... три колонки
Back to top
Display posts from previous:   
Post new topic   Reply to topic All times are GMT + 3 Hours
Goto page 1, 2  Next
Page 1 of 2    Email to a Friend.
You cannot post new topics in this forum. You cannot reply to topics in this forum. You cannot edit your posts in this forum. You cannot delete your posts in this forum. You cannot vote in polls in this forum. You cannot attach files in this forum. You can download files in this forum.
XML