Задать вопрос
@White_Wolf_DD
верстка

Как переместить всю страницу на середину?

В общем проблема такая, с position: absolute у меня всё работает как надо. Но мне надо переместить ВСЮ страницу по середине, так как размеры у меня 1440x1024. А в левом краю она смотрится как-то ну такое. Всем контейнерам в принципе можно поменять позицию, но не знаю на какую и как. Так как мне надо всё расстояние в пикселях перенести в em.

Вот сам код:
html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Rest Our Peace</title>
</head>
<header>
    <h1>REST OUR PEACE</h1>
    <h2>Для хорошего отдыха нужна хорошая компания.</h2>
</header>

<body>
    <img src="images/Анимированный логотип 500x500  пикс.gif" id="logo">

    <form class="search">
        <img src="images/pngtree-search-vector-icon-png-image_696422-removebg-preview 1.png">
        <input name="s" placeholder="Поиск" type="search" autocomplete="off">
    </form>

    <section class="nav">
        <ul>
            <li><a href="#">Главная</a></li>
            <li><a href="#">Новости</a></li>
            <li><a href="#">Галерея</a></li>
            <li><a href="#">Персонал</a></li>
            <li><a href="#">Контакты</a></li>
            <li><a href="#">Отзывы</a></li>
            <li><a href="#">О нас</a></li>
        </ul>
    </section>

    <div class="booking">
        <img src="images/reserve 1.png">
        <h2>Раннее бронирование</h2>
    </div>

    <div class="cruise">
        <img src="images/cruise 1.png">
        <h2>Круизы</h2>
    </div>

    <div class="passport">
        <img src="images/passport 1.png">
        <h2>Загран пасспорта</h2>
    </div>

    <section class="opis">
        <h3>Отдых – очень важная часть жизни человека. Качество его работы должно 
            вполне окупаться качеством предстоящего отдыха. Ведь это время, когда 
            вполне можно восстановить силы и новым настроем вернуться к обычной 
            жизни. Наше турагентство предлагает Вам окунуться в море наслаждения 
            и удовольствия, выбрав то место для отдыха, которое Вас привлекает.</h3>
    </section>

    <div class="image1">
        <img src="images/image1.png">
    </div>
    
    <div class="image2">
        <img src="images/image2.png">
    </div>
    
    <div class="image3">
        <img src="images/image3.png">
    </div>
    
    <div class="image4">
        <img src="images/image4.png">
    </div>
</body>

<footer>
        <p class="tel">+372 5494 6524</p>
        <p class="email">RestOurPeace@gmail.com </p>
        <p class="adress">Toompuiestee 37, Jaamahoone II korrus</p>
        <img src="images/border.png" id="border1">
        <img src="images/border.png" id="border2">
</footer>
</html>


css

body{
    width: 1440px;
    height: 1024px;
}

header{
    position: absolute;
    width: 944px;
    height: 69px;
    left: 8px;
    top: 8px;

    background: #BBE7E7;
    border-radius: 5px;
}

img#logo{
    position: absolute;
    width: 93px;
    height: 93px;
    top: 0px;
}

header h1{
    position: absolute;
    width: 761px;
    height: 43px;
    left: 146px;
    bottom: 0px;

    font-family: 'Rubik', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 36px;
    /* identical to box height */

    letter-spacing: 0.95em;
    white-space: nowrap;

    color: #000000;
}

header h2{
    position: absolute;
    width: 562px;
    height: 28px;
    left: 253px;
    top: 21px;

    font-family: 'Rubik', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;

    color: #020061;
}

.search{
    position: absolute;
    width: 464px;
    height: 69px;
    left: 968px;
    top: 8px;

    background: #50CECE;
    border-radius: 5px;
}

form input {
    position: absolute;
    width: 336px;
    height: 43px;
    left: 120px;
    top: 13px;
    border: none;
    border-bottom: 4px solid black;
    outline: none;
    background: transparent;
    transition: 1.2s cubic-bezier(0, 0.8, 0, 1);

    font-family: 'Rubik', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 36px;
    line-height: 43px;
}

form input:focus {
    width: 300px;
    z-index: 1;
    border-bottom: 2px solid #F9F0DA;
  }

form input::placeholder{
    color: rgb(53, 53, 53);
    font-family: 'Rubik', sans-serif;
    font-style: normal;
    font-weight: normal;
}

.nav{
    position: absolute;
    width: 224px;
    height: 838px;
    left: 8px;
    top: 93px;

    background: #BBE7E7;
    border-radius: 10px;
}

section ul{
    position: absolute;
    width: 168px;
    height: 750px;
    left: 0px;

    font-family: 'Rubik', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 30px;
    line-height: 36px;
}

section ul li{
    margin-bottom: 44px;
}

section ul {
    list-style-type: none;
    margin: 50px 0px;
    padding: 0;
    width: 93%;
    background-color: transparent;
}

section ul li a {
    display: block;
    width: 100%;
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

section ul li a:hover {
    background-color: #2826aa;
    color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 16px 2px #50CECE;
}

.booking{
    position: absolute;
    width: 223px;
    height: 256px;
    left: 1205px;
    top: 93px;

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.cruise{
    position: absolute;
    width: 223px;
    height: 240px;
    left: 1205px;
    top: 392px;

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.passport{
    position: absolute;
    width: 224px;
    height: 256px;
    left: 1205px;
    top: 675px;

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.booking h2{
    position: absolute;
    width: 210px;
    height: 66px;
    left: 13px;
    top: 130px;

    font-family: 'Rubik', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 28px;
    line-height: 33px;

    color: #FFFFFF;
}

.cruise h2{
    position: absolute;
    width: 110px;
    height: 33px;
    left: 23px;
    top: 15px;

    font-family: 'Rubik', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 28px;
    line-height: 33px;

    color: #FFFFFF;
}

.passport h2{
    position: absolute;
    width: 152px;
    height: 66px;
    left: 20px;
    top: 133px;

    font-family: 'Rubik', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 28px;
    line-height: 33px;

    color: #FFFFFF;
}

.opis{
    position: absolute;
    width: 944px;
    height: 154px;
    left: 248px;
    top: 777px;

    background: #EDEDED;
    border-radius: 31px;
}

.opis h3{
    position: absolute;
    width: 880px;
    height: 140px;
    left: 32px;
    top: 7px;

    font-family: 'Rubik', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;

    color: #000000;
}

h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.image1 {
    position: absolute;
    width: 464px;
    height: 325px;
    left: 248px;
    top: 93px;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}

.image2{
    position: absolute;
    width: 464px;
    height: 325px;
    left: 728px;
    top: 93px;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}

.image3{
    position: absolute;
    width: 464px;
    height: 325px;
    left: 248px;
    top: 435px;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}

.image4{
    position: absolute;
    width: 464px;
    height: 325px;
    left: 728px;
    top: 435px;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}

.tel {
    position: absolute;
    width: 183px;
    height: 28px;
    left: 128px;

    font-family: 'Rubik', sans-serif;;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;

    color: #000000;
}

.email {
    position: absolute;
    width: 294px;
    height: 28px;
    left: 489px;

    font-family: 'Rubik', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;

    color: #000000;
    }

.adress {
    position: absolute;
    width: 447px;
    height: 28px;
    left: 904px;
    
    font-family: 'Rubik', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
    
    color: #000000;
}

img#border1{
    position: absolute;
    left: 824px;
}

img#border2{
    position: absolute;
    left: 424px;
}

footer{
    position: absolute;
    width: 1424px;
    height: 69px;
    left: 8px;
    top: 947px;

    background: #BBE7E7;
    border-radius: 5px;
}

  • Вопрос задан
  • 123 просмотра
6 комментариев
Подписаться 1 Простой 6 комментариев
Решения вопроса 1
DanArst
@DanArst
Гриффиндор в моде при любой погоде!
Header внутрь body. Потом добавьте к body
body{
    width: 1440px;
    height: 1024px;
    position: relative;
    margin: 0 auto;
}
Ответ написан
9 комментариев
9 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Senior Frontend Developer / Старший разработчик Vue.js
Webbankir
До 350 000 ₽
Преподаватель курсов программирования
CODDY • Москва
от 25 000 до 50 000 ₽
Фронтенд разработчик
WebDivision • Москва
До 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Оптимизация ботов телеграм
06 нояб. 2024, в 00:20
1000 руб./за проект
Смарт-контракт на блокчейне TON
06 нояб. 2024, в 00:03
40000 руб./за проект
Ручное тестирование приложения в сторах (iOS и Android)
05 нояб. 2024, в 23:19
3000 руб./за проект
Ещё заказы