Перейти к содержимому

Сервис обмена электронных валют

Партнерская программа Kredov

Как сделать промежутки между банерами и сбоку и с верху и снизу

#1 махензи

махензи
  • Пользователь
  • 63 сообщений
  • Репутация: -3
0

Отправлено 07 Июнь 2016 - 19:41

Приветствую,возник вопрос,как сделать что бы между банерами был промежуток сбоку и сверху. 
Как сбоку я знаю   
С верху перенос на новую строку <br> 
Но мне нужно сделать так,что бы на мониторе компьютера было три банера в ряд-это делается легко,НО с телефона если смотришь то один банер переходит вниз и прилипает к двум верхним. 
Если этот банер разделить <br> то вид будет что на компе ,что на мобильнике одинаков и не красив,то есть два банера в верху и один с низу.

как здесь Результат данного примера показан на рис. 1. Изображения выстраиваются в одну строку по горизонтали, а если некоторые из них не помещаются по ширине в окне, то переносятся на следующую строку.

66_1.png

Рис. 1. Фотографии, расположенные по горизонтали

Обратите внимание на пробел между фотографиями, он появляется за счет переноса тега <img> в коде на новую строку. Чтобы убрать пустой промежуток достаточно написать теги <img> в примере в одну строку. http://htmlbook.ru/f...-po-gorizontali


 

 

Сообщение отредактировал махензи: 07 Июнь 2016 - 19:45
убрал форматирование

  • 0

#2 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 705 сообщений
  • Репутация: 405

Отправлено 07 Июнь 2016 - 19:56

Проще банеры оформить как элементы списка и установить для них css-свойство margin. Это будет и правильнее, чем пользовать <br> и &nbsp; и универсальнее, т.к., в зависимости от ширины экрана, где третий не влазит - будет сам перескакивать на новую строку...

 

Когда-то я сталкивался с аналогичной задачей при формировании меню - осталась песочница (меняйте ширину области и наблюдайте изменения).


  • 1
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#3 махензи

махензи
    Topic Starter
  • Пользователь
  • 63 сообщений
  • Репутация: -3

Отправлено 07 Июнь 2016 - 19:58

перескакивать на новую строку...
 он перескакивает,но после прилипает снизу движок ipb-почитаю пока вашу ссылку.
  • 0

#4 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 705 сообщений
  • Репутация: 405

Отправлено 07 Июнь 2016 - 22:38

Например просто добавьте в тег вывода баннера следующий стиль:

< ... style="margin:5px;">

и посмотрите на результат... Под многоточием понимается тег, отвечающий за вывод баннера (<img>, или <a>, или какой-то другой)


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#5 махензи

махензи
    Topic Starter
  • Пользователь
  • 63 сообщений
  • Репутация: -3

Отправлено 07 Июнь 2016 - 23:08

ничего не вышло,может я вам дам скрипт банеров вы сами попробуете у себя? 

<center><a href='http://www.okskie-nozhi.ru' target='_blank'><img src='http://reviewdetector.ml/uploads/monthly_05_2016/post-1-0-60643400-1464295330.gif'Окские ножи'></a>&nbsp;<a href='http://colt911.ru' target='_blank'><img src='http://reviewdetector.ml/uploads/monthly_05_2016/post-1-0-03909000-1464703860.gif'Кольт 911'></a>&nbsp;<a href='http://knife-sl.ru' target='_blank'><img src='http://reviewdetector.ml/uploads/monthly_06_2016/post-1-0-00901000-1465319365.jpg'knife-sl.ru'></a></center>

  • 0

#6 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 705 сообщений
  • Репутация: 405

Отправлено 08 Июнь 2016 - 09:21

@махензи, насколько я что-то понимаю в html, то в коде есть ошибки - какое-то несоответствие открывающих/закрывающих кавычек в этих местах:

src='http://reviewdetector.ml/uploads/monthly_05_2016/post-1-0-60643400-1464295330.gif'Окские ножи'

На мой взгляд должно быть просто:

src='http://reviewdetector.ml/uploads/monthly_05_2016/post-1-0-60643400-1464295330.gif'

или

src='http://reviewdetector.ml/uploads/monthly_05_2016/post-1-0-60643400-1464295330.gif' alt='Окские ножи'

Если исправить ошибку, то Ваш вариант: https://jsfiddle.net/xnap4wvp/

После добавления style="margin:5px;" в теги <img> получаем следующее: https://jsfiddle.net/xnap4wvp/1/

 

Вообще-то рекомендуется эти вещи прописывать через css - раз; тег <center> если я не ошибаюсь считается устаревшим - два.

 

Вот как-то так...


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#7 махензи

махензи
    Topic Starter
  • Пользователь
  • 63 сообщений
  • Репутация: -3

Отправлено 08 Июнь 2016 - 09:47

а куда в ipb вставить CSS 

 *{margin:0;padding:0;line-height:0;}
img{border:1px solid red} 
в (Внешний вид >
Управление стилями и шаблонами >
Управление шаблонами в IP.Board)

 и потом что выбрать?CSS и??


Сообщение отредактировал махензи: 08 Июнь 2016 - 09:52

  • 0

#8 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 705 сообщений
  • Репутация: 405

Отправлено 08 Июнь 2016 - 10:35

@махензи, вот это я не подскажу - я не работаю с движками совсем, понимаю что стили вставляются в файл стилей )))))

 

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

 

Кстати, 5px взято "с потолка", свойство margin позволяет устанавливать хоть для каждой стороны свой индивидуальный отступ. Прочесть можно в htmlbook, насколько я понимаю вы с ним знакомы.


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#9 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 08 Июнь 2016 - 10:48

Грамотно (без устаревших тегов) ваша задача решается примерно так: https://jsfiddle.net/e9xxmh66/

Обратите внимание, что баннеры у вас разной высоты, потому будут неровно стоять в строке.


Сообщение отредактировал yury: 08 Июнь 2016 - 10:50

  • 1

#10 махензи

махензи
    Topic Starter
  • Пользователь
  • 63 сообщений
  • Репутация: -3

Отправлено 08 Июнь 2016 - 12:29

у вас разной высоты, потому будут неровно стоять в строке.

почитаю,там один банер у меня больше других,потому,что я просто добавил туда белую полоску,что б не слипался-по старинке) 


  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru