Верстка №2 Оранжевый Банк

[LESTAD]

Тему не могу создать в нужном разделе, просьба перенести.

Верстка №2, просьба отписываться, любая мелочь - сердцу дорога.

Особенно, хотелось бы услышат тех кто критиковал прошлую работу, в том смысле - есть ли у меня прогресс или нет.

Макет взят из этой темы: http://forum.htmlbook.ru/index.php?showtopic=14398

Сверстан по требованиям:

1. Резиновый дизайн под мин. разрешение 1024х768 и до бесконечности.

2. Использование таблиц, блоков - на усмотрение верстальщика (продвижение будет покупаться) - главное 100% аутентичность.

Верхнее меню с картинками о Кредитных линиях тоже тянется, ширина подложек зависит от ширины экрана.

3. Использованные шрифты: Tahoma / Miryad Pro (regular) - только в лого.

Хочу сказать, что буду рад всем советам, так как это моя вторая верстка и первая резина... .

Готовую верстку смотрим здесь: http://clan-lh.ru/werstka/orang/index.html

Валидность проверил... .

Жду кучу комментариев... .

[PanSoul]

Есть косяки, при просмотре, что сразу бросилось в глаза - это когда изменяешь размер браузера, дергается меню (чуть-чуть раздрожает ) А, ну и циферки в телефоне (которые в скобках) почему-то такого же размера как и остальные, хотя должны быть меньше. И кое-где <img> необдуманно вставлены, их лучше было бы "засунуть" в background

P.S. не знаю было ли дополнительным условием - соблюдение модульной сетки?!

ну в ИЕ6 проблемки есть, Но если на него акцента не было, то всё нормуль

[LESTAD]

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

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

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

Огромное спасибо, пропустил, исправил.

И кое-где <img> необдуманно вставлены, их лучше было бы "засунуть" в background

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

P.S. не знаю было ли дополнительным условием - соблюдение модульной сетки?!

Все условия я написал в первом посте.

ну в ИЕ6 проблемки есть, Но если на него акцента не было, то всё нормуль

Под 6 ослика не ставил задачи, и принципиально не буду... Пускай он уже умрет.

Проверял на Опере, хроме, Фаерфоксе, ИЕ, Сафари. Пытаюсь учится кроссбраузерности, без хаков.

[LESTAD]

Обращаюсь к многоуважаемые мною swetlana, psywalker, LunatiK, мне очень нужны ваши оценки и критика моей работы... Прошу вас и всех, не безразличных к судьбе начинающего верстальщика, дать оценку, и показать ошибки, плюс мне надо направление куда дальше читать... и куда развиваться. Я очень сильно жду, всех возможных комментариев. Не ужели все на столько плохо, что мне да же никто ничего не хочет писать...

Edited April 15, 2011 by LESTAD

[psywalker]

Обращаюсь к многоуважаемые мною swetlana, psywalker, LunatiK, мне очень нужны ваши оценки и критика моей работы... Прошу вас и всех, не безразличных к судьбе начинающего верстальщика, дать оценку, и показать ошибки, плюс мне надо направление куда дальше читать... и куда развиваться. Я очень сильно жду, всех возможных комментариев. Не ужели все на столько плохо, что мне да же никто ничего не хочет писать...

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

Думаешь игра стоит свеч, не обидишься потом?

p.s. Вот Светлана появится, пятёрку тебе сразу поставит, она у нас добрая

[LESTAD]

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

Будешь очень жестким, и шарящим заказчиком

Да и если, не ты то кто? Я именно по твоему совету учусь, в том смысле, что в том направлении которое ты мне задал. Лучше приходить к пониманию, + исправлению ошибок, + пополнению простейших недостающих знаний, на стадиях обучающей верстки, чем потом в бешенстве рыть кучи материала.

[psywalker]

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

Будешь очень жестким, и шарящим заказчиком

Да и если, не ты то кто? Я именно по твоему совету учусь, в том смысле, что в том направлении которое ты мне задал. Лучше приходить к пониманию, + исправлению ошибок, + пополнению простейших недостающих знаний, на стадиях обучающей верстки, чем потом в бешенстве рыть кучи материала.

Ну ок, смотри сам. Тогда будет время, прокомментирую обязательно.

[LESTAD]

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

[swetlana]

прошу прощения, у меня тоже был цейтнот, даже не почитать толком форум было.

Только вот про пятёрку Макс ошибся.

Тут особо не за что ставить пятёрку.

С одной стороны, вроде как всё работает — а это главное.

С другой стороны код какой-то при этом… бывает и лучше, в общем.

Удивило безумное количество id. Зачем? Хотя это быстро проходит, если делать не абстрактную вёрстку, а живые сайты. Интегрировать свою вёрстку с cms, а затем поддерживать сайт, меняя компоновку под вносимые практикой коррективы. Пару раз словишь косяки с несколькими одинаковыми id и запутавшимся в них js например — и вопрос насчёт целесообразности использования id в оформительских целях снимается.

Меню набором дивов с одинаковыми классами… не сказать, что это прямо явная ошибка, но как-то некошерно.

<img> для чисто оформительских целей — например, иконки в меню — сомнительное решение. Фоном было бы уместнее.

Хотя <img> более оправдан, если планируется, что разделами будет управлять секретарша с доступом на специальную страничку в админке cms.

Но рамка фоновой картинкой удивила.

Использование position: absolute тоже удивило. Я, кстати, до сих пор не понимаю — зачем?

Спрятанный под каким-то из блоков телефон тоже удивил.

Перечислить случаи, когда номер телефона нужно скопировать, можно. А вот скопировать его почему-то нельзя. Почему?

И, кстати, почему <sup> выскочил не по макету? Выглядит откровенно коряво.

Это первое впечатление.

Если нужны пояснения — не вопрос, сделаю. Только какие пояснения? Будут вопросы — отвечу.

[LESTAD]

1

Удивило безумное количество id. Зачем? Хотя это быстро проходит, если делать не абстрактную вёрстку, а живые сайты. Интегрировать свою вёрстку с cms, а затем поддерживать сайт, меняя компоновку под вносимые практикой коррективы. Пару раз словишь косяки с несколькими одинаковыми id и запутавшимся в них js например — и вопрос насчёт целесообразности использования id в оформительских целях снимается.

По поводу ID, есть же проверка валидности которая ловит такие огрехи как одинаковые ID. Я согласен, что с опытом все изменится, но вот не знаю сейчас мне показалось это уместным, может потому что я еще не чувствую уверенности в каждом действии. Но был бы рад услышать, как правильно было бы, именно по этому жду с нетерпением ваших ответов, вот здесь уже нужны разъяснения. Так как, я понял использовать ID надо там где будет он использован единожды, так и старался, мне кто то писал тоже что вы про ID, только про Class.

2

Меню набором дивов с одинаковыми классами… не сказать, что это прямо явная ошибка, но как-то некошерно.

Я так понял вы про центральное меню, я честно не рассматривал его как меню... . Надо сделать списками? Я так понимаю, так же правильно?. Жду вашего ответа... . Если правильно списками, буду переделывать.

3

<img> для чисто оформительских целей — например, иконки в меню — сомнительное решение. Фоном было бы уместнее.

Хотя <img> более оправдан, если планируется, что разделами будет управлять секретарша с доступом на специальную страничку в админке cms.

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

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

4

Но рамка фоновой картинкой удивила.

Использование position: absolute тоже удивило. Я, кстати, до сих пор не понимаю — зачем?

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

5

Спрятанный под каким-то из блоков телефон тоже удивил.

Перечислить случаи, когда номер телефона нужно скопировать, можно. А вот скопировать его почему-то нельзя. Почему?

И, кстати, почему <sup> выскочил не по макету? Выглядит откровенно коряво.

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

6

Это первое впечатление.

Если нужны пояснения — не вопрос, сделаю. Только какие пояснения? Будут вопросы — отвечу.

ВОт вопросы обозначил, конкретно 1, 2, 3 пункты(очень хочется разъяснений), спасибо за критику.

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

Edited April 16, 2011 by LESTAD

[Serlutin]

