Решение: Header на профилната страница

Най-важното за подредбата на header-а

Подравняването в header-а е постигнато с комбинация от inline-block, отрицателен margin и контрол върху whitespace-а. Ключовият момент е използването на margin-right: -100% при aside, което го „избутва“ вдясно, извън нормалния поток, но запазва елементите на един ред чрез white-space: nowrap. Допълнително, текстът се съкращава с многоточие при липса на място, а кръглата иконка се реализира чрез правилно изчислен border-radius.

Стъпка по стъпка: как да повторите решението

1. В section създайте header, който съдържа:

   • div с име, професия и иконка
   • aside с контактна информация

2. Задайте на div и aside display: inline-block.

3. На div задайте width: 100%, за да заема цялата ширина на header.

4. На aside задайте фиксирана ширина (напр. 300px) и margin-right: -100%, за да застане вдясно.

5. На header задайте white-space: nowrap, за да останат двата елемента на един ред.

6. За съкращаване на текста в h1 и p използвайте overflow: hidden и text-overflow: ellipsis.

7. Направете иконката кръгла с border-radius, равен на половината от нейната ширина.

8. Добавете на section margin: 0 10%, за да осигурите пропорционално отстояние при преоразмеряване.

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

• display: inline-block – подрежда елементи на един ред, но запазва блоковите им характеристики
• margin-right: -100% – измества елемента извън контейнера с ширина, равна на неговата собствена
• white-space: nowrap – забранява пренасяне на нов ред
• text-overflow: ellipsis – добавя многоточие при скрит текст
• border-radius – заобля ъглите (½ от ширината = кръг)