Ну, вот опять выходные и я все сижу над блогом и пыхчу.
Сегодня ударило в голову сделать в ряд картинки в постах. Я конечно не фотограф
и картинок у меня не много, но в жизни всякое
бывает, а такие процедуры нужно
знать. Тем более что я хочу довести блог о вязании до ума, там достаточно много
картинок, которые разбросаны в хаотичном порядке, которое мне ну совсем не
нравиться.
Времени уйдет относительно много, но думаю результат того стоит.
И так изрядно порывшись
в интернете, нашла несколько способов поставить картинки в ряд.
1 способ, он предназначен для 2х картинок в ряд, хоть и верстальщики его
называют примитивный для новичков, я считаю, он подойдет, да и мучиться не долго.
Что бы не запутались вот так код выглядит
|
 |
| после изменений |
И так начнем:
Пишем свой текст и загружаем несколько картинок, показываю пример правки одной картинки
|
|
Что бы не запутались вот так код выглядит
После добавления второй картинки код уже будет выглядит вот так:
Теперь нам нужно удалить вот этот код в самом начале <br />
<div class="separator" style="clear: both; text-align: center;">
и межу картинками
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
и в конце
</div>
<br />
а вместо него нужно вставить вот этот код<div class="separator" style="clear: both; text-align: center;">
и межу картинками
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
и в конце
</div>
<br />
<table>
<tr>
<td>
Здесь код первой картинки.
</td>
<td>
Здесь код второй картинки.
</td>
</tr>
</table>
<tr>
<td>
Здесь код первой картинки.
</td>
<td>
Здесь код второй картинки.
</td>
</tr>
</table>
То есть код HTML будет иметь такой вид
На этом все, второй способ опишу уже завтра
Код был взят от сюда
А я как чайник, по старинке делаю - одну картинку выровнять по левому краю, другую - по правому, потом чуть с размерами поэкспериментировать, а то иногда не влезает в ряд, и все :D Но получается не всегда симпатично. Надо попробовать как Вы говорите, так что спасибо за науку! :)
ОтветитьУдалитьИрина рада что смогла помочь, способ конечно только на 2 картинки, но заморачиваться меньше. Сегодня просто нет сил еще одну статью писать там до 4 шт в строчку можно поместить, правда повозиться нужно будет:)
УдалитьДо того как нашла эти коды тоже с картинками также мучалась
Анна, спасибо за статью! У меня получилось вот так http://maminydochki.blogspot.ru/2013/01/blog-post_10.html.
ОтветитьУдалитьКак-нибудь потренируюсь по ч картинки в ряд. Очень рада. что знакома с этим блогом и с вами( тобой??)
Альфия видела очень чудесные пингвины:) Меня можно на ты, я как Карлсон в расцвете сил:) Тоже рада знакомству!
УдалитьВидимо, я даун, попробовала, ничего не поняла (не разобралась) делаю по старому выравнивая то спрва то слева(((
ОтветитьУдалитьОльга не отчаивайтесь, мне тоже по началу было сложно! Теперь легче, и то вечно путаюсь. Немного времени и тренировок:)и у вас все выйдет!
УдалитьСпасибо за урок, Анечка! Я тоже новичок в блоговедении , так что буду постигать науку писания Блога вместе с вами!
ОтветитьУдалитьСпасибо за урок! Надо приступить к выполнению:))
Не за что Жанна рада что пригодилось))
УдалитьАнна, а у меня не получается - когда вставляю выскакивает сообщение "Ваш код HTML не может быть принят: Закрывающий тег без соответствующего открывающего тега: DIV". И не совсем понятно куда вставлять код второй картинки? Если мы удаляем коды в самом начале, затем между картинками и в конце. Зачем тогда код второй картинки? Если смотреть всё в кодах, то почему-то указано как бы четыре кода картинок вместо двух?? Как быть??!!
ОтветитьУдалитьпопробую детально объяснить
Удалитьпервый код это как бы длина картинки, второй код это как бы ширина, если 2 картинки то получается 4 кода.
Да при стирании центрирования выскакивает что тег не закрыт, но если вставить тот код что я показала и обновиться, этого всплывающего окна не будет.
Мы удаляем код центрирования картинок, а не код самих картинок, то есть смещаем их, вставляя предложный код < table >
< tbody >
< tr >
мы размещает расстояние между ними по горизонтали.
Спасибо, попробую!!!
УдалитьАня, теперь у меня другая проблема - картинки встали рядом. вместе, но они очень широкие, т.е. одна "вылезает" за рамки и заходит на территорию других разделов. Как быть в этом случае???
УдалитьЛана посмотри внимательно на код и найди это значение width="будет размер" его нужно подогнать под нужную ширину.
УдалитьМне немного проще я знаю что ширина моих постов она равна 460, а значит что бы мои картинки не вылазили за территорию мне нужно указать например вместо width="430" на width="230" для одной картинки и так же для второй
Аня, я экспериментировала раз 5, наверное... Что бы понять принцип. Но ты, не упомянула, что необходимо внести коррективы в размер картинки. Я это уже делала вручную. В блоге Веры Борок http://veraborok.blogspot.ru/2011/09/blog-post_23.html об этом говорится. Может это кому-то поможет. После корректировки размеров у меня всё встало на место!
ОтветитьУдалить