1) По поводу id. Есть два немного отличающихся мнения. Первый — кардинальный. Это отказаться от использования id вообще, где это возможно (остаются только формы и ссылки-якоря). Смысл в том, кодеру возможно понадобиться навесить на какой-либо элемент id, для того, чтобы привязать его к скрипту. Возможно кодер имеет свои предпочтения в работе, когда он каждый id именует одной буквой алфавита. Однако если верстальщик нависил кучу id на элементы, то ему придётся внимательно следить за именованием, да и ещё пытаться не сломать стили. Второй вариант — более свободный. Он подразумевает использование id только для основных частей: шапка, боковые панели, подвал. Причём контейнер основного контента обычно стилизуют с помощью классов, мало ли что.

К тому же у вас есть явная ошибка. В коде id="Header", а в css #header. Имена id и классов — регистрозависимые. Хотя может быть это хак для ie? И ещё у вас у многих элементов схожие названия. Нет, я понимаю, что это дело каждого, как назвать блоки, хоть двумя буквами, но всё же при таком наименовании есть большая вероятность спутать #header и #headerz. Рассмешило назавание #osnoval. Я не сразу догадался, что это osnova-left. Кстати, чисто логически это не основа, а sidebar.

По поводу ID, есть же проверка валидности которая ловит такие огрехи как одинаковые ID.

Одно дело, когда верстаешь одну страничку, но совсем другое, когда страница формируется с помощью CMS. Может так случиться, что вместе встретятся два блока с одинаковым id. Например, тот же блок #kreditline, вдруг будет страница, которая будет состоять из повторов одного блока.

Меню набором дивов с одинаковыми классами… не сказать, что это прямо явная ошибка, но как-то некошерно.

Тут как раз это приемлемо. Как вариант можно было сделать списком, но однако такой вариант тоже имеет право на существование. Использование классов, позволяет потом в блоке использовать вложенный див, если потребуется. Ещё вариант, забить на ie6 и использовать #kreditline > div.

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

Тег img принято использовать, когда картинка непосредственно относится к тексту. Фотография, иллюстрация, схема ит.д. Всё, что относится к дизайну, должно выноситься в css. Проверить можно так: отключить css в браузере. Не должно остаться ничего дизайнерского.

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

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

Edited April 16, 2011 by Serlutin

[swetlana]

1

По поводу ID, есть же проверка валидности которая ловит такие огрехи как одинаковые ID. Я согласен, что с опытом все изменится, но вот не знаю сейчас мне показалось это уместным, может потому что я еще не чувствую уверенности в каждом действии. Но был бы рад услышать, как правильно было бы, именно по этому жду с нетерпением ваших ответов, вот здесь уже нужны разъяснения. Так как, я понял использовать ID надо там где будет он использован единожды, так и старался, мне кто то писал тоже что вы про ID, только про Class.

А тут дело не в валидности.

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

И для одной тестовой страницы это вполне допустимо.

Дело действительно именно в дальнейшей работе с этой вёрсткой.

2

Я так понял вы про центральное меню, я честно не рассматривал его как меню... . Надо сделать списками? Я так понимаю, так же правильно?. Жду вашего ответа... . Если правильно списками, буду переделывать.

А тут нет чётких правил, разработчику оставлено принимать самому решение, как правильно именно в данном случае.

Просто <div> — это какой-то совсем уж безликий элемент. А это явный навигационный блок.

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

Кстати, а чем обоснован выбор доктайпа?

3

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

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

Тут уже Serlutin всё рассказал. Да так, что и добавить нечего.

Действительно, вся оформительская чуть идёт фоном. Содержательные изображения, такие как иллюстрации к статьям, ставятся в <img>.

[LESTAD]

Serlutin и swetlana Огромное спасибо за пояснения.

ID header подправил.

Я уже 4 раза перечитал ваши ответы, вот наверное для таких пояснений и создавал эту пробную верстку, по поводу ID, с таким примером, как формирования странички CMS, все стало на свои места.

Про img все тоже теперь как 2 * 2, дальнейшее их использование не по назначению уже можно будет считать за мою ошибку.

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

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

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

Еще раз ОГРОМНЕЙШЕЕ СПАСИБО, за такие разъяснения.

Edited April 16, 2011 by LESTAD

[psywalker]

3

Просмотр сообщенияswetlana (16 апреля 2011 - 03:30) писал:

<img> для чисто оформительских целей — например, иконки в меню — сомнительное решение. Фоном было бы уместнее.

Имхо, это гонево. Если идёт речь про меню #kreditline, то картинки в структуре там вполне уместны. Там они относятся к тексту, но никак не для оформительских целей. Такие пункты, если их очень много, заставляют многих вешать разные классы для своих фоновых картинок, что является абсолютно лишним и неоправданным поступком в данной ситуации.

p.s. Я бы поднял этот вопрос на общем собрании!

[swetlana]

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

а вот это, кстати, в корне неверно.

xhtml в принципе создаёт рамки только формальные, и его жёсткость не имеет особого смысла.

Особенно strict.

Вот примеры жёсткости:

нельзя картинку без alt. Почему?

нельзя ссылкам target. Почему?

обязательно type для <script>. А часто бывают скрипты иные, чем js? Чаще одного процента от всех? Тогда почему не принять js типом скрипта по умолчанию?

обязательно type для <style>. А бывают стили иные, чем css? А тогда почему надо их тип указывать?

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

обязательно xmlns. А зачем?

Все те зачатки осмысленности набора тэгов, которые есть в xhtml, заимствованы из html4. Расширение набора тэгов чревато некоторыми сложностями. В результате используется оно очень и очень редко. В серьёзных проектах — никогда. Тогда зачем?

Можно ещё множество вопросов «почему» и «зачем» задать. А ответы на них есть?

Только не отмазки в духе некрософта, объясняющего, почему у них браузер не работает, а настоящие ответы.

Ответов нет. Потому что этот стандарт разрабатывался консорциумом, имеющим весьма косвенное отношение как к разработке браузеров, так и к разработке сайтов.

Взгляды W3C — это теория, не подтверждённая практикой. В ней может и есть что-то правильное, но не для нашей основной задачи — не для создания сайтов для жизни.

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

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

Аналогичный вопрос: согласно ПДД на красный свет светофора нужно стоять. Стоите на светофоре, и прямо в бок летит жена депутата с тонированными стёклами. Варианты: уехать на красный свет с опасного места или соблюсти формальные академичные правила и принять на себя сначала удар двух тонн дурости, а затем год ходить по судам, доказывая, что не верблюд. Какой правильный?

[Gaspode]

нельзя картинку без alt. Почему?

Чтобы юзер, отключив картинки, не кусал локти в попытках понять, что же там на картинке было =)

нельзя ссылкам target. Почему?

Ну нехорошо пользователю навязывать открывание новых окон/вкладок. Он сам вполне в состоянии решить. Так что это хороший тон, не более. Хоть и навязанный

[psywalker]

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

а вот это, кстати, в корне неверно.

Опять же не соглашусь. Для того, чтобы научится что-то делать хорошо, нужно для начала побегать с тяжёлой амуницией, зато потом в бою будет намного легче. И это относится не только к армии, но и к вёрстке тоже. Проверено на себе.

swetlana

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

LESTAD

Отлично мужичелоо, делашь всё верно, гланое не сдавайся, я за тебя.

[swetlana]

Чтобы юзер, отключив картинки, не кусал локти в попытках понять, что же там на картинке было =)

А теперь о том, как на самом деле: большинство картинок не несут в себе ключевого смысла. Отключив картинку, чаще всего не теряем ни грамма смысла.

Например: статья рассказывает о введении безвизового перехода из РФ в США по туннелю под Беринговым проливом. Иллюстрация — здание посольства на Новинском бульваре в Москве.

Отключив эту картинку мы потеряем хоть долю смысла?

А если вместо картинки написать «посольство сша», то как это впишется в суть статьи?

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

Ну и посмотрите код действующих сайтов. Такая конструкция как alt="" встречается очень часто. Почти на каждом сайте, использующем xhtml. Зачем? Просто лишние буквы, не несущие никакого смысла.

Ну нехорошо пользователю навязывать открывание новых окон/вкладок. Он сам вполне в состоянии решить. Так что это хороший тон, не более. Хоть и навязанный

А теперь о том, как на самом деле: возможность открывать страницу в отдельной вкладке нужна.

Например, пишем сообщение на форум, забываем определённый bb-код, хотим посмотреть в справку, нажимаем на соответствующую ссылку, и … теряем то, что было в поле уже выбрано?

Этот пример немного надуманный. Кто знает о том, что такое справка, тот обычно и про cmd+клик знает.

В реальности чаще встречаются требования открывать все ссылки с баннеров в отдельных окнах. И требование это не с потолка. Конечный пользователь отнюдь не всегда способен сам решить, где ему открывать ссылку. Только вот W3C таких не видело потому что не делает сайты для блондинок, а варится в какой-то своей среде.

В общем, и любые их объяснения подобные приведённым вами примерам: оторванные от жизни.

[Gaspode]

В общем, и любые их объяснения подобные приведённым вами примерам: оторванные от жизни.

Меня бесит, когда сайты начинают плодить не нужные мне вкладки - что может быть более приземлённым? У меня десятка полтора вкладок открыто, и я должен потом выискивать, с какой на новую перешёл. Я сделаю шифт-клик, если приспичит открыть вкладку, или нажму ссылку скроллером.

ольшинство картинок не несут в себе ключевого смысла

Таким картинкам место на бэкграунде, а не в разметке.

Отключив эту картинку мы потеряем хоть долю смысла?

Я могу захотеть подгрузить одну картинку и посмотреть на посольство США. Таки нереальная ситуация? Я три года сидел на 35 мегабайтах в неделю, мне ли не знать.

Edited April 16, 2011 by Gaspode

[LESTAD]

Спасибо за вашу дискуссию, а можно не спорить и просто высказать свое мнение, мне каждое мнение дорого так как это 100% опыт, личный для каждого из вас. Я вот вообще не понимаю зачем картинки отключать, но вот такой довод как 35 мегабайт в неделю, это действительно довод.

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

[swetlana]

у гиков немного особенные потребности

и это нерепрезентативная выборка.

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

А кто не знает о том, как правильно, должен получать один вариант — ожидаемый.

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

И да, по своему мироощущению не надо судить о потребностях заказчиков.

Но хотя споры тут не уместны. Кто живёт в реальном мире, мысль уловил. Переубеждать гиков же — дело ненужное, да и почти невозможное.

[psywalker]

Спасибо за вашу дискуссию, а можно не спорить и просто высказать свое мнение, мне каждое мнение дорого так как это 100% опыт, личный для каждого из вас. Я вот вообще не понимаю зачем картинки отключать, но вот такой довод как 35 мегабайт в неделю, это действительно довод.

А ты будь хитрее, тихонько сиди и извлекай из спора истину

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

Будет время, придерусь, не парься

[Gaspode]

По поводу вёрстки, если мне позволено будет вякнуть. Бросается в глаза обилие <div id="что-то">. Надо думать о возможности замены на что-нибудь другое. Скажем, менюшка под "Кредитной линией на любой вкус" - чем не список?

offtop

Я чо-т тоже на этот макет залип. Наверно, выложу завтра.

/offtop

Вот ищо мелочишко:

<p>Многоканальный телефон в Москве: +7 (499) 234-56-78<br />
Электронная почта: <a href="#">info@hrstorange.ru</a></p>

br - это не труЪ.

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

Edited April 16, 2011 by Gaspode

[LESTAD]

По поводу вёрстки, если мне позволено будет вякнуть. Бросается в глаза обилие <div id="что-то">.

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

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

то же уже обсудили - вердикт моя схема то же может жить.

Вот ищо мелочишко:

<p>Многоканальный телефон в Москве: +7 (499) 234-56-78<br />
Электронная почта: <a href="#">info@hrstorange.ru</a></p>

br - это не труЪ.

Можно узнать почему?? Я же не в оформительских целях его использовал, а для переноса строки (используется в HTML именно для этого), почему он тут не уместен?

П.С. Мой маленький совет, кода делаете свою верстку, мне кажется лучше другие не смотреть, так как теряется тот самый интерес - в набивании шишек. Хотя, может у каждого свой подход, но да же взглянув краем глаза на чужую верстку, вы уже знаете примерный вид решения.

[Gaspode]

Я же не в оформительских целях его использовал, а для переноса строки (используется в HTML именно для этого), почему он тут не уместен?

Ну... Капитан Очевидность не может не заметить, что перенос строки - это и есть оформительская цель. А ну как я захочу их в одну строку уложить?

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

Мой маленький совет, кода делаете свою верстку, мне кажется лучше другие не смотреть, так как теряется тот самый интерес

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