Форум русской поддержки Joomla!® CMS
08.12.2016, 04:17:08 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

О вёрстке

 (Прочитано 175 раз)
0 Пользователей и 2 Гостей смотрят эту тему.
algor
Осваиваюсь на форуме
***

Репутация: +0/-1
Offline Offline

Сообщений: 41


« : 03.11.2016, 00:57:59 »

Слева картинка1, справа текст (текст не занимает всю высоту картинки).
Ниже
Слева картинка2, справа текст.

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

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

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

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6458



« Ответ #1 : 03.11.2016, 02:06:14 »

каждую пару картинка-текст обязательно оборачивать в блочный элемент (див или в вашем случае абзац), это я вам как профессионал в верстке отвечаю
можно и таблицы, но это не самое изящное решение - таблицы как правило не адаптируемы, на малых экранах кашу получите
Записан
algor
Осваиваюсь на форуме
***

Репутация: +0/-1
Offline Offline

Сообщений: 41


« Ответ #2 : 03.11.2016, 03:32:45 »

Так, я понимаю?

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

Репутация: +226/-9
Offline Offline

Сообщений: 3534


« Ответ #3 : 03.11.2016, 12:10:04 »

типа так
Записан
Septdir
Живу я здесь
******

Репутация: +35/-3
Offline Offline

Пол: Мужской
Сообщений: 838


Skype: septdir


« Ответ #4 : 03.11.2016, 13:07:10 »

Действительно правильно оборачивать. Тут несколько причин. Так же когда юзаете флоат, не забывайте о разделителях. К примеру у родителя(блок в котором находится картинка и текст) может бы стиль clear:both; Либо под картинка + текст может быть div с таким стилем. Либо можно картинке можно назначит clear: left (вроде лево, я вечно путаю) - тогда картинка не будет "облипаться" слева.
Ну и вообще у любого фрейма или же даже у своей таблицы стиля стоит держать класс .clr или .clearfix это очень частно нужно.
Записан
algor
Осваиваюсь на форуме
***

Репутация: +0/-1
Offline Offline

Сообщений: 41


« Ответ #5 : 03.11.2016, 14:01:03 »

типа так

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

Репутация: +35/-3
Offline Offline

Пол: Мужской
Сообщений: 838


Skype: septdir


« Ответ #6 : 03.11.2016, 15:01:41 »

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

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

Репутация: +226/-9
Offline Offline

Сообщений: 3534


« Ответ #7 : 03.11.2016, 15:35:48 »

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

Репутация: +0/-1
Offline Offline

Сообщений: 41


« Ответ #8 : 03.11.2016, 19:41:31 »

Действительно правильно оборачивать. Тут несколько причин. Так же когда юзаете флоат, не забывайте о разделителях. К примеру у родителя(блок в котором находится картинка и текст) может бы стиль clear:both; Либо под картинка + текст может быть div с таким стилем. Либо можно картинке можно назначит clear: left (вроде лево, я вечно путаю) - тогда картинка не будет "облипаться" слева.
Ну и вообще у любого фрейма или же даже у своей таблицы стиля стоит держать класс .clr или .clearfix это очень частно нужно.

Спасибо тебе, добрый человек. Совет дельный, всё заработало.
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet