Кроссбраузерная и кроссплатформенная вёрска на EM

[aseran]

aseran

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

1)

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

2)

Можно узнать о каком именно меню идёт речь и вообще поподробнее этот пример?

по первому

действительно не внимательно посмотрел

по второму

http://loremipsum.banzalik.ru/

вставь содержимое этой страницы в контентную часть и посмотри что получиться (по идее должно как и на странице быть)

[psywalker]

по первому

действительно не внимательно посмотрел

по второму

http://loremipsum.banzalik.ru/

вставь содержимое этой страницы в контентную часть и посмотри что получиться (по идее должно как и на странице быть)

Погоди, я не понял, вот это прям всё скопировать и вставить ко мне в Контент? А дальше чё?

[aseran]

Погоди, я не понял, вот это прям всё скопировать и вставить ко мне в Контент? А дальше чё?

http://habrahabr.ru/blogs/webdev/44084/ - думаю поймешь

[psywalker]

http://habrahabr.ru/blogs/webdev/44084/ - думаю поймешь

Вот погляди, я скопировал этот текст и вставил в контент к себе, погляди чё вышло

http://www.psywalker.ru/SAITS/First-Orange/main-page.html#

[aseran]

Вот погляди, я скопировал этот текст и вставил в контент к себе, погляди чё вышло

http://www.psywalker.ru/SAITS/First-Orange/main-page.html#

О чем я и имел ввиду

если все предусмотреть то вставленный текст должен выглядеть как на сайте с которого ты его взял

[psywalker]

О чем я и имел ввиду

если все предусмотреть то вставленный текст должен выглядеть как на сайте с которого ты его взял

Погоди, тоесть я всё сделал правильно? А текст так должен выглядеть при отключённых стилях или нет?

Я кажется всё понял, но не согласен с этим, потому что это означает, что я должен прекратить пользоваться CSS-reset, далее я должен оставлять отступы у списков, бордеры у таблиц и т. д. , но мне так неудобно верстать, да и не только мне, я привык сначала обнулять все свойства, а потом переопределять мне необходимые.

Единственное с чем я могу согласится, это со сравнением Скрина с макетом, что-бы была попиксельная вёрстка и с заголовками, которые должны быть все по порядку(размера)

Edited September 9, 2009 by psywalker

[Searcher]

Погоди, тоесть я всё сделал правильно? А текст так должен выглядеть при отключённых стилях или нет?

Я кажется всё понял, но не согласен с этим, потому что это означает, что я должен прекратить пользоваться CSS-reset, далее я должен оставлять отступы у списков, бордеры у таблиц и т. д. , но мне так неудобно верстать, да и не только мне, я привык сначала обнулять все свойства, а потом переопределять мне необходимые.

Единственное с чем я могу согласится, это со сравнением Скрина с макетом, что-бы была попиксельная вёрстка и с заголовками, которые должны быть все по порядку(размера)

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

не уверен, что в данной ситуации это необходимо, но в работе это обязательно.

[psywalker]

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

не уверен, что в данной ситуации это необходимо, но в работе это обязательно.

Что-то я не понимаю смысла этого дела, ведь изначально у меня например у списка обнулены отступы, а что же теперь получается, я должен специально ради примера убрать отступы у нового списка, что-бы он выглядел также, как на картинке?

[Searcher]

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

[psywalker]

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

Я тебя понял дружище, но давай подведём итоги:

1) Изначально я как обычно сбрасываю все отступы и т. д.

2) Для всех меню, заголовков и пр. который могут появиться на странице, я делаю нужные отступы и т. д.

3) Для моих конкретных меню, заголовков я пишу стили, которые перебивают стили пункта 2

[aseran]

Я тебя понял дружище, но давай подведём итоги:

1) Изначально я как обычно сбрасываю все отступы и т. д.

2) Для всех меню, заголовков и пр. который могут появиться на странице, я делаю нужные отступы и т. д.

3) Для моих конкретных меню, заголовков я пишу стили, которые перебивают стили пункта 2

Изначально reset.css служит для придания свойст множества браузеров к единым - т.к. по умолчанию у каждого браузера своя таблица стилей

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

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

[psywalker]

Изначально reset.css служит для придания свойст множества браузеров к единым - т.к. по умолчанию у каждого браузера своя таблица стилей

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

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

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

Приведи пожалуйста пример

[aseran]

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

Приведи пожалуйста пример

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

т.к. каждый элемент html имеет свой стиль отображения.

ты прочилал статью на хабре? или нет? думаю должно быть все понятно (смотри внимательно коментарии к данной теме)

ты же пробовал вставить контент (с сайта на котором фреймворк), вложенные списки у тебя без необходимых отступов и т.п.

Если ты еще не совсем понимаешь зачем все это, то если ты будешь практиковать верстку в будущем

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

если ты прописываешь стили для параграфа <p></p> не факт что заказчик тоже будет вставлять текст именно в параграф

если он вставит таблицу(которой изначально не было в дизайне - но очень захотелось заказчику вставить)

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

Но думаю со временем ты научишься беречь свое время .

Edited September 11, 2009 by aseran

[psywalker]

аа, я кажется понял, в чём смысл всей этой затеи, походу дело в том, что нужно думать, когда обнуляешь стили и какие именно, как пример: Стили таблицы можно обнулять максимум Паддинг 0, а бордеры оставить для таких случаев с заказчиком, тоже самое касается и заголовков например, не делать их все 10пк, а оставить какими они и должны быть. Вобщем первоночальная задача обнулить всё с умом, я прав? А далее уже вешать и переназначать стили тем элементам, которые необходимы именно для моей вёрстки, а дефолтовые стараться не трогать по максимуму?

[aseran]

аа, я кажется понял, в чём смысл всей этой затеи, походу дело в том, что нужно думать, когда обнуляешь стили и какие именно, как пример: Стили таблицы можно обнулять максимум Паддинг 0, а бордеры оставить для таких случаев с заказчиком, тоже самое касается и заголовков например, не делать их все 10пк, а оставить какими они и должны быть. Вобщем первоночальная задача обнулить всё с умом, я прав? А далее уже вешать и переназначать стили тем элементам, которые необходимы именно для моей вёрстки, а дефолтовые стараться не трогать по максимуму?

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

Но тут В общем непаханое поле как это можно организовать - на все воля верстальщика )))

[psywalker]

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

Но тут В общем непаханое поле как это можно организовать - на все воля верстальщика )))

Ага, я понял, вобщем тогда так:

1) Я обнуляю все стили, делая глобальный сброс

2) Я переназначаю дефолтовые стили, что-бы всё выглядело так, как во фреймворке, если вдруг заказчик захочет наполнить сайт сам

3) Я переназначаю стили тем элементам, которые мне необходимо сверстать, тоесть вешаю им отступы, бордеры, да и вообще всё то, что им нужно

Итог:

У меня вёрстка выглядит также как на макете, но при этом если я поставлю в контент например какой нибудь список, то он и будет выглядеть как положено, с отступами и вобщем как во фреймворке?

Отдельный вопрос:

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

http://psywalker.ru/SAITS/First-Orange/css/styles.css

Edited September 11, 2009 by psywalker

[DjTarik]

Отдельный вопрос:

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

http://psywalker.ru/SAITS/First-Orange/css/styles.css

- все очень даже круто - как html, так и стили... А сколько времени уходит на такую верстку? В часах...

[psywalker]

- все очень даже круто - как html, так и стили... А сколько времени уходит на такую верстку? В часах...

Вот в том то и дело, что круто это только походу для тех, у кого опыта не очень много в этом деле, а как видишь, когда мою вёрстку смотрят эксперты, сразу выплывает 1000 ошибок, так что видимо ничего крутого, раз такие дела!

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

[DjTarik]

Вот в том то и дело, что круто это только походу для тех, у кого опыта не очень много в этом деле, а как видишь, когда мою вёрстку смотрят эксперты, сразу выплывает 1000 ошибок, так что видимо ничего крутого, раз такие дела!

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

Находят ошибки - потому что без ошибок анрил сделать) Всегда кто-то найдет к чему придраться. Хотя именно это и подстегивает делать качественне.

И все таки - сколько времени на верстку тратишь? В среднем... Если делать качественно.

P.S. Просто на студиях так не верстают... )

[psywalker]

Находят ошибки - потому что без ошибок анрил сделать) Всегда кто-то найдет к чему придраться. Хотя именно это и подстегивает делать качественне.

И все таки - сколько времени на верстку тратишь? В среднем... Если делать качественно.

P.S. Просто на студиях так не верстают... )

1) Такой макет я бы сверстал за день, за 10-12 часов наверно

2)

P.S. Просто на студиях так не верстают... )

Вот это можно поподробнее пожалуйста?

[DjTarik]

2)

Вот это можно поподробнее пожалуйста?

=) Я пришел работать на одну Минскую веб студию, и разочаровался в том, как там относятся к верстке. (Хотя я и сам новичок =)

Можем поболтать как-нить по аське, когда найдется свободное время... Напиши свой номерок...

[aseran]

Ага, я понял, вобщем тогда так:

1) Я обнуляю все стили, делая глобальный сброс

2) Я переназначаю дефолтовые стили, что-бы всё выглядело так, как во фреймворке, если вдруг заказчик захочет наполнить сайт сам

3) Я переназначаю стили тем элементам, которые мне необходимо сверстать, тоесть вешаю им отступы, бордеры, да и вообще всё то, что им нужно

Итог:

У меня вёрстка выглядит также как на макете, но при этом если я поставлю в контент например какой нибудь список, то он и будет выглядеть как положено, с отступами и вобщем как во фреймворке?

Отдельный вопрос:

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

http://psywalker.ru/SAITS/First-Orange/css/styles.css

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

[psywalker]

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

А почему не практично тогда?

[aseran]

А почему не практично тогда?

Это моя точка зрения, я рассматриваю этот вопрос с практической стороны

все исходит из затраченного времени, но если тебя это не напрягает

то это твой стиль оформления,

я когда-то думал что красиво оформленный код - это круто - но это лишь юзабилити.

Так что на мой взгляд хватит под робных разделений коментами с идеентичными названиями в (x)html и css

[Searcher]

Имхо, psywalker все правильно делает. Лучше сейчас немного времени затратить на порядок в коде, чем потом долго разбираться тыкая пальцем в небо, где и что прописано, что наследуется и т.п. Заказчики почти всегда снова обращаются для модернизации сайта, добавления чего-то и т.п. Так что лучше оставить якоря для быстрого осознания кода. Видимо это понимание не сразу приходит, только с опытом. Я не раз смотрел на собственный код сделанный полгода назад как баран на новые ворота. Тратил время на разгребание идентификаторов. К тому же часто используется не один стиль для объекта а два, иногда и три... Поди пойми, что там и как сплелось в свойствах...

Тут только грамотное пояснение в стилях помогает быстрее разобраться. Так что у psywalker отличный код с точки зрения понимания что куда применилось.