Верстка картинки та посилання

верстка

Вітаю вас, шановний читачу.

Постановка завдань

  1. Ілюстрація до посилання (за якою можна натискати) розташовується ліворуч від тексту посилання. Під час наведення вказівника миші на ілюстрацію текст посилання підсвічується.
  2. Ілюстрація знаходиться над текстом посилання. При наведенні вказівника миші на ілюстрацію текст посилання знову підсвічується.

Розв'язання задачі №1

Як бачите, HTML-код простий до неподобства та валідний стандарту HTML 4.01 Strict (докладніше про вибір HTML-стандарту в DOCTYPE).

Пояснення до CSS-коду:

3-й рядок формує лівий відступ, за допомогою якого звільняється місце для картинки, що ілюструє.

8-й рядок включає режим абсолютного позиціонування для картинки, розташованої всередині тега посилання в блоці з класом link-block (про застосування стилю саме до потрібної картинки свідчить послідовна нотація у рядку 6 .link-block a img). Тим самим ми вириваємо картинку з нормального потоку і її положення тепер можна встановити властивостями left і top.

9-й і 10-й рядок властивості left і top зміщують картинку на задану кількість

пікселів зліва та зверху щодо верхнього лівого кута браузераза умовчанням. Однак якщо зовнішній блок має властивість position: relative, то наша картинка позиціонуватиметься щодо лівого верхнього кута батьківського блоку. Саме для цих цілей використана інструкція в рядку 15 . Тепер властивості left і top задають зміщення картинки щодо лівого верхнього кута блоку

Звичайно, властивість left: 0 можна опустити, я його вказав для більшої зрозумілості.

Як видно з рядка 10 значення властивостей left та top можуть бути негативними.

20-й рядок задаєчервоний колір посилань під час наведення. І оскільки картинка з текстом є вмістом одного посилання, текст підсвічуватиметься червоним при наведенні миші на картинку.

Якщо у вас виникне необхідність перемістити посилання з картинкою, ви завжди зможете скористатися властивістю margin, яка формує зовнішній відступ. Властивість margin необхідно розташовувати нижче рядка 15, наділяючи цим зовнішніми відступами батьківський блок

Розв'язання задачі №2

Код HTML залишився тим самим.

Як ви могли помітити, зміни спіткали значення властивостей left і top у рядках 9 і 10. Я поставив їх рівно такими, щоб поставити картинку посередині над текстом посилання. Рядком 16 я додав зовнішній верхній відступ, щоб звільнити місце для розміщення зображення над текстом посилання.