Хорошо)
Готово!
http://codepen.io/temi496/pen/YWQEKr.html
http://codepen.io/temi496/pen/YWQEKr.css
Правда не получилось выровнять страницу по центру браузера, множество способов перепробывал о которых пишут, либо отображаеться некоректно, все блоки сьезжают, либо ничего не происходит, либо при маштабировании страницы в браузере пропадает низ/верх…
В codepen не показывает ваши картинки.
В самом начале хотелось бы отметить интересный подход с комментированием открывающих и закрывающих тегов. В редакторах есть функция сворачивания фрагментов кода, но такое обозначение тоже может быть полезно.
А теперь всё же пройдемся по ошибкам (не все конечно, но то что видно сразу):
- Названия классов. Надписи транслитом (.spisok), надписи без какого-либо смыслового содержания (типа .gg, .sq, .sg, .k1…) - это плохо. Если вы не можете придумать названия, воспользуйтесь списком наиболее часто используемых:
https://github.com/yoksel/common-words - Язык документа
<html lang="en">, всё-таки страница на русском (за исключением кнопки search) - Центрирование. За выравнивание по центру у вас отвечает блок .global. Для него можно написать margin: 0 auto;. Но тогда необходимо, чтобы ширина body была больше чем у .global.
- Поле поиска. Всё-таки оно должно присутствовать, хотя бы его разметка,
<input type="text">или<input type="search">и кнопка отправки<input type="submit>или<button type="submit">(не знаю, как вас учили) - Явно задавать высоту блоков не стоит, если это всё же необходимо пользуйтесь свойством min-height.
- Отсутствие атрибута alt у изображений. Помните о том, что картинки могут не загрузиться по каким-либо причинам (как на codepen например), поэтому вместо них должно быть хотя бы описание.
- Шрифт лучше прописывать для body.
- Всё-таки оставили парочку span, изображающих блоки (.k1 и .k2). Замените на div.
- Блок с классом .menu размечен неправильно. Кстати он немного пострадал у вас из-за ограниченной высоты. Каждый элемент должен быть у вас - это изображение+ссылка. А вы разделили. Поэтому сетка “посыпалась”.
- Оформление текста. В этом фрагменте:
`
Заказывая автозапчасти у нас Вы бережёте своё время и экономите деньги.
`. Вы можете попробовать исправить свои ошибки или дождаться полного варианта разметки от Алексея.
4 лайка
Вот архив с HTML, CSS, и всеми картинками https://yadi.sk/d/WIpcIh_3t2T8p
И исправленный код:
http://codepen.io/temi496/pen/EyXpaL.html
http://codepen.io/temi496/pen/EyXpaL.css
Спасибо большое за советы!
Исправил то что мог.
1 span оставил, где список преймуществ, так как по другому не смог к ниму обратиться в CSS.
Поле поиска получилось сделать, кнопку отправки - нет, либо мы еще это не учили, либо я пропустил этот момент.
В “Menu” не понял как сделать что бы текстовая ссылка была точно под картинкой, оставил так…
Про “альты” для картинок знаю, но не стал заморачиваться, так как это домашка, и задача все равно не стояла сделать макет полностью рабочим.
Задачу ставьте себе сделать сайт рабочим, вырабатывайте дисциплину по ходу обучения.
1 лайк
Интересно, что вам помешало убрать span…
В принципе вы могли класс text_spisok (совет по поводу транслита пропустили мимо ушей) прописать сразу для ul.
Элемент в меню мог выглядеть следующим образом:
`
Сегодня ночью сделаю разметку для вашего дз и скину вам
Спасибо!
еще не доделал но взгляните на структуру html кода, как раз то о чем мы вам говорил https://yadi.sk/d/NZ4H7zZLt5aeN
2 лайка
Спасибо, посмотрел структуру, увидел много незнакомых для себя тегов, таких как: header, aside, main. Скажите, а для чего они нужны, если в принцыпе можно сверстать и без них? Для сео оптимизации сайта?
Это новые html5 теги с помощью которых можно построить более логически структурированую сетку, когда изучите html5 поймете все до конца, на сайте webref.ru можно найти информацию и курсы по этим вещам. Верстка основных блоков divами устарела как только появился html5.
Ребят, еще такой вопрос, как в CSS сделать вот такое выравнивание/распредиление текста как на скрине? (Нажмите на изображение, для просмотра)
Нашел решение: text-align: justify;
1 лайк
И vertical-align:bottom