Автор Тема: Установка бордюра border-image  (Прочитано 108 раз)

07 Декабря 2015, 17:28:44
  • Фрилансер
  • *
  • Сообщений: 164
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Доброго время суток!
Прошу подсказку по выводу бордюра jpg.
Блок товара на странице категорий.. хотел сделать бордюр.
Прописал в глабал css

#columns {
  position: relative;
  padding-bottom: 50px;
  padding-top: 15px;
  background:url('../img/1201.jpg')  repeat;
 color: black;
 border-left: 20px solid White;
 border-right:20px solid White;
 border-top: 20px solid White;
 border-bottom:20px solid White;
  -moz-border-image: url('../img/1402.jpg') 20 20 20 20  repeat;
  -webkit-border-image: url('../img/1402.jpg') 20 20 20 20  repeat;
  -o-border-image: url('../img/1402.jpg') 20 20 20 20  repeat;
  border-image: url('../img/1402.jpg') 20 20 20 20  repeat;
   }

Все бы ничего, но верх и низ бардюр не выводиться..
Тоесть наследуется родитель а jpg не берется. Левый правый нормально.
Блок во вложении.
Подскажите почему.
Спасибо!
08 Декабря 2015, 10:59:46
Ответ #1
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 85948
  • Репутация: +25399/-0
  • Сообщество PrestaShop
    • Просмотр профиля
08 Декабря 2015, 16:47:22
Ответ #2
  • Фрилансер
  • *
  • Сообщений: 164
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
 Сайт типровой, типовой шаблон 1.6.0.8
Страница котигорий.
Бордюры ставятся правый левый, верх низ ставятся но не забиваются jpg картинкой, цветом да.
08 Декабря 2015, 16:52:54
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 2167
  • Репутация: +49/-4
  • Сообщество PrestaShop
    • Просмотр профиля
Если типовой то так
ul.product_list.grid > li {
    border: 2px solid red;
   
08 Декабря 2015, 17:42:21
Ответ #4
  • Фрилансер
  • *
  • Сообщений: 164
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Спасибо большое!
Но вы наверное не так поняли или я не догоняю....
В глобал css есть..
#columns {
   position: relative;
  padding-bottom: 50px;
  padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
 color: black;
 border-left: 20px solid #ff0000;
 border-right:20px solid #ff0000;
 border-top: 20px solid #ff0000;
 border-bottom:20px solid #ff0000;
 
  }
Установливает граници бордюр.
Так работает результат на вкладке.
Но при установке jpg

 position: relative;
  padding-bottom: 50px;
  padding-top: 15px;
padding-left: 20px;
padding-right: 20px; 
  background: url('../img/1207.jpg')  repeat;
 color: black;
 border-left: 20px solid White;
 border-right:20px solid White;
 border-top: 20px solid White;
 border-bottom:20px solid White;
  -moz-border-image: url('../img/1408.jpg') 20 round round;
  -webkit-border-image: url('../img/1408.jpg') 20 round round;
  -o-border-image: url('../img/1408.jpg') 20 round round;
  border-image: url('../img/1408.jpg') 20 round round;

Блок
-moz-border-image: url('../img/1408.jpg') 20 round round;
  -webkit-border-image: url('../img/1408.jpg') 20 round round;
  -o-border-image: url('../img/1408.jpg') 20 round round;
  border-image: url('../img/1408.jpg') 20 round round;
Устанавливает левый правый бордюр а верх низ не хочет..

В чем дело ?...

08 Декабря 2015, 17:53:27
Ответ #5
  • Ветеран
  • *****
  • Сообщений: 2167
  • Репутация: +49/-4
  • Сообщество PrestaShop
    • Просмотр профиля
border-style: solid;
border-width: 20px;
-moz-border-image: url(border.png) 20 repeat;
-webkit-border-image: url(border.png) 20 repeat;
-o-border-image: url(border.png) 20 repeat;
border-image: url(border.png) 20 fill repeat;
Вот так добавляю стили и работает.
08 Декабря 2015, 18:38:07
Ответ #6
  • Фрилансер
  • *
  • Сообщений: 164
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Спасибо за пример!
Ставлю это в глобал

#columns {
   position: relative;
border-style: solid;
border-width: 20px;
-moz-border-image: url(../img/1408.jpg) 20 repeat;
-webkit-border-image: url(../img/1408.jpg) 20 repeat;
-o-border-image: url(../img/1408.jpg) 20 repeat;
border-image: url(../img/1408.jpg) 20 fill repeat;
  }

Результат тот-же, верха низа нет...
ПОдскажите вы в теме css в global.css ставите?
Я в ней ставлю..
08 Декабря 2015, 20:56:48
Ответ #7
  • Ветеран
  • *****
  • Сообщений: 2167
  • Репутация: +49/-4
  • Сообщество PrestaShop
    • Просмотр профиля
В global.css
#columns {
  position: relative;
  padding-bottom: 50px;
  padding-top: 15px;
 
  border-style: solid;
  border-width: 20px;
  -moz-border-image: url(../img/border.png) 20 repeat;
  -webkit-border-image: url(../img/border.png) 20 repeat;
  -o-border-image: url(../img/border.png) 20 repeat;
  border-image: url(../img/border.png) 20 repeat;
}
08 Декабря 2015, 21:05:39
Ответ #8
  • Ветеран
  • *****
  • Сообщений: 2167
  • Репутация: +49/-4
  • Сообщество PrestaShop
    • Просмотр профиля
09 Декабря 2015, 11:28:34
Ответ #9
  • Фрилансер
  • *
  • Сообщений: 164
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Спасибо большое Nikola!
Все правельно.. все работает.
Дело все в самом файле бордюра, я имею ввиду jpg или png.
Что-то тормознул на сам файл....
Еще один вопрос.. А можно как-то сделать загрузку двумя файлами. Один для левой правой, второй для верха низа.
Формат приведенный файла это по сути квадрат из бордыров в одном, верх низ право лево.
Загрузка одним файлом бордюра.
А по отдельноста можно.. Если указать так то не выходит
border.png - это верх низ
border1.png - право лево

-moz-border-image: url(../img/border.png ) 20 0 20 0 repeat;
  -webkit-border-image: url(../img/border.png ) 20 0 20 0 repeat;
  -o-border-image: url(../img/border.png ) 20 0 20 0 repeat;
  border-image: url(../img/border.png ) 20 0 20 0 repeat;

-moz-border-image: url(../img/border1.png ) 0 20 0 20 repeat;
  -webkit-border-image: url(../img/border1.png ) 0 20 0 20 repeat;
  -o-border-image: url(../img/border1.png ) 0 20 0 20 repeat;
  border-image: url(../img/border1.png ) 0 20 0 20 repeat;

Как то так..
Спасибо!



09 Декабря 2015, 12:04:48
Ответ #10
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 85948
  • Репутация: +25399/-0
  • Сообщество PrestaShop
    • Просмотр профиля
С одним файлом с border-image, для разных файлов через background-image.
09 Декабря 2015, 12:25:07
Ответ #11
  • Ветеран
  • *****
  • Сообщений: 2167
  • Репутация: +49/-4
  • Сообщество PrestaShop
    • Просмотр профиля
-moz-border-image: url(../img/border.png ) 20 0 20 0 repeat;
  -webkit-border-image: url(../img/border.png ) 20 0 20 0 repeat;
  -o-border-image: url(../img/border.png ) 20 0 20 0 repeat;
  border-image: url(../img/border.png ) 20 0 20 0 repeat;

-moz-border-image: url(../img/border1.png ) 0 20 0 20 repeat;
  -webkit-border-image: url(../img/border1.png ) 0 20 0 20 repeat;
  -o-border-image: url(../img/border1.png ) 0 20 0 20 repeat;
  border-image: url(../img/border1.png ) 0 20 0 20 repeat;
Если так, то будет использовать только border1.png, а стили с border.png не бут учитываться. Делай с одним файлом.
09 Декабря 2015, 14:10:13
Ответ #12
  • Фрилансер
  • *
  • Сообщений: 164
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Да так оно и есть. Спасибо огромное! Всего доброго,удачки!
Вопрос закрыт.