Верстка макета. Как правильно сверстать?

Question

[gleendo]

В общем продолжаю учиться верстке. Появились опять неясности. вернее незнание как правильно.

1) Главная навигация (вверху). Там как я понял 5 блоков. Лого, "левое" меню, блок поиска, "правое" меню, блок кнопки входа. Как это все лучше разметить? и как лучше спозиционировать? и как разметить блок поиска правильно?
Вот навигация:

Вот так я вот разметил, хз вот как знаю:

У меня в голове, сложилось так что просто нужно указать каждому блоку фикс ширину и сделать флоаты. первые 3 влево, остальные вправа. Но хз правильно ли это.? И если это так, то как определить каждому блоку ширину?

2) Вот этот блок с логотипами.

Как его верстать? Как разметить? как размеры и отступы просчитать? (в макете прост нет гриды и направляющих)

3) Фон в этом блоке (картинка компьютера):

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

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

Вот макет psd если что - https://cloud.mail.ru/public/26Ej/G84YRu6Gp
Помогите пожалуйста советами что да как.

Comments

[gleendo]

Александр А: всм? поподробнее о чем это вы?

Answer 1

[Cyber_bober]

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

Comments

[gleendo]

1. Как именно сверстать блок поиска? Каким тегом?
2. Например ширина центровщика в макете - 1140px, логотипов 4, ширина у самих картинок логотипов разная, как правильно указать отступы и размеры для блоков логотипов. и как позиционировать картинки?
3. А картинка это прост картинка, декоративный элемент, думаю это прост фон, ничего там меняться не будет.

[Cyber_bober]

con_: 1. search-icon 2. порезать на равные по ширине блоки в jpg и юзать их 3. ну тогда вставляйте склеенный.