Прескочи към основното съдържание Прескочи към навигацията
Допълнения към урока
Учебна програма HTML5 и CSS3
1. Въведение в HTML и CSS

Решение: Икона име и длъжност

-51,13 € за ВЕЛИКДЕН: Вземи курс "HTML5 и CSS3" за    127,31 € 76,18 €  ВИЖ ТУК

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.


Как да позиционираме и стилизираме икона, име и длъжност

Ключът в тази задача е правилната комбинация между float и margin, включително отрицателни стойности, за да позиционираме изображението извън контейнера с текста. Така постигаме чисто подравняване, без текстът да преминава под снимката. Използването на краткия синтаксис за отстояния прави кода по-четим и подреден.

Стъпка по стъпка: реализиране на решението

  1. Задайте изображението да „отплува“ наляво чрез float: left;, за да може текстът да го обтича.
  2. Използвайте краткия синтаксис на margin с четири стойности в реда: top, right, bottom, left.
  3. Приложете отрицателен ляв margin (напр. -130px), за да изместите снимката извън текстовия контейнер.
  4. Добавете ляво отстояние на обвиващия header (напр. 150px), за да определите началната позиция на съдържанието.
  5. Поставете името в h1, но премахнете удебеляването с font-weight: normal; и задайте размер (напр. 40px).
  6. Използвайте br, за да разделите името на два реда.
  7. Задайте font-family: Arial; за body и определете цвят за длъжността.
  8. Настройте размер на изображението така, че визуално да съвпада с височината на текста.

Използвани CSS свойства и елементи

  • margin – задава външно отстояние (кратък синтаксис: top, right, bottom, left)
  • float: left; – позиционира елемента вляво и позволява текстът да го обтича
  • font-weight – контролира дебелината на шрифта
  • font-size – задава размера на текста
  • font-family – определя шрифта на страницата