binomer

http://codepen.io/tavira/pen/JYmNqN

По ссылке вёрстка одной страницы и самую малость JS для разнообразия. Совсем малость

Посмотрите, пожалуйста....скажите, что хорошо, что плохо.

В данный момент - самый главный косяк в том, что вёрстка поедет, если добавить много текста. Но, в общем-то, это не совсем тот случай, когда за этим надо следить.

Также отметил трудность в организации вёрстки. Посколку есть два одинаковых объекта по сути, но для каждого из них надо задавать разные свойства.

Не ставьте на фон просто картинки по 5Mb и всё. 

А цвет и вместе с картинкой можно поставить.

Так не делаю (по 5 мегабайт). Про цвет вместе с картинкой знаю. То есть, так заморачиваться сейчас смысла не имеет, вы считаете?

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

1. Возникло предположение отталкиваться от размеров экрана (media queries). Но те же телефоны можно использовать на улице с мобильным интернетом, а можно дома с достаточно быстрым беспроводным соединением. С другой стороны, все же можно говорить, что чем меньше экран, тем проще надо отдавать версию страницы.

2. Дальше атрибут media="handheld". Но на хабре прочитал, что этот атрибут может не поддерживаться современными устройствами.

3. Также можно написать спец. мобильную версию и предоставить пользователю выбор.

4. Определение UserAgent. Но насколько я понял, это можно сделать только на JS или на сервере с помощью PHP. Я прав или нет?

5. А еще есть Яндекс.Детектор, документация которого не обновлялась с 2010 г.

Вообще, расскажите, есть ли смысл так заморачиваться и как надо правильно делать?

Опять не по теме. Но в Crome Canary 38 появилась встроенное тестирование адаптивной верстки, пожалуй, даже удобнее, чем в нынешнем Firefox.

В Firefox жмакаешь "Ctrl + Shift + M" - открывается панель адаптивного дизайна, можно менять размер области отображения. А в левом верхнем углу появляются цифры, которые отображают ширину и высоту этой области.

Так вот, я только что заметил, что там цифры неправильные. Задал фиксированную ширину блоку 1600px, начал уменьшать область. Когда стала видна только эта область, то Firefox мне показал, что около 1450px вместо 1600px. Я подумал, что за дела, может быть, я что-то где-то забыл или пропустил ошибку. Но нет. Скачал расширение для браузера (Resizer) и оно мне показало именно "правильные" 1600, а не меньше или больше.

Что я делаю не так?

Отдельный блок. И БЭМ тут вовсе не причем.

Да это-то да. Я просто задумался об этом, когда читал о нем.

 

binomer

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

2) а какой?

3) ну там не беспорядочно, верхний блок, три нижних : левый и правый прижаты к краях и средний по центру. Меню в одну колонку никак не влезет, может только если отступ сократить

2. Ну какой, какой..НЕнаклонный)))

3. По футеру лишь мои впечатления. Я бы меню сделал покрупнее размером. Как выше заметил Struggle, специалистом не являюсь, поэтому...

 

Вообще неплохо. Только мне не нравится:

1. Логин, пароль и поиск ПОД меню

2. Наклонный шрифт в колонках новостей ("Новости дилеров" и т.д.)

3. И в подвале бы убраться неплохо. На мой взгляд там все разбросано беспорядочно

 

Ты мастер юзабилити ?

 

Товарищ просил поделиться впечатлениями, я поделился. Что-то не так?

Вообще неплохо. Только мне не нравится:

1. Логин, пароль и поиск ПОД меню

2. Наклонный шрифт в колонках новостей ("Новости дилеров" и т.д.)

3. И в подвале бы убраться неплохо. На мой взгляд там все разбросано беспорядочно

Почитал про БЭМ в очередной раз. И задумался над одной вещью. Пусть у нас есть несколько блоков на странице. У каждого блока есть заголовок. Заголовки одинаковые. То есть их можно описать одними и теми же CSS-правилами.

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

либо ты уже исправил, либо ничего вверх или вниз не прыгает. Посмотрел в Firefox, Opera, Chrome

Где вы там вообще классы нашли?

Можете почитать http://ruschema.org/ может понятнее будет.

 

 

Там же с примерами даже http://ruschema.org/docs/gs

Упс. Спасибо. И правда, это к классам отношения не имеет.

Искал внятное объяснение, но не нашел.

Суть проблемы. Зашел на schema.org, там, конечно же, для много каких штук есть разметка. Совершенно определенная. Я правильно понимаю, что это добавление классов с определенными названиями в документ HTML. Или делают по-другому?

И еще, наверное, вешать оформление на эти классы неправильно? То есть к уже существующим, сверстанным на странице элементам надо добавить пару классов?

Конкретно об этих не скажу, но сокращённые свойства margin и padding были применены к одному блоку по 2 раза с разными значениями. Точно помню, у одного блока был margin: 0 и двумя строчками ниже снова margin, но уже со значением auto. И это далеко не первый случай, когда я видел подобное. Это как-то объясняется? Или невнимательность верстальщика?

Я-то не знаю, но мне кажется, что это не имеет смысла. Применяется свойство, которое находится ниже.

 

Блин, как назло сейчас не могу найти те сайты. Но значит это ошибки все-таки? 

 

 Ты вот это имеешь ввиду?

margin-right: 5px;

margin-right: 30px;

смотря вёрстки других людей, я заметил, что многие к одному блоку применяют сразу несколько значений padding и margin. Зачем и почему? Спасибо.

 

 

О_о, в смысле несколько? Можно пример?

ребят, хоть пару комментариев по поводу самых грубых ошибок, можно?

Почему у тебя в блоке комментариев ВК ни одна ссылка не работает. Вернее, это походу вообще не ссылки

Все так и есть. Ты не писала, а я посмотрел сам..

 

Для тэга pre margins заданы 16px. Левый вы поменяли. Чтобы решить вашу проблему поставьте margin-bottom: 0;

Спасибо большое за ответ и за помощь. Только я не поняла где вы увидели в тэге pre margin 16px, у меня тэге pre margin-left: 390px.

 

Я же сказал. Левый у вас стал 390px, а вот margin-top и margin-bottom были равны 16px. Это я посмотрел в Firebug (в JsFiddle сделал вашу страницу). Вот по таким причинам и неплохо пользоваться reset CSS, normalize CSS - обнулять все стили или приводить их к единству во всех браузерах.

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

 

Никак не могу найти где эти отступы задаются, т.к и у тега html и * и у body поставил маргин и паддинг=0

 

но отступ все равно остался. Тестовый сайт http://rlfur.ru/

 

для того чтобы увидеть отступы сузьте монитор до 990 и увидите скрол, хотя у сайта задана ширина как раз 990 http://prntscr.com/31eknu.

 

На айпадах также видно http://prntscr.com/31ek3d, что сайт справа не прижат к краю справа, чего быть не должно как бы.

 

А ты не забываешь про полосу вертикальной прокрутки?

Для тэга pre margins заданы 16px. Левый вы поменяли. Чтобы решить вашу проблему поставьте margin-bottom: 0;

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

Как известно, фиксированная высота - чаще всего плохо

Фон нормальный, но скролл все равно есть...

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

background: url('../img/bg_bod.png') no-repeat;background-size: cover;max-width: 1912px;min-width: 1000px;

Не получается... Вот ссылка на мой фон

 

Я не про cover говорил, а вообще... что неплохо бы задать ширину

Спасибо всем за советы.

Исправлено:

1. Фоновое изображение поделено на части, избавлено от фиксированной высоты

2. Клеарфикс теперь, как и положено, применяется для родителя блока с float