0 Пользователей и 1 Гость просматривают эту тему.
  • 6 Ответов
  • 1984 Просмотров
*

kushiy

  • Захожу иногда
  • 401
  • 4 / 0
Очень нужно сделать рамку вокруг блока при помощи изображения.
Само изображение разбивается на 8 частей. Уже два часа ищу то что мне необходимо, но ничего найти не могу.
Везде предлагают image-border, а если рамка не одинаковая со всех сторон. Когда-то делал уже так, но не помню где использовал чтоб смог просмотреть.
Единственное что нашел http://forumd.ru/viewtopic.php?id=4372, но там нет описания построения разметки HTML. А демо-страничка с  нерабочим вариантом.
Подскажите как сделать.
*

SeBun

  • BanMaster
  • 4019
  • 259 / 5
  • @SeBun48
Re: Построение красивой рамки
« Ответ #1 : 17.08.2017, 15:39:14 »
Оказываю услуги по Joomla | Миграция/Обновление | Сопровождение | IT-аутсорсинг | Недорогие домены и хостинг
*

kushiy

  • Захожу иногда
  • 401
  • 4 / 0
Re: Построение красивой рамки
« Ответ #2 : 17.08.2017, 15:43:57 »
Нет. Это с применением border. А мне по другому нужно.
Ну я уже сам справился. По той ссылке не верно еще и код сделан. Зачем-то обтеканием слева еще сделали.
*

dmitry_stas

  • Легенда
  • 13151
  • 1234 / 8
Re: Построение красивой рамки
« Ответ #3 : 17.08.2017, 16:22:54 »
А мне по другому нужно.
Ну я уже сам справился.
ну так покажите другим, как.
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций
*

kushiy

  • Захожу иногда
  • 401
  • 4 / 0
Re: Построение красивой рамки
« Ответ #4 : 17.08.2017, 16:27:30 »
<div id="pun" >
               <div class="punbb">
               <div id="pun-announcement"></div>
               <div class="tr-corner"></div>
               <div class="tl-corner"></div>
                  <div class="main">
                    Текст, текст, текст
                   </div>
                <div id="pun-about"></div>
                <div class="br-corner"></div>
                <div class="bl-corner"></div>
                </div>
</div>




#pun {
      margin: 0 auto;
      width : auto;
      position: relative;
      background: data-uri('../images/ramka/right.jpg') repeat-y top left;
    }

    .main{
        height:200px;
      }
   
    .punbb {
      width: 100%;
      height: auto;
      background: data-uri('../images/ramka/left.jpg') transparent repeat-y top right;
    }
   
    #pun-announcement{
        background: data-uri('../images/ramka/top.jpg') repeat-x scroll left top transparent;
        padding: 4.3em 1em 1em 1em;
        position: relative;
    }
   
    .tl-corner {
        background: data-uri('../images/ramka/tl_corner.png') no-repeat scroll 0 0 transparent;
        height: 153px;
        left: -3px;
        position: absolute;
        top: -3px;
        width: 153px;
    }
    .tr-corner {
        background: data-uri('../images/ramka/tr_corner.png') no-repeat scroll 0 0 transparent;
        height: 153px;
        right: -3px;
        position: absolute;
        top: -3px;
        width: 153px;
    }
   
    .bl-corner {
        background: data-uri('../images/ramka/bl_corner.png') no-repeat scroll 0 0 transparent;
        height: 153px;
        left: -3px;
        position: absolute;
        bottom: -3px;
        width: 153px;
    }
    .br-corner {
        background: data-uri('../images/ramka/br_corner.png') no-repeat scroll 0 0 transparent;
        height: 153px;
        right: -3px;
        position: absolute;
        bottom: -3px;
        width: 153px;
    } 
   
    #pun-about{
        background: data-uri('../images/ramka/bottom.jpg') repeat-x scroll left bottom transparent;
        border-top-style: none;
        text-align: right;
        line-height: 150%;
        padding: 4.3em 1em 1em 1em;
    }
*

dmitry_stas

  • Легенда
  • 13151
  • 1234 / 8
Re: Построение красивой рамки
« Ответ #5 : 17.08.2017, 17:08:00 »
ух ты, сколько картинок :) а где же они все? покажите хоть сайт, как выглядит.
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций
*

kushiy

  • Захожу иногда
  • 401
  • 4 / 0
Re: Построение красивой рамки
« Ответ #6 : 17.08.2017, 17:10:55 »
Картинки я не стал прикреплять, но их можете взять с топика http://forumd.ru/viewtopic.php?id=4372
Я от туда всё взял, вот только разметку HTML подставлял, так как там вообще нет как должен быть код
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Убрать рамки у кнопки

Автор leha111

Ответов: 1
Просмотров: 3198
Последний ответ 08.06.2018, 12:56:25
от draff
рамки границы повторяются с каждой новой строкой

Автор puf

Ответов: 1
Просмотров: 926
Последний ответ 10.06.2016, 13:44:25
от Shustry
Фоновый рисунок в виде рамки

Автор GoldennVoice

Ответов: 4
Просмотров: 1465
Последний ответ 08.05.2014, 17:12:30
от GoldennVoice
Рамки для статей

Автор belovpaha

Ответов: 35
Просмотров: 5098
Последний ответ 01.04.2013, 02:06:09
от belovpaha
Не получается убрать рамки

Автор fireroller

Ответов: 7
Просмотров: 2269
Последний ответ 03.02.2013, 20:42:13
от fireroller