Основной курс по Joomla
0 Пользователей и 1 Гость просматривают эту тему.
  • 8 Ответов
  • 348 Просмотров
*

algor

  • Осваиваюсь на форуме
  • ***
  • 44
  • -1
О вёрстке
« : 03.11.2016, 01:57:59 »
Слева картинка1, справа текст (текст не занимает всю высоту картинки).
Ниже
Слева картинка2, справа текст.

Результат - Картинка2 встаёт справа от картинки1 и под её текстом.

Запарился ставить <p> и считать их необходимое число. Чтоб картинки по левой стороне стояли независимо от количества текста. И пусть белые поля остаются .рен с ними.

Более рациональный подход (кроме таблиц) есть? Подскажите "профессионалу"  ^-^
*

AlekVolsk

  • Профи
  • ********
  • 6301
  • 336
Re: О вёрстке
« Ответ #1 : 03.11.2016, 03:06:14 »
каждую пару картинка-текст обязательно оборачивать в блочный элемент (див или в вашем случае абзац), это я вам как профессионал в верстке отвечаю
можно и таблицы, но это не самое изящное решение - таблицы как правило не адаптируемы, на малых экранах кашу получите
*

algor

  • Осваиваюсь на форуме
  • ***
  • 44
  • -1
Re: О вёрстке
« Ответ #2 : 03.11.2016, 04:32:45 »
Так, я понимаю?

<div>
   <figure class="figl500"><img src="images/stories/LensWork/chrabbprizm.gif" alt="" width="492" height="168" />
      <figcaption></figcaption>
   </figure>
   <p>Явление, при котором дисперсией.</p>
</div>
*

Septdir

  • Практически профи
  • *******
  • 2165
  • 109
  • JoomlaZen
Re: О вёрстке
« Ответ #4 : 03.11.2016, 14:07:10 »
Действительно правильно оборачивать. Тут несколько причин. Так же когда юзаете флоат, не забывайте о разделителях. К примеру у родителя(блок в котором находится картинка и текст) может бы стиль clear:both; Либо под картинка + текст может быть div с таким стилем. Либо можно картинке можно назначит clear: left (вроде лево, я вечно путаю) - тогда картинка не будет "облипаться" слева.
Ну и вообще у любого фрейма или же даже у своей таблицы стиля стоит держать класс .clr или .clearfix это очень частно нужно.
Не можете справиться с задачей сами пишите, решу ее за вас, не бесплатно*.
*Интересная задача, Деньги или Бартер. Натурой не беру!
________
Мои Контакты | JoomlaZen
*

algor

  • Осваиваюсь на форуме
  • ***
  • 44
  • -1
Re: О вёрстке
« Ответ #5 : 03.11.2016, 15:01:03 »
типа так

Ну так это оборачивание, и в <р> Тоже, никакого эффекта не даёт. Три блока (картинка-текст) таким образом сделал -эффект - "лесенка" выстраивается. Каждая следующая картинка встаёт справа от предыдущей, под её текстом и т.д.
Может у кого есть "непрофессиональные" советы? Вопрос вроде простой, ну не может он быть нерешаемым...   
*

Septdir

  • Практически профи
  • *******
  • 2165
  • 109
  • JoomlaZen
Re: О вёрстке
« Ответ #6 : 03.11.2016, 16:01:41 »
Ну так это оборачивание, и в <р> Тоже, никакого эффекта не даёт. Три блока (картинка-текст) таким образом сделал -эффект - "лесенка" выстраивается. Каждая следующая картинка встаёт справа от предыдущей, под её текстом и т.д.
Может у кого есть "непрофессиональные" советы? Вопрос вроде простой, ну не может он быть нерешаемым...   
СМ пост выше.
По старинте это так
Блок катинка + текст
Разделитель clear: both;
Блок катинка + текст
Разделитель clear: both;
Блок катинка + текст
Разделитель clear: both;

По хорошему по другому делаеться, наводку я дал. можете почитать, да и вообще хотите, нормального совета особенно по верстке показывайте сайт в живую. Ибо это дело сугубо индивидуально
Не можете справиться с задачей сами пишите, решу ее за вас, не бесплатно*.
*Интересная задача, Деньги или Бартер. Натурой не беру!
________
Мои Контакты | JoomlaZen
*

flyingspook

  • Профи
  • ********
  • 3610
  • 236
Re: О вёрстке
« Ответ #7 : 03.11.2016, 16:35:48 »
Ну так это оборачивание, и в <р> Тоже, никакого эффекта не даёт. Три блока (картинка-текст) таким образом сделал -эффект - "лесенка" выстраивается. Каждая следующая картинка встаёт справа от предыдущей, под её текстом и т.д.
Может у кого есть "непрофессиональные" советы? Вопрос вроде простой, ну не может он быть нерешаемым...   
для блочного элемента стили прописывать надо, тут ни чего сверх естественного нету, вам надо просто стили прописать блоку в которых указать позицию картинке и её окружить текстом с нужными отступами, почитайте [ur=http://htmlbook.ru/content/blochnye-elementyl]тут[/url] и тут
*

algor

  • Осваиваюсь на форуме
  • ***
  • 44
  • -1
Re: О вёрстке
« Ответ #8 : 03.11.2016, 20:41:31 »
Действительно правильно оборачивать. Тут несколько причин. Так же когда юзаете флоат, не забывайте о разделителях. К примеру у родителя(блок в котором находится картинка и текст) может бы стиль clear:both; Либо под картинка + текст может быть div с таким стилем. Либо можно картинке можно назначит clear: left (вроде лево, я вечно путаю) - тогда картинка не будет "облипаться" слева.
Ну и вообще у любого фрейма или же даже у своей таблицы стиля стоит держать класс .clr или .clearfix это очень частно нужно.

Спасибо тебе, добрый человек. Совет дельный, всё заработало.