Ищу хорошие уроки по верстке дивами

с примерами и пояснениями, как верстать таблицы/столбцы дивами больше 4 элементов + добавлять новые к уже сверстанному

http://www.firststeps.ru/html/css/r.php?1
http://ru.html.net/tutorials/css/lesson1.php
пойдет ?

если честно, то слабовато... представлены основы, а мне что-то более продвинутое, верстать я могу, но очень медленно, например у меня сложности с версткой дивами кода

Код:

<table border="1">   <tr>       <td>1</td>       <td rowspan="3">3</td>       <td>3b</td>   </tr>   <tr>       <td rowspan="2">2</td>       <td>3c</td>   </tr>   <tr>       <td>3d</td>   </tr> </table>

ну хз, я даже не видел так чтоб сделали
если видел - покажи (можно в личку), аж интересно
насколько я с дивами знаком, так вроде там не получится, правда слоями может (или я заучился и с чем-то перепутал?), но нахрена ? если можно проще

писец, даже без комментариев...
ТС включи мозг, твоя таблица верстется дивами на раз два...

соори может ступил, не вижу в адеквате код таблицы... ебнутая табиуца какая то...

Ado.Blogs писал:

писец, даже без комментариев... ТС включи мозг, твоя таблица верстется дивами на раз два... соори может ступил, не вижу в адеквате код таблицы... ебнутая табиуца какая то...

я не такой гений, чтоб сверстать такую таблицу дивами на раз два, может сверстанешь и меня научишь?

таблица кривая изначаольно, только я это вижу? или я зра вчера бальзам пить начал...


покажи что свертсать надо, эта таблица "ни о чем" имхо...

Таблица неправильная с ошибками, в каждом <tr> должно быть одинаковое количество ячеек <td>

Есть книга O'REILLY, Девид Соер Макфарланд "Большая книга CSS"
Если найдешь там подробно и с примерами все описано.

k1ng писал:

Есть книга O'REILLY, Девид Соер Макфарланд "Большая книга CSS" Если найдешь там подробно и с примерами все описано.

это оно?
http://www.headfirstlabs.com/books/hfhtml/

Ado.Blogs писал:

таблица кривая изначаольно, только я это вижу? или я зра вчера бальзам пить начал... покажи что свертсать надо, эта таблица "ни о чем" имхо...

спецом проверил на http://validator.w3.org/check
Result: Passed, 2 warning(s)

Оффтопик: ibiz: а ты чем 6 лет занимался? почему верстать то не научился? только кодил?
таблицу верстать дивами - это что за дерьмо еще? . Табличные данные должны быть в таблице

FXIX писал:

Оффтопик: ibiz: а ты чем 6 лет занимался? почему верстать то не научился? только кодил? таблицу верстать дивами - это что за дерьмо еще? . Табличные данные должны быть в таблице

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

ну для доступа к ячейке можно юзать класс, td.tdN, или id, td#tdN. или юзать класс для строки и юзать квери, типа $('tr.trN')->index(N). как-то так. порядковый номер ячейки в строк

Parfumer писал:

Таблица неправильная с ошибками, в каждом <tr> должно быть одинаковое количество ячеек <td>

и я про то же...

ibiz писал:

верстать я могу, но очень медленно...

Ускорить процесс можно используя css framework. Для изучения рекомендую Malo CSS.

Yacc писал:

Ускорить процесс можно используя css framework. Для изучения рекомендую Malo CSS.

во, это более понятно

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

CSS Mastery Advanced Web Standards Solutions (ищи 2е издание)

Smashing CSS: Professional Techniques for Modern Layout

Pro CSS and HTML Design Patterns (оч. старый релиз - 2007 год и перееизданий кажется небыло, но почитать стоит, так как учит смотреть на вёрстку в терминах CSS-паттернов, на основе которых и строятся фреймвёрки)

Everything You Know About CSS Is Wrong (в принципе, здесь очень доходчиво показывается, как блоками можно эмулировать некоторые варианты таблиц - display: table, table-row etc и почему этого делать не стоит)

Реальное же эмулирование табличного поведения блоками нужно только в нескольких случаях, например, один из самых часто используемых - одинаковая высота колонок (левый/правый сайдбар, контент и т.д.), но достигается за счёт ввода доп. элементов, но не полным эмулированием поведения таблицы. Просто в случае блочной вёрстки меняется сама идеология компановки страницы.

Yacc писал:

Для изучения рекомендую Malo CSS.

забавный фреймвёрк на 7 правил, из которых скорее-всего прийдётся 2 или 3 переопределить... просто непонятно, как такое на гугле захостили )
особенно порадовал хак "3х пиксельного бага" для ИЕ (*margin-left:-0.04em;)
может появиться некий гемор, когда будем резинку делать, и основные модули в em-ах переопределять, имхо, лучше юзать что-то типа * html, \*/ и т. д. или вообще вынести это из фреймвёрка и явно в ослостиле анонимным инлайнам лейаут давать (zoom :1, height: 1%; и прочие) там, где это нужно.

по сабжу, соглашусь с FXIX - попробуй просто при создании новой строки, через тире, добавлять порядковый индекс к ИДу строки и классу ячейки.

Цитата:

ТС включи мозг, твоя таблица верстется дивами на раз два...

на раз два таблицы с rowspan/colspan не делаются, в случае необходимости соблюдения пропорций по ширине и высоте между всеми ячейками ;) под каждый столбец нужно свой класс делать + пару приёмов с большими padding-ами и т.д., и вообще, таблицу более правильнее таблицей делать.

Цитата:

Для изучения рекомендую Malo CSS.

Жесть, забавнейший фреймворк. Ка бы раньше о нем знал, сэкономил бы себе кучу потраченного времени на одни и те же извраты с центровкой и делением дивов

Stek писал:

Жесть, забавнейший фреймворк. Ка бы раньше о нем знал, сэкономил бы себе кучу потраченного времени на одни и те же извраты с центровкой и делением дивов

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

Оу, за ссылку на Мало спасибо.
Что-то похоже на таблицы пока что мне ближе, чем сами дивы.

ibiz писал:

... я стал в разы лучше разбираться и теперь могу создавать полноценные таблицы...

Сомневаюсь. Тебе надо именно таблицы сделать? Для создания таблиц предназначен тэг table.

CSS Framework предназначен не для создания полноценных таблиц (table), а для создания полноценных таблиц каскадных стилей (CSS). Почувствуй разницу.

Вот тебе урок по вёрстке номер 1.
Как верстать?
Верстать надо по стандартам.

Yacc писал:

Сомневаюсь.

точно тебе говорю, не сомневайся даже!

Покажешь всем?
Обсудим.

Yacc писал:

Покажешь всем? Обсудим.

чо показать то?