Как переместить заголовок?
Подскажите пожалуйста, как передвинуть заголовок на странице ниже, так что бы остальные элементы остались на том же месте? Пробовал взять в div и для его класса прописать position:relative, но какие бы не вводил там координаты, элемент своего местоположения почему-то не меняет.
На картинке показано. Надо слово «Галерея» разместить так что бы оно находилось ровно над горизонтальной линией.
Код пробовал такой:
html:
div class="galaryPosition">h1>Галерея/h1>/div>
1 2 3 4
.galaryPosition{ position:relative; top: 20px; }
Какие бы значения не вводил в свойство top элемент остаётся на месте. Подскажите пожалуйста, что я не так делаю?
Как выровнять по центру экрана заголовок? (по вертикали)
В вашем контексте это будет выглядеть не очень. Вам стоит по лучше разъяснить что именно вы хотите.
1.
#name
2.
body < position: relative; >#name
Отслеживать
ответ дан 3 дек 2017 в 20:56
Виталик Черный Виталик Черный
1,476 1 1 золотой знак 11 11 серебряных знаков 35 35 бронзовых знаков
- html
- css
- css3
- html5
-
Важное на Мете
Связанные
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Подскажите пожалуйста, как сделать заголовок в HTML по середине?
Не рекомендую учить что-либо по одному SoloLearn, или видео «Выучи *название языка* за час». Самое лучшее — книги. Совсем лень читать? — курсы Гоши Дударя. (Плейлист с изучением html : https://www.youtube.com/playlist?list=PL0lO_mIqDDFUpe6yMyXAlcrfT6AO0KW1a) На сам вопрос уже ответили.
5th Nov 2019, 6:57 AM
Kirill Merzlyakov
Большое спасибо, тоже выучу. Вообще, я изучал все это на канале Хауди Хо, но он говорил основы, поэтому я так плохо шарю:)
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. Преподаватель в школе Нетология.
Пишите, если нужна помощь с сайтом или разработка с нуля.