Jump to content
  • 0

Проблема с рамкой у body


horprogs
 Share

Question

Привет!

Пытаюсь сделать рамку для body, т.е. рамку у всей страницы документа. Мне нужно чтобы она имела отступ в 15px от края, причем содержимое страницы обрезаться не должно. Если я указываю у body свойства border и padding, то содержимое соответственно обрезается по краям. 

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

Какие есть способы добавления такой рамки к странице?

 

http://s010.radikal.ru/i312/1508/f7/742465e57832.png

 

Спасибо

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

Может  добавить:

box-sizing: border-box;

Вы бы выложили код в песочницу, а то так сложно понять, что не так.

 

Вы так имели ввиду — http://jsbin.com/hulizaxiqo/edit?html,css,output ?

Edited by mrnobody
Link to comment
Share on other sites

  • 0

Вот примерно такая структура у меня: http://jsfiddle.net/horprogs/j9w37e1w/

Я бы хотел, чтобы изображения не отступали от границ экрана, а рамка была поверх них. Я думаю бордером у body так не сделать, потому что смещение содержимого все равно произойдет. Добавил пустой блок и указал у него рамку, нехорошее только это решение, т.к. приходится высоту вручную задавать http://jsfiddle.net/horprogs/fp9hL7fu/

Edited by horprogs
Link to comment
Share on other sites

  • 0

Хм, ну вот кстати есть с этим вариантом проблемка одна:

рамка перекрывает содержимое, если это текст внутри, то ему можно присвоить z-index побольше, а если цельный див (например карта интерактивная, с которой нужно взаимодействовать), то рамка ее перекрывает, если у картинки поставить z-index больше, то она перекроет рамку. Тупиковая ситуация с рамками этими)) http://jsfiddle.net/22699nuh/3/

Link to comment
Share on other sites

  • 0

Можно добавить псевдоэлементу pointer-events: none; http://jsfiddle.net/mrnobody/22699nuh/4/

Только поддержка в IE хромает: http://caniuse.com/#feat=pointer-events

 

Или можно еще сделать верхнюю и нижнюю рамку html:before, html:after {…}, а левую и правую с помощью body:before, body:after {…}

http://jsfiddle.net/mrnobody/22699nuh/5/

Edited by mrnobody
Link to comment
Share on other sites

  • 0

Спасибо! pointer-events работает. Второй вариант тоже хорош, но у меня скролл по экранам и работает все довольно странно, не как нужно. Оставлю пока первый вариант, для кроссбраузерности может буду убирать рамку на старых IE

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Twix
      Добрый день. Создал меню горизонтальное и по макету нужно сделать между меню полоску.
      как должно выглядеть: Фото меню

      Я ее добавил в <li>border-right: 1px solid #fff. и у последней ссылки ее нужно убрать. как сделать чтобы рамка не виднелась???

      хотел отдельно последний пункт меню взять в ид и убрать ее. но чтото не получается.
      <li id="contact_us">
      <a href="#">CONTACT US</a>
      </li>

      кроме как вставлять блок или картинку чтоб замазать ничего не приходит в голову. подскажите пожалуйста реально ли ее убрать через стили ?
    • By dsljkeee
      Доброго времени суток, как можно осуществить данную проблему?
      Как показано на картинке, в бордере имеется пространство которое заполнено иконкой, как именно сделать такое пространство? 

    • By YurikMurik
      Добрый день, форумчане! Необходимо сверстать данную страничку.
      Нужно, чтобы некоторые колонки были обвернуты рамкой + логотип. Есть мысля делать это все при помощи fieldset+legend. Но, как видно по картинке, блоки должны располагаться непосредственно от рамки и лого, не внутри филдсета. Также еще нужно, чтобы при наведении на блоки применялся hover-эффект (по дефолту на них стоит фильтр размывания, при наведении этот фильтр должен исчезать). 
      Собсна, в чем вопрос: как реализовать подобную рамку и лого, чтобы еще и до колонок смог достучаться ?

    • By Launder
      Вот кот. Предполагается, что элемент не выводится из потока (по крайней мере, нужно чтоб он взаимодействовал в "строке" с другими элементами, предполагается, что за block-center могут также находится элементы). Загвоздка следующая: левый блок (block-1) имеет минимальный размер в пикселях(150px) и натуральный размер в rem (15rem, при том, что 1rem = 10px). Хочется оставить пользователю возможность менять в браузере размер шрифта, при этом положение левого края второго элемента (block-center) должно оставаться посередине (или в ином заданном месте).
      Для второго элемента указано свойство:
      padding-left: calc(50% - 15rem); /* тут может быть и 150px*/ При использовании rem во-второй части выражения, элемент уходит вправо, при маленьком шрифте (отнимается меньше - отступ больше),
      если в выражении использовать пиксели, то элемент уйдёт вправо при большом шрифте (просто левый элемент увеличится).
      И в том, и в другом случае, для компенсации сдвига вправо, нужно сдвинуть элемент ВЛЕВО. Но сдвинуть не абсолютно, а при условии. Основные инструменты для сдвигов: марджины паддиги и бордеры прилежащих сторон элементов block-1 и block-center... Можно было бы как-то изловчится с паддингами (что-то вроде 15rem - 150px, положительное значение будет только при значении браузерного шрифта большего, чем по-умолчанию, значит только тогда он и начнёт работать), но паддинг может сдвинуть только вправо. Марджин может сдвинуть и туда и туда, но он безусловен, то есть, не может в одном случае сдвигать, а в другом - не сдвигать.
      Была идея как-то сделать, чтоб паддинг и марджин взаимно компенсировали друг друга, когда нам надо, а когда не нужно паддинг, стал меньше нуля, и исчез, но на практике мне не удалось это реализовать.
      В случае, когда отнимаем rem (в указанном выше коде), при нулевом font-size отступ максимален. Соответственно, сдвиг влево должен быть максимален и равняться ширине элемента block-1 в пикселях. Допустим ставим элементу block-center отрицательный левый марджин (или отрицательный правый марджин ставим block-1), сдвигая block-center на нужную величину, а, чтоб при увеличении шрифта отступ уменьшался, пишем block-1 {margin-right: calc(15rem - 150px)}, что при маленьких шрифтах будет сдвигать блок block-center влево, но при больших будет сдвигать вправо и как это компенсировать - не понятно.
      В случае, когда отнимаем px, при маленьких шрифтах всё хорошо, поскольку и block-1, и отступ - нужных размеров, но когда шрифт увеличивается, элемент block-1 увеличивается, а расстояние между блоками block-1 и block-center остаётся таким же, и опять-таки нужно каким-то образом компенсировать, а любой марджин - будет действовать в обе стороны, а паддинг - в одну, но только вправо, а мне нужно налево.
      В общем, не оставляют меня мысли, что тут можно применить какую-то хитрость и скомпенсировать увеличение отступа, при изменении шрифта, но что-то, как не изгаляюсь, паддинг сдвигает не туда, марджин сдвигает не только туда, но и не туда, при этом паддинг это "не туда" скомпенсировать не может, поскольку сам вылезает туда же, в "не туда"...
      Каким образом приручить эти элементы?
       
    • By ya novenkiy
      .border { border: 3px dashed orange; } <a href = "images/eye.jpg" class = "border"> <img src = "images/eye.jpg" width = "200" /> </a> а если убрать из ссылки, то норм.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy