Как картинку в «li» превратить в картинку с ссылкой?

Question

[Виктор]

Всем привет, я новичек и просто сам для себя верстаю страниц, дабы набираться опыта.
Есть такой простенький код codepen.io/3454353425/pen/QNaXwM
Вопрос.
1. Как сделать, чтобы маркерованый список с картинкой был не просто картинками, как это есть сейчас, но еще и был ссылкой? В моем случае ссылка есть, но она не работает.
2. Правильно ли я построил код? В дальнейшем мне нужно, чтобы иконки распологались горизонтально через float и имели hover.

Comments

[Dmitry Bay]

Странно вы картинки добавляете...

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

[Виктор]

Может странно конечно. Просто я уже всякими способами пытался. Сначало я вывел картинки ссылкой через html и прописал float. Но не мог настроить a:hover.

Answer 1

[Сергей Горячев]

#header-icon ul li {
  float: left;
}
#header-icon ul li a {
  display: block;
  width: 54px; height: 53px;
}

PS: Делаете не совсем правильно, но думаю с опытом придет.
Вам уже писали, что нужно не LI присваивать класс, а для тега А.
И да. НЕ ИСПОЛЬЗУЙТЕ ID!!! Классов вполне достаочно для верстки.

Comments

[Виктор]

А разве ID и class это так важно? Единственное ведь различие это только то, что id может прописываться только один раз, а класс неограниченое количество.

[Сергей Горячев]

Виктор: просто оставьте ID для работы со скриптами. И не грузите ими страницу.)

[Виктор]

Хорошо, спасибо ;)

[Сергей Горячев]

Виктор: вот хорошая статья petrenco.com/html_css.php?txt=50

[Сергей Горячев]

Виктор: На самом деле, нельзя выбирать, что использовать: class или id. Это на подобии, как выбирать, что лучше: есть или пить? Пользоваться необходимо и классами и идентификаторами, в зависимости от поставленной цели. В большинстве случаев лучше использовать class, чтобы нечаяно не использовать id на одной странице более одного раза. Но там где необходимо, нужно применять id: выделение уникального блока страницы, для якорей, для JS и др.

Answer 2

[theWaR_13]

Посмотрите курс от HTML Academy (который интенсив). Ваш уровень резко повысится после прохождения. Там как раз и про верстку, и про классы с айди, и еще много всего интересного.

Comments

[Виктор]

да, я сейчас прохожу уроки. До интенсива мне еще там далековато ;)