Техніка позиціонування логотипу всередині шапки сайту (header)

На багатьох сайтах вже прийнято, як стандарт, в шапці сайту розміщувати логотип, який є посиланням на головну сторінку.

Як правило, такий логотип розміщується з лівого боку і поруч з ним знаходиться меню сайту.

У цьому уроці хочу розглянути техніку верстки, яка дозволяє домогтися такого ефекту.

Насправді, нічого складного тут немає.

Для прикладу, давайте візьмемо наступну структуру документа:

Якщо ми просто вставимо логотип всередину header, без всяких стилів:

Те, можна буде побачити наступну картину:

Місце для меню змістилося на рівень нижче і тепер відображається не правильно.

Щоб уникнути цієї ситуації, до логотипу потрібно додати наступні стилі CSS.

Для посилання, яка містить логотип ми використовуємо обтікання зліва float: left, і за допомогою margin-ів задаємо точну позицію логотипу.

Тепер все відображається так, як треба:

Ви можете подивитися зразок цієї сторінки тут:

От і все. Нічого складно тут немає. Просто кожен раз, коли зустрічаєшся з такою проблемою, починаєш згадувати, як це робиться. Щоб в майбутньому цього більше не відбувалося, раджу звертатися до цього запису.

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

Навчальний курс для початківців з основ роботи з веб-аналітикою сайтів на системі Яндекс Метрика тут.

Сторінка з описом моїх послуг з веб-аналітиці: тут.