Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Как зафиксировать элементы сайта, Нужно зафиксировать блоки сайта 
:(
    Опции темы
leonfury95
Дата 28.10.2020, 02:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 2
Регистрация: 28.10.2020

Репутация: нет
Всего: нет



Есть вот такой условный дизайн :

user posted image

При масштабировании экрана, разумеется, все это дело разъезжается куда не надо. Одно дело адаптивность, но тут даже на пару пикселей изменить масштаб и всё уже не там.
Как-нибудь можно зафиксировать текст и меню хотя бы именно в этих местах бэкграунда?

Если необходим код :

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="css/main.css">
    <title>Raelis</title>
</head>
<body>
    <header>
    <img class="logo" src="img/logo.png" alt="logo">
    <div class="container">
        <ul class="menu">
            <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>
    </div>
    </header>
    <section>
        <div class="container">
            <div class="intro">
            <h1>Дизайн-студия Raelis</h1>
            <p>Мы опытная дизайн-студия, за <br>плечами которой ряд крупных <br>реализаций.
            <br> 
            От частных заказчиков до больших <br>проектов международных компаний.<br>
            Воплотим в реальный дизайн<br> любую вашу мечту! Попробуйте!</p>
        <button onclick="location.href='#'" class="bt" type="button">Заказать проект</button>
        </div>
        </div>
    </section>
    <footer>
        <div class="container">
            <div class="info">
                <a href="tel:+79999999999">+7 999 999 99 99</a>
                <h2> г. Москва ул. Театральная 51А</h2>
                <h3>Copyright © 2007-2020. All rights reserved. Политика конфиденциальности.</h3>
            </div>
        </div>
    </footer>
</body>
</html>


И CSS:

Код

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap');

html {
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    background: url(../img/bg.png) top center no-repeat;
    background-size: cover;
    margin:0;
    padding:0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.container {
    width: 1710px;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
}

header {
    display: flex;
    flex-direction: row;
}

.menu {
    padding-top: 20px;
    padding-right: -5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.menu li {
    display: inline-block;
    margin-right: 70px;
}

.menu li a {
    font-weight: 500;
    font-size: 22px;
    color: #645C54;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    text-decoration: none;
}

.logo {
    position: absolute;
    top: 20px;
    left: 48px;
}

h1 {
    padding-top: 40px;
    font-weight: 700;
    font-size: 40px;
    color: #645C54;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(100, 92, 84, 0.35);
}

section {
    height: 800px;
}

section p {
    font-size: 24px;
    color: #645C54;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(100, 92, 84, 0.35);
    line-height: 28px;
}

.intro {
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    align-items: baseline;
}

.bt {
    display: block;
    width: 282px;
    height: 61px;
    position: relative;
    left: 50px;
    border-radius: 20px;
    background: #C3C8C2;
    -webkit-box-shadow: 2px 4px 12px 3px rgba(0,0,0,0.58); 
    box-shadow: 2px 4px 12px 3px rgba(0,0,0,0.58);
    font-weight: 700;
    font-size: 20px;
    color: rgba(100, 92, 84, 0.8);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(100, 92, 84, 0.35);
    cursor: pointer;
}

.bt:focus {
    outline: none;
}

.bt:hover {
    background: #A8A8A8;
}

footer {
    height: 63px;
}

.info {
    display: flex;
    align-items: baseline;
    position: absolute;
    bottom: 0;
}

.info a {
    margin-right: 170px;
    list-style-type: none;
    font-size: 20px;
    color: rgba(100, 92, 84, 0.7);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
}

h2 {
    margin-right: 350px;
    font-size: 20px;
    color: rgba(100, 92, 84, 0.7);
    font-weight: 500;
}

h3 { 
    font-size: 20px;
    color: rgba(100, 92, 84, 0.7);
    font-weight: 500; 
}


Это сообщение отредактировал(а) leonfury95 - 28.10.2020, 05:22
PM MAIL   Вверх
Oldshelf
Дата 28.10.2020, 11:43 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 155
Регистрация: 22.4.2018

Репутация: нет
Всего: 4



По-моему, объединить связанные элементы дизайна проще всего тэгом "table".
PM MAIL WWW   Вверх
ksnk
Дата 28.10.2020, 13:41 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



Обычно, если фон сильно рисованный и не может изменяться - делают фиксированную верстку, явно указывая размеры контейнера, в который вставлен бэкграунд и текст. Для разных расширений удобно сделать несколько картинок с разным расширением и менять размеры контейнера в medium запросах. Таким образом придется отлаживать разные наборы стилей для разных расширений. Зато их будет немного  -4 - 6++, в зависимости от аппетитов заказчика. Это, imho, наиболее простой вариант. Если дизайн пока не утвержден толком - лучше так и делать. Фоном всего сайта пустить какую нибудь полоску, которая сливалась бы с основной картинкой.

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

Можно, конечно, и в таблицу упихать порезанную на запчасти основную картинку. При достаточной ловкости рук подойдет table-layout:fixed и явное указание размера столбиков в секции < col> таблицы. Правда табличная верстка коряво будет смотреться в мобильном размере экрана. Да и поисковики не могут правильно выковыривать контент из такой верстки, что сильно снижает ее ценность.



Это сообщение отредактировал(а) ksnk - 28.10.2020, 13:41


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
leonfury95
Дата 28.10.2020, 15:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 2
Регистрация: 28.10.2020

Репутация: нет
Всего: нет



ksnk
Oldshelf, спасибо за ответы smile
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.1245 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.