[X] Помощник

[LevShliman Topic Starter]

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

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

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

Сообщение отредактировал махензи - 7.6.2016, 20:45

Причина редактирования: убрал форматирование

[ShowPrint]

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

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

[LevShliman Topic Starter]

перескакивать на новую строку...

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

[ShowPrint]

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

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

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

[LevShliman Topic Starter]

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

<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>

[ShowPrint]

махензи, насколько я что-то понимаю в 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> если я не ошибаюсь считается устаревшим - два.

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

[LevShliman Topic Starter]

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

 *{margin:0;padding:0;line-height:0;}
img{border:1px solid red} 

в (Внешний вид >

Управление стилями и шаблонами >

Управление шаблонами в IP.Board)

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

Сообщение отредактировал махензи - 8.6.2016, 10:52

[ShowPrint]

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

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

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

[yury_mw]

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


Сообщение отредактировал yury - 8.6.2016, 11:50

[LevShliman Topic Starter]

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

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