Рамка вокруг рисунка

[Акула58]

Прошу помочь, вообще вопрос по-моему для спецов пустяковый...

Страничку с примером я выложил в инет: http://www.colormusic.ru/——————-proba.html

Вот в чем вопрос:

есть несколько картинок 16x16 пикселей (3 красных кружка)

вокруг них надо сделать рамку и залить серым фоном, как в примере

Запихиваем их в спан и делаем бордюр.

Но внизу почему-то остается промежуток. Паддинги-маржинги не помогают. Замена на див тоже не помогает.

Нужно расположить кружки по центру прямоугольника с одинаковыми промежутками со всех сторон.

Может кто-нибудь дать совет?

[psywalker]

http://forum.htmlbook.ru/index.php?showtopic=13589

[Акула58]

Большое спасибо за совет!

С интересом прочитал все рекомендации и попробовал их применить на практике

Увы, ни один из этих способов не заработал, может я что-то не так сделал?

Посмотрите пожалуйста, я небольшой спец в ХТМЛ (пока)

Вот все варианты: http://www.colormusic.ru/——————-proba.html

[psywalker]

<span class="brd4">

<img style="vertical-align: sub;" alt="" src="http://www.colormusic.ru/komplekt/circle-r.gif"/>

</span>

[Акула58]

Ну вот, почти получилось: http://www.colormusic.ru/komplekt.html#n

Никак не могу сделать пробел внизу, такой как везде, то есть меньше на 1 пиксел

В ЦСС стиль такой:

span.brd4 {border:#666 1px solid; background:#CCCCCC; padding:2px 2px 0px 2px;}

Третий параметр в padding (нижний отступ) и так уже стоит 0, а на деле - 3 пиксела...

[Акула58]

Помогите пожалуйста подкорректировать код:

Вот тут http://www.colormusic.ru/komplekt.html#n нужно было сделать следующее:

Вокруг цветных кружков нарисовать рамки и залить их серым цветом. В ФФ все получилось хорошо, а в ИЕ эти блоки немного растягиваются, и строки не влезают целиком, из-за этого часть знаков переезжает на новую строку.

Вот код одного из блоков:

<span class="rama"><span class="hole"><img src="komplekt/circle-bl.gif" alt=""></span><span class="hole"><img src="komplekt/circle-bl.gif" alt=""></span><span class="hole"><img src="komplekt/circle-bl.gif" alt=""></span></span>

Вот его стиль:

span.rama{display:inline-block; border:#666 1px solid; position:relative; top:3px}
span.hole{display:inline-block; width:14px; height:14px; padding:1px; background-color:#CCC;}
span.hole img {width:14px; height:14px; float:left}

Как бы заставить ИЕ не расширять блоки?

[psywalker]

Попробуй float:left; вместо инлайн-блоков спанам позадавать начинаая с первого от изображения

[Акула58]

Уважаемый psywalker!

Прошу прощения за дурацкие вопросы, но я делаю только первые шаги, поэтому мне многое непонятно.

Пытался осмыслить ваши советы:

Попробуй float:left

Но у меня вроде уже стоит этот вариант:

span.hole img {width:14px; height:14px; float:left}

или его еще где-то надо вставить?

вместо инлайн-блоков спанам позадавать начинаая с первого от изображения

Какие значения? Длина и ширина там задана, какие тогда значения?

Если нетрудно, чуть более подробно объяснить для начинающего ...

Edited May 4, 2010 by Акула58

[Акула58]

С нетерпением жду совета ...

[psywalker]

Уважаемый psywalker!

Прошу прощения за дурацкие вопросы, но я делаю только первые шаги, поэтому мне многое непонятно.

Пытался осмыслить ваши советы:

Но у меня вроде уже стоит этот вариант:

span.hole img {width:14px; height:14px; float:left}

или его еще где-то надо вставить?

Какие значения? Длина и ширина там задана, какие тогда значения?

Если нетрудно, чуть более подробно объяснить для начинающего ...

Флоат лефт спанам, начиная с самого верхнего

[Акула58]

Попробовал... То что красным - удалено, то что зеленое- добавлено

span.rama{display:inline-block; border:#666 1px solid; position:relative; top:3px}

span.hole{display:inline-block; float:left; width:14px; height:14px; padding:1px; background-color:#CCC;}

span.hole img {width:14px; height:14px; float:left}

Ничего не изменилось, исправленный вариант CSS: http://www.colormusic.ru/use/kvv.css

Там теперь написано так:

span.rama{display:inline-block; border:#666 1px solid; position:relative; top:3px} 
span.hole{float:left; width:14px; height:14px; padding:1px; background-color:#CCC} 
span.hole img {float:left; width:14px; height:14px}

Ссылка на страничку с проблемой: http://www.colormusic.ru/komplekt.html#n

Я так понимаю что сразу все span.hole получили это значение. А для span.rama я тоже пробовал, но это не имеет смысла: сами блоки свою ширину не изменяют, а при этом между ними исчезает пробел, и они склеиваются...

Edited May 5, 2010 by Акула58

[psywalker]

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

[Акула58]

Уважаемый psywalker!

Большое спасибо за готовность уделить часть своего драгоценного времени на помощь начинающим!

Итак выкладываю все о порядку:

1.Давай архив с сайтом

Даю, (точнее с одной проблемной страницей страницей, чтоб уменьшить размер) http://www.colormusic.ru/000/site_error.rar

2.чётко описываешь проблему.

Вот тут нарисованы картинки, схематично обозначающие светильники (типа такого: http://www.colormusic.ru/komplekt.html#l14 ). Состоят они из картинок кружков, обведенных тонкой линией и залитых серым цветом. В Firefox 3.5.9 они показываются так, как и задумано. А в ИЕ между ними появляются дополнительные промежутки, они становятся шире, и текст в строках уже не умещается целиком и на следующих строках образуются хвосты.

3.Говоришь, в каком браузере уже точно всё в порядке.

Все точно в порядке в Firefox 3.5.9

Заранее спасибо!

[psywalker]

Значит я глянул, так ужас дикий. Но я смог всё же порыться и вот единственное, что могу предложить.

1) В спец.комментах для ие написать

	p.grn2 img { margin-left: -4px;}
	p.grn2 span.rama { margin-right: -2px;}

2) Немного расширить страницу до возможного предела.

[ABCroNews]

Народ пожалуйста помогите! Я уже перерыл пол интернета и так и не смог найти ответ на элементарный на первый взгляд вопрос. Как сделать картинку (текстуру) рамкой? То есть имеется некий элемент картинки и нужно что бы он отпекал объект со всех сторон., ну например у вас есть параграф а его отпекает красивая текстура-рамка со всех сторон. Заранее спасибо...

[Justnewone]

Народ пожалуйста помогите! Я уже перерыл пол интернета и так и не смог найти ответ на элементарный на первый взгляд вопрос. Как сделать картинку (текстуру) рамкой? То есть имеется некий элемент картинки и нужно что бы он отпекал объект со всех сторон., ну например у вас есть параграф а его отпекает красивая текстура-рамка со всех сторон. Заранее спасибо...

Обернуть дивом с паддингами со всех сторон и бекграундом текстуры, самому параграфу бекграунд, допустим, белый.

[ABCroNews]

Обернуть дивом с паддингами со всех сторон и бекграундом текстуры, самому параграфу бекграунд, допустим, белый.

Иначе работаю с Joomla, но теперь нужно сделать сайт на DLE., вот что я нашел:

Вот его HTML

<table width="100%"><tr> <td><div style="padding-top: 18px;" class="news">{full-story}</div></td> </tr></table>

А вот его CSS (то есть класс который идет только для картинки):

.news img {border: none; padding: 3px;}

Объясните так сказать на примере, а то мозги уже все разбил., я пытался менять только CSS, так же нашел в интернете множество статей которые получил по запросу "border-image:" http://blog.exentrich.ru/coder/border-image/ Но мне кажется что это что то другое, так и не получилось осуществить задуманное.

[ABCroNews]

Народ ну что мне может кто-нибудь помочь, замучился уже., нечего не получается!

[psywalker]

Сделай див контейнер состоящий из вложенных дивов, навешай на них окружной фон и всё, в чём проблема?