Как поднять блок вверх в css
Перейти к содержимому

Как поднять блок вверх в css

  • автор:

Как поднять блок?

Menlod

nav-main-left и block-main-center должны находиться в одном контейнере.

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Верстаю, фронтэндю =)

Простите за цензуру, но то как сейчас идет верстка — полная хрень. иначе сложно назвать.

У вас на макете четко визуально видно разделение на правую колонку (в ней какие то баннеры) и левую (информативная). Ну так и разбейте на 2 колонки и в них уже последовательно вставляйте логически последовательно блоки.

Ответ написан более трёх лет назад
Нравится 1 1 комментарий
freeman0204 @freeman0204 Автор вопроса

Плохая верстка в том что неправильно вложил блок? Или еще в чем то? На ширины в % в блоках отмерял линейкой в фотошопе там все верно.

ainnes

Всё было хорошо, вы Как поднять этот блок? опустили в html под правую колонку(

Вот тут блок Как поднять этот блок? поднялся наверх, т.к. находится внутри среднего блока под .slider.

Еще заметила в .events стоит фиксированный height , исправьте на min-height и добавьте padding: 32px 5px 5px;

5 способов создания ссылок-якорей с отступом сверху. Устранение смещения из-за фиксированного блока (шапка, меню).

Впервые я столкнулся с этим, когда делал на своем сайте выплывающую панель «Поделиться в соц сетях» при скролле поста вниз (попробуйте).

При использовании ссылок-якорей на сайте, после перехода по ссылке, панель соц сетей закрывала верхнюю часть контента (как правило заголовок) и в итоге пользователю просто было непонятно, куда он в итоге попал. Вы можете опробовать это сами, кликнув по ссылке «A» ниже.

А так как сейчас очень популярно делать фиксированные шапки и меню position:fixed , прилепленные к верхней части экрана, то думаю что этот пост будет интересен многим. В нём я рассмотрю несколько вариантов якорей с отступами от верхней границы экрана при переходе по ним.

  • A: Стандартный якорь
  • Б: Отступ в виде псевдоэлемента
  • В: Положительный padding и отрицательный margin
  • Г: Border и отрицательный margin
  • Д: Метод Г с возможностью добавления border-top

Для более ясного понимания на все h2 -заголовки я добавил заливку.

A: Стандартный якорь

Пример того, как работает стандартная ссылка-якорь. Если вы попали сюда, кликнув по ссылке, а не просто проскроллили страницу, то скорее всего заголовок у вас оказался полностью скрыт под панелью соц сетей.

Возможно было бы правильнее назвать пост не «5 методов…», а «4 метода…». Потому что это и не метод вовсе, а показательный пример того, как быть не должно, ну да ладно.

Б: Отступ в виде псевдоэлемента

Используем псевдоэлемент для добавления отступа перед элементом — :before или :after .

Поддержка браузерами: Chrome конечно же, IE8+, Firefox 3+, Opera 9.25+, Safari 3+.

Замечания:

  • Требуется поддержка браузером CSS псеводоэлементов.
  • Метод не работает корректно, если у элемента есть фон или заливка (наезжает на контент).
  • Не работает корректно, если у элемента есть свойства padding-top или border-top .
#link-B:before { display: block; content: ""; height: 55px; margin: -55px 0 0; }

В: Положительный padding и отрицательный margin

Используем padding для создания отступа и отрицательный margin , чтобы этот же отступ убрать, а точнее — сделать его незаметным для пользователей.

Обратите внимание, что внутренные отступы padding тоже попадают под заливку, то есть, если у вашего элемента будет фон, то он скорее всего наедет на контент перед ним. Для того, чтобы игнорировать padding при добавлении фона на элемент, используйте CSS-свойство background-clip:content-box .

Поддержка браузерами: Chrome конечно же, Firefox 4.0+, Opera 10.6+, Safari 3+.

Замечания:

  • Необходима поддержка браузером background-clip:content-box , но это только в том случае, если вы хотите добавить фон элементу.
  • Некоторые ограничения при использовании margin (в том числе при margin-collapse — это когда из нижнего отступа первого элемента и верхнего отступа второго определяется наибольший, который и становится величиной отступа между этими элементами).
  • Невозможность использования padding-top .
#link-C { padding-top: 55px; margin-top: -55px; -webkit-background-clip: content-box; background-clip: content-box; }

Г: Border и отрицательный margin

По сути то же самое, что и предыдущий метод, но вместо padding используем border . Что это нам даёт?

  • Теперь вы спокойно можете использовать внутренние отступы padding .
  • Постараюсь выразиться правильно — по идее border — это тот же padding , но только с заливкой и эффектами. Поэтому при использовании фона или заливки элемента нам нужно учесть, чтобы она распростаранялась на сам элемент и на padding , но не на border (ведь он то у нас прозрачный), здесь поможет background-clip:padding-box .
  • Ограничение в использовании border-top , которое однако легко решаемо — смотрите ниже.

Поддержка браузерами: Chrome конечно же, Firefox 1.0+, Opera 10.5+, Safari 3+.

#link-D { border-top: 55px solid transparent; margin-top: -55px; padding: 15px; /* паддинги - без проблем */ -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; }

Д: Метод Г с возможностью добавления border-top

Дополнение к предыдущему методу, которое позволит добавить на элемент верхний border . Поддержка браузерами псевдоэлементов и background-clip (только при наличии фона или заливки) обязательна.

Поддержка браузерами: Chrome конечно же, Firefox 3.5+, Opera 10.5+, Safari 3+.

#link-E { position: relative; /* важно - для того, чтобы псевдоэлемент позиционировался относительно этого элемента */ border-top: 55px solid transparent; margin-top: -55px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #link-E:before { content: ""; position: absolute; top: -2px; /* равен по модулю толщине border */ left: 0; right: 0; border-top: 2px solid #ccc; /* собственно то, ради чего всё затевалось */ }

Смотрите также

  • Треугольники, стрелки, квадраты и лимон при помощи свойств CSS border и border-radius
  • Удобный CSS оптимизатор для работы на каждый день

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

СКАЖИТЕ ПОЖАЛУЙСТА КАК ПОДНЯТЬ СТРОКИ НА ВВЕРХ

ваш блок ‘меню’ поместить внутрь блока ‘header’ и стилями уже выравнивать как надо.

Т.е. внутри блока header у вас будет 2 блока — лого и меню

Вадим Семенов
5 years ago

Один ответ

JavaScript — полный курс с нуля до результата!

Полный курс Python для начинающих – с нуля до специалиста

Photoshop для начинающих Веб-дизайнеров

Adobe Illustrator с нуля – основы дизайна для начинающих

Программирование на Java с нуля

React JS для начинающих + Redux

Django 3 — Full Stack разработка веб сайтов на Python

WordPress – с нуля до Профи!

Основы HTML/CSS — верстка сайтов с нуля

WordPress – Быстрый старт!

Шаблонизатор Pug/jade — современный ускоритель для HTML

ВЕБ-разработчик — с нуля до результата!

Посадка верстки и создание тем на CMS WordPress

Настройка рекламы Яндекс Директ — продвижение сайтов

Настройка рекламы Google — продвижение сайтов

Настройка таргетированной рекламы и продвижение ВКонтакте

Настройка рекламы и продвижение Facebook+Instagram

МЕГАКУРС по рекламе: Яндекс Директ, Google Реклама, ВКонтакте, Facebook+Instagram

Полный курс Android + Java для начинающих

Kotlin — Быстрый старт!

Программирование на C# – от новичка до специалиста

Верстальщик сайтов — HTML, CSS, Bootstrap, JavaScript

SQL и PostgreSQL для начинающих

Создание административной панели на React JS + PHP

Практический JavaScript — продвинутый уровень

GIT. Управление версиями для разработчиков

Программирование на Java с нуля — Уровень 2 + 10 собеседований

Полный курс Python – продвинутый уровень + SQL

Figma для Веб дизайнера — с нуля до профессионала

React с нуля для начинающих + 3 проекта в портфолио!

Веб Дизайн в Figma. Основы Ui Ux дизайна на практике

Алгоритмы и структуры данных от А до Я

Adobe Illustrator с нуля – Уровень 2 – продвинутая практика

Android разработчик – профессиональный уровень (Kotlin)

Веб Дизайн в Figma 2022 Продвинутый уровень. Создание Ui Kit

Шаблоны проектирования на Python

  • Онлайн курсы программирования и создания сайтов с нуля. Обучение основам разработки и веб-программирования для начинающих. Включайся!
  • О проекте
  • Связаться с нами
  • Политика конфиденциальности
  • Условия использования
  • Цены и оплата
  • Все курсы
  • Профессии
  • Блог
  • Вопросы-ответы
  • Отзывы
  • Партнерская программа
  • HTML / CSS
  • ВЕБ-разработчик — с нуля до результата!
  • Верстальщик сайтов — HTML, CSS, Bootstrap, JavaScript
  • JavaScript — полный курс с нуля до результата!
  • PHP / MySQL
  • Полный курс Python для начинающих – с нуля до специалиста
  • WordPress – с нуля до Профи!
  • МЕГАКУРС по рекламе: Яндекс Директ, Google Реклама, ВКонтакте, Facebook+Instagram
  • Полный курс Android + Java для начинающих
  • SQL и PostgreSQL для начинающих
  • Программирование на C# – от новичка до специалиста
  • Веб Дизайн в Figma. Основы Ui Ux дизайна на практике
  • Основы HTML/CSS — верстка сайтов с нуля
  • Django 3 — Full Stack разработка веб сайтов на Python
  • BOOTSTRAP
  • Photoshop для начинающих Веб-дизайнеров
  • Adobe Illustrator с нуля – основы дизайна для начинающих
  • Программирование на Java с нуля
  • React с нуля для начинающих + 3 проекта в портфолио!
  • Настройка рекламы и продвижение Facebook+Instagram
  • Настройка таргетированной рекламы и продвижение ВКонтакте
  • Настройка рекламы Яндекс Директ — продвижение сайтов
  • Настройка рекламы Google — продвижение сайтов
  • Практический JavaScript — продвинутый уровень
  • Полный курс Python – продвинутый уровень + SQL
  • Алгоритмы и структуры данных от А до Я
  • Посадка верстки и создание тем на CMS WordPress
  • Программирование на Java с нуля — Уровень 2 + 10 собеседований
  • Android разработчик – профессиональный уровень (Kotlin)
  • Инструменты Веб-разработчика
  • GIT. Управление версиями для разработчиков
  • React JS для начинающих + Redux
  • Adobe Illustrator с нуля – Уровень 2 – продвинутая практика
  • Figma для Веб дизайнера — с нуля до профессионала
  • Веб Дизайн в Figma 2022 Продвинутый уровень. Создание Ui Kit
  • WordPress – Быстрый старт!
  • Шаблоны проектирования на Python
  • Kotlin — Быстрый старт!
  • Создание административной панели на React JS + PHP
  • Linux / GIT
  • JavaScript / jQuery
  • CodeIgniter
  • Шаблонизатор Pug/jade — современный ускоритель для HTML

Заголовок, перекрывающий блок с рамкой

Заголовок, перекрывающий блок с рамкой

Два варианта заголовков (на однородном и графическом фоне), которые перекрывают блоки с рамкой.

HTML:

Пример:

На первый взгляд блоки абсолютно одинаковые, но если фон под ними не однородный, то разница становится очевидной.

Добавить фон

CSS:

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

Однако если у нас неоднородный фон, такой вариант не подойдет.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *