23 сентября 2011 г.

Как разместить картинки рядом?

rulermanrulermanrulerman

Вопрос расположения картинок в ряд пока не был актуален для меня, считала это сложным и обходила его стороной. А тут на одном форуме заметила такой вопрос, прочитала ответ. Из комментариев поняла что у задающего вопрос ничего не получилось и решила поэкспериментировать сама.

border
Код


<div style="float: left;">
<a class="feed-link" href="http://ссылка1"><img alt="123" border="o" src="http://картинка1" title="Рис.1" /></a></div>
<div style="float: left;">
<a class="feed-link" href="http://ссылка2"><img alt="345" border="o" src="http://картинка2" title="Рис.2" /></a></div>
<div style="float: left;">
<a class="feed-link" href="http://ссылка3"><img alt="678" border="o" src="http://картинка3" title="Рис.3" /></a></div>


Код казался понятен.  Вместо выделенного красным и синим вставила код картинки из Пикаса. Посмотрела. Стоят мои картинки как рота солдат на плацу, тесно прижавшись друг к другу. Равнение налево. Меня это совсем не устраивает. Хотелось бы чтобы они стояли на расстоянии вытянутой руки и равнение было по центру. Меня слушаться не хотят. Чуть прикоснулась к ним мышкой, так разбежались в разные стороны как по команде "Вольно". Пробовала менять Left  на center или right - никакого результата. Выстраиваются рядышком, но только по вертикали. Все хотят быть первыми. Долго я их передвигала, это напоминало игру в пятнашки. Результат нулевой. Но все-же я их построила. Не захотели слушать меня, назначим "Лидера". Таким лидером оказалась, как ни банально, картинка под номером один. Поставила ее по центру, благо в Блоггере это не проблема. А последующие номера подводила с правой стороны. Если какая-то картинка задерживалась справа, нажимала на нее и кликала "Выровнять по центру". С тремя картинками проблем особых и не было.

Решила усложнить задачу: поставить 5 картинок, да еще и со ссылками. Как у виджета Linkwithin. Вместо выделенного синим, как и раньше, вставила код подготовленных картинок. А вместо выделенного красным - ссылки на статьи, куда должны вести картинки. Alt и Title тоже прописала. Подправила их мышкой как в предыдущем примере. Результат вполне устраивал.

Все о картинках. Можно почитать.

anchorPicMarkrКоллажLinkWithinHTML

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



Картинки располагаются в одну строку по горизонтали, а которые не помещаются по ширине,  переносятся на следующую. Но подправить их тоже нужно с помощью мышки и только так как я писала, справа налево. 
Раз уж так все легко получилось, попробуем вариант с увеличением картинки. Вставляем из компьютера через редактор подготовленную картинку большого размера. Из визуального редактора переключаемся на вкладку Изменить HTML. Выделяем код своей картинки. Он имеет такой вид:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-
Ycmf7RsKWKM/TnsmbAmJfrI/AAAAAAAABBQ/0NrqIcD5o5M/s1600/Kiev2kk.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://2.bp.blogspot.com/-Ycmf7RsKWKM/TnsmbAmJfrI/AAAAAAAABBQ/0NrqIcD5o5M/s320/Kiev2kk.jpg" width="320" /></a></div>

Выделенное розовым, ссылку -  не трогаем. А вот со второй половиной (голубой) поработаем.  Все изменения производим на вкладке Изменить HTML. Сначала уменьшим размер картинки. Я хочу поставить 3 картинки в ряд. Учитывая ширину поста и зазоры между картинками, решила что примерная ширина картинки должна быть width="160". А чтобы пропорции изображения остались неизменными, высота height="120". Зная исходный размер картинки, посчитать пропорции несложно или загляните в редактор, где обрабатываете свои изображения. Ну и чтоб уж было все по-правилам, вставляем Alt и Title.  Подправленный код будет выглядеть так:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-Ycmf7RsKWKM/TnsmbAmJfrI/AAAAAAAABBQ/0NrqIcD5o5M/s1600/Kiev2kk.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img  alt="Киев" border="0" height="120" src="http://2.bp.blogspot.com/-Ycmf7RsKWKM/TnsmbAmJfrI/AAAAAAAABBQ/0NrqIcD5o5M/s320/Kiev2kk.jpg" width="160"  title="Как разместить картинки рядом"/></a></div>

Аналогичным образом подправила код двух других картинок и поняла что уже чему-то научилась. Попробуйте кликнуть.

КиевКиевКиев

Для полного завершения мне не хватало рамок. Я их, изрядно помучившись, перебрав известные мне варианты, все-же соорудила и была довольна. Описывать не буду, это громоздко. Зато после всех моих мучений нашла элегантный выход. Сейчас попробуем им воспользоваться.

<style type="text/css">
   .thumb img {
    border: 2px solid #55c5e9; /* Рамка вокруг фотографии */
    padding: 5px; /* Расстояние от картинки до рамки */
    background: #666; /* Цвет фона */
    margin-right: 10px; /* Отступ справа */
    margin-bottom: 10px; /* Отступ снизу */
   }
  </style>
<div class="thumb">

Данную шапочку, отвечающую за добавление рамки и цветной области вокруг  картинок, добавим перед кодом, с которого начиналась статья.


<style type="text/css">
   .thumb img {
    border: 2px solid #55c5e9; /* Рамка вокруг фотографии */
    padding: 5px; /* Расстояние от картинки до рамки */
    background: #666; /* Цвет фона */
    margin-right: 10px; /* Отступ справа */
    margin-bottom: 10px; /* Отступ снизу */
   }
  </style> 
<div class="thumb">




<div style="float: left;">
<a class="feed-link" href="http://ссылка1"><img alt="123" border="o" src="http://картинка1" title="Рис.1" /></a></div>
<div style="float: left;">
<a class="feed-link" href="http://ссылка2"><img alt="345" border="o" src="http://картинка2" title="Рис.2" /></a></div>
<div style="float: left;">
<a class="feed-link" href="http://ссылка3"><img alt="678" border="o" src="http://картинка3" title="Рис.3" /></a></div>



Так стали выглядеть наши человечки.

rulermanrulermanrulerman
Добавить рамочку можно и к картинкам с мышатами, вставляемыми через кнопку в редакторе.





Приглашаю Вас присоединиться ко мне в следующих сервисах:

Чтобы автоматически узнавать об обновлениях блога, подпишитесь на  RSS-канал


Понравилась статья? Поделитесь с друзьями.

15 коммент.:

Татьяна Ступак

Ура. я нашла для себя еще одного учителя в интернете! Верочка, замечательный язык изложения, простой и понятный. Чувствуется, что ты щедро делишься знаниями, которые приобретешь сама. Каждому посетителю твоего блога становится понятна истина, что "не святые горшки лепят". Ты пример того, что любой человек может сделать сайт или блог, любой человек может быть востребован в интернете, если сам будет образовываться и делиться приобретенными знаниями. А еще очень нравится, что ты никому ничего не навязываешь.

Анонимный

Спасибо, все никак не мог найти как картинки рядом поместить.

научиться

спасиб!!!

Анонимный

Спасибо

Ольга Евстифеева

Я тоже очень рада, что набрела на этот блог случайно. Как раз несколько дней назад мучилась с картинками, теперь попробую это сделать правильно. Спасибо!

леонид

Спасибо действительно полезный пост! Я несколько раз просматривал его этот пост, у меня он даже в закладках стоит. Сейчас решил только отблагодарить! спасибо ещё раз!

Татьяна

Вера, здравствуйте! Я опять к Вам со своими вопросами. Вот тут у вас картинки в ряд, а у меня проблема в другом... они не хотят ровно в столбик становиться ))) Начинаю писать новое сообщение, пишу заголовок, вставляю фото... заголовок оказывается под фото... я его переписываю вверху и первая картинка у меня смещается влево... ничего не могу сделать. Методом "тыка" как то выравнивала, но все повторяется и уже ничего не могу сделать.
Буду благодарна если поможете.

Вера Борок

Татьяна, у меня создалось впечатление, что вы не там вписываете заголовок. Он пишется в отдельной рамке рядом с "Сообщение".

Ares

Аллелуйя почему ваш блог я не нашел раньше Спасибос .Понял что , еще полный чайник в блоггере.......

niilit51

Спасибо за полезный пост! Вот уже третий раз брожу по Вашей страничке и мне очень нравится.Только вот не все могу понять как что делать.Но ничего будем учиться.

Максим Волченко

Спасибо)) Это гениально)) А то блоггер другие варианты вообще не принимает))

Алексей

Уважаемая Вера, есть ещё классное средство -- таблицы. Не знаю, можно ли вставить в блоггере, но это старый проверенный способ. В Вашем случае надо было сделать таблицу из 1 строки и 3 столбцов (всего 3 ячейки), с невидимыми границами (толщина = 0), в каждую ячейку поместить картинку.

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

Анонимный

Подскажите куда код вставлять в стили css

Вера Борок

Ответ Гостю - в посте я описала свой поиск ответа на вопрос как разместить картинки рядом. Итог - код не нужен. Вставляйте картинки через кнопку, как обычо. А затем подправьте их мышкой, как я написала .

Команда интернет-проекта "Бизнес-карьера на 1 000 000$"

Вера, подскажите, как на одну картинку в блоггере наложить вторую поменьше со ссылкой?

Отправить комментарий

Related Posts Plugin for WordPress, Blogger...