Как создать рамку шаблона вокруг веб-страницы, квадратного пространства

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

веб-фреймы

В настоящее время я могу получить только сплошную двойную рамку, доходящую до краев страницы, с минимальным расстоянием между строками - примерно половина того, на что я надеюсь.

Пока это код, который я вставил в пользовательский css:

#footer {display:none;}
body {
border: 1em double #ffffff;
padding: 0px;
margin: 0px;
background-image: url(http://i.imgur.com/LhxKJpU.jpg);
background-repeat: tile; 

}

Я использую шаблон Pacific.

Есть идеи??

Вы хотите, чтобы линии были фиксированной ширины? Или процент? Крест в каждом углу или только внизу справа?
Быстрая идея — перекрывайте разные формы с рамкой на каждом углу. Вы можете сделать это с помощью псевдоэлементов в верхнем и нижнем колонтитулах или что-то в этом роде. Я сделаю тест позже.
Привет, @Zach Saucier, я хочу, чтобы они были фиксированной ширины, а перекрестный узор был для каждого угла. Я не уверен, как делать псевдоэлементы...

Ответы (1)

Вы не можете сделать это напрямую с помощью CSS поверх тега body, вам нужно реструктурировать тело html для достижения желаемого эффекта.

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

вот мое решение:

<head>
<style>
body {
    margin:0px;
    background-image: url(http://i.imgur.com/LhxKJpU.jpg);
    }
.top, .left, .right, .bottom {
    display: block;
    position:absolute;
    width:100%;
    height:100%;
    }   
.top {
    border-top: 1em double #fff; top: 40px; z-index:100;
    }
.left {
    border-left: 1em double #fff; left: 40px; z-index:200;
    }
.right {
    border-right: 1em double #fff; right: 40px; z-index:300;
    }
.bottom {
    border-bottom: 1em double #fff; bottom: 40px; z-index:400;
    }           
</style>
</head>
<body>
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</body>
</html>

и вот мой результат

введите описание изображения здесь

кстати нет tileсмысла повторять фон. Вы должны выбрать между repeat-x repeat-y no-repeatиrepeat

насколько мне известно, вы не можете редактировать HTML в готовых шаблонах Squarespace (вы можете использовать свои собственные шаблоны).. вы можете сделать то же самое с псевдоэлементами, если у вас нет доступа к HTML
На самом деле. Вам, вероятно, все равно следует делать это с псевдоэлементами, если только они divуже не существуют и что-то значат.
@CAI Squarespace на самом деле дает вам немного контроля. Я только однажды кратко проверил, хорош ли Squarespace, поэтому я не могу вспомнить точных деталей, но я считаю, что вам нужно включить платформу разработчика , а затем вы можете редактировать html и css. Мне понравилось, что шаблоны Squarespace были довольно чистыми.
@Joonas Я никогда не использовал его, поэтому я не знаю, но из того, что я читал, звучало так, что вы можете использовать платформу разработчика только для создания своих собственных тем, а не с их готовыми темами. Хотя я могу ошибаться.
Я по-прежнему считаю, что вы все равно не должны добавлять ненужную разметку html :)
@CAI Насколько я помню, по умолчанию он дает вам активную тему для редактирования, когда вы ее включаете. Первый абзац после заголовка: 1. Choose a Starting Point, кажется, говорит о том же .
Вы правы, это то, что я прочитал : «это не позволяет изменять HTML-разметку наших блоков ...», кажется, это относится только к определенным блокам, но не ко всей разметке.
Спасибо @hsawires за ответ на мой вопрос. когда я помещаю это в пользовательский css, он говорит «синтаксическая ошибка в строке 1» - я понимаю, что это html, но я не уверен, где разместить код? т.е. как «реструктурировать мое тело html»?
@LaurenBasser Какое программное обеспечение вы используете для редактирования html, чтобы получить эту ошибку? ... Я имел в виду реструктуризацию вашего html, чтобы добавить 4 DIV в качестве основного контейнера вместо тела.
@hsawires это сработало! Я понял, что размещаю код в CSS как нуб. Я не хотел включать платформу разработчика, так как это (насколько я понимаю) означало бы, что мне нужно будет кодировать весь сайт, однако я понял, что мне нужно поместить код во вставку кода в разделе «Настройки»> «Дополнительно». Большое спасибо за вашу помощь!
Как создать рамку шаблона вокруг веб-страницы, квадратного пространства
СпросиСетьПолитика конфиденциальности1y, 0v