Добре дошъл/дошла, Гост. Моля, въведи своето потребителско име или се регистрирай.

Влез с потребителско име, парола и продължителност на сесията

Новини:

Автор Тема: 2 снимки в един абзац подравнени в ляво една под друга K2 + JCE  (Прочетена 624 пъти)

Неактивен sashomasho

  • Мега Гуру
  • *
  • Публикации: 2814
  • искам въртолет
  • Репутация: +5
Привет
От години ме мъчи този въпрос но все правя заобиколки.
Как да приложа снимки към статия 2 или повече към един абзац така че да са подрецени една под друга а не разхвърляни по диагонал. Или по една снимка в къси абзаци.
На приложената снимка ще видите какво разместване се получава, когато има по една снимка в абзац, но абзаците са къси и въответно се смесват снимките пореди това че втория абзац се качва в дясното поле за текст и не остава място за снимката. Би трябвало снимката да си стои под другата снима в ляво....
Към момента все пиша повече текст за да слиза по-долу снимката, но писва, а и не е правилно.
Има ли някакво решение?
Онлайн магазин за фототапети

Joomla! България


Неактивен MOn dsoffn

  • Разбирач
  • *
  • Публикации: 1037
  • Репутация: +22
Има да  :D

Единия вариант е да напишеш jquery които да следи за подобно нещо и да добавя нужните класове за да подрежда елементите. Това е фенси варианта, които не си заслужава да се ползва, освен ако не става дума да пренаписваш примерно 20к материала.

Другия вариант е ти ръчно да слагаш класовете. Честно казано вече ще станат почти две години от както съм заебал джумла, точно заради подони мизерийки, които е нормално обществото им да реши, може би още щях да я ползвам ако не се бях обучил да мога да гледам на нещата от по - ясен поглед. Защо го казвам ли? Ами защото не знам дали редактора ще ти позволи, другите системи си имат редактор на код и ако си сложил код които ефентуално ще се форматира от вградения им редактор те предупреждава дали искаш да го пусне, докато в джумла автоматично форматира всичката работа, демек прецаква я. Ако ще го правиш ръчно имай предвид че при всяка редакция ще трябва да го правиш отначало, което е по - отегчително от писането на текст еднократно.

Единия вариант е да сложиш див след края на текста

Кода да изглежда така:

(Снимка стояща от ляво) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut culpa possimus eos fugit, dolorem amet maiores quasi est facilis cupiditate assumenda consequatur aut, soluta atque sed placeat vitae nulla commodi corporis reprehenderit voluptatum quas unde, voluptatibus quidem! Commodi itaque, aperiam saepe illo unde repellendus odio maxime eius fuga eos cum. <div style="clear:both"></div>

Този див може да го слагаш както след текста, така и преди втората снимка. Общо взето дива създава един пълен ред пространство, които е невидим. Използва се основно в този случай и при летящи елементи.

Всъщност джумла си имаше стандартен клас за това нещо и мисля че беше clr, демек може да напишеш и това : <div class="clr"></div> и то би работило.

Има и други начини които са по интелигентни, но не са свързани с форматиране на текста ръчно, ами за кондишъни и специални селекти в цсс, които да добавят невидимия ред при определен селект, примерно след последния параграф, които е след плаваща снимка и т.н

Неактивен Fori

  • Задържал се
  • *
  • Публикации: 135
  • Репутация: 0
ето ти прост метод с малко css и заграждащи div-ове: https://jsfiddle.net/pLvrf4xm/
 ..ето и без добавяне на допълнителен div: https://jsfiddle.net/k1q7w993/
« Последна редакция: 17 Септември, 2017, 14:05:20 от Fori »

Неактивен Бого

  • Администратор
  • Гуру
  • *
  • Публикации: 2178
  • Mercedes-Benz forever
  • Репутация: +27
С html + css и си 6. ;)
Joomla, произлиза от думата Jumla (на суахили), която означава `всички заедно`, като потвърждение на open source инициативата!

Неактивен sashomasho

  • Мега Гуру
  • *
  • Публикации: 2814
  • искам въртолет
  • Репутация: +5
Благодаря за отговорите
<div style="clear:both"></div> върши работа, но прави огромни дупки между абзаците и е валиден само за 1 снимка в абзац

А какво правим с две снимки в един абзац?
Онлайн магазин за фототапети

Неактивен MOn dsoffn

  • Разбирач
  • *
  • Публикации: 1037
  • Репутация: +22
ето ти прост метод с малко css и заграждащи div-ове: https://jsfiddle.net/pLvrf4xm/
 ..ето и без добавяне на допълнителен div: https://jsfiddle.net/k1q7w993/

Fori ти си талант! Дал си два примера и двата грешни! Първия копира всичко което аз съм какзал без грешките, които са добавени очевидно от теб!

Сашомашо, "нулиращия" див се поставя само един път след последния абзац или преди летящата снимка. Не се поставя в преди абзац или преди първата снимка! Никога не се флоатвар елементи в клиарнат елемент, това е изключително грешно и отнема може би тройно повече време на браузъра да рединдира подобна глупост! Демек това дето ти е казал Форката не е правилно. Спазвай правилото което ти обясних и няма да имаш проблеми.

Ако искаш да имаш две снимки от страни на които да имаш текст се прави така:

<div style="float:left">
[Летяща снимка]
[Летяща снимка 2]
</div>
Текста отстрани на снимките.

Ако абзаците са повече изглежда така:

<div>
  <div style="float:left">
    [Летяща снимка]
    [Летяща снимка 2]
  </div>
  Текста отстрани на снимките.
  <div style="clear:both"></div>
</div>

<div>
  <div style="float:left">
    [Летяща снимка]
    [Летяща снимка 2]
  </div>
  Текста отстрани на снимките.
  <div style="clear:both"></div>
</div>

Неактивен sashomasho

  • Мега Гуру
  • *
  • Публикации: 2814
  • искам въртолет
  • Репутация: +5
Благодаря
Ще пробвам
Аз пробвах само с по-една снимка на абзац и съм го направил както си описал - след края на абзаца нулиращия код.
За две снимки Просто текстовия редактор не огражда снимките заедно. Това явно ще да го правя ръчно но пак е нещо ако работи. Ще направя лабораторни тестове :)
Онлайн магазин за фототапети

Неактивен MOn dsoffn

  • Разбирач
  • *
  • Публикации: 1037
  • Репутация: +22
Благодаря
Ще пробвам
Аз пробвах само с по-една снимка на абзац и съм го направил както си описал - след края на абзаца нулиращия код.
За две снимки Просто текстовия редактор не огражда снимките заедно. Това явно ще да го правя ръчно но пак е нещо ако работи. Ще направя лабораторни тестове :)

След края на последния абзац! Не след всеки абзац. Този див които ти казах добавя един цял, невидим ред, не празен, а невидим. Ако има летящи елементи, каквато е снимката след този див всичко започва на нов ред без да се интересува от летящите елементи преди дива.

Неактивен Fori

  • Задържал се
  • *
  • Публикации: 135
  • Репутация: 0
нямам време да следя разговора  ..слушай, окончание на гърба, такова, дори не ми се разговаря с теб. Докато пишех примерите, ти си пуснал своя отговор, който не съм гледал  ..примерите си работят, провери в jsfiddle и си виж.

Сашо, дай скрийншот на две картинки в абзац или скицирай как искаш да са разположени и ще ти дам решение.


Неактивен Михаил Михов

  • Администратор
  • Мега Гуру
  • *
  • Публикации: 3616
  • @Mihail
  • Репутация: +58
    • MyWeb1
Стана ми интересно ;)
Как се задава в css-a тага <p> да бъде на 100%, така че снимката в него с позиция ляво да си стои на мястото ...
myweb1.eu // Български платежни методи за HikaShop

Неактивен MOn dsoffn

  • Разбирач
  • *
  • Публикации: 1037
  • Репутация: +22
Стана ми интересно ;)
Как се задава в css-a тага <p> да бъде на 100%, така че снимката в него с позиция ляво да си стои на мястото ...

Мишо не те разбрах, аз за стилиризиране на параграф не съм говорил!

нямам време да следя разговора  ..слушай, окончание на гърба, такова, дори не ми се разговаря с теб. Докато пишех примерите, ти си пуснал своя отговор, който не съм гледал  ..примерите си работят, провери в jsfiddle и си виж.

Сашо, дай скрийншот на две картинки в абзац или скицирай как искаш да са разположени и ще ти дам решение.



Форка ти тоя грешен код, които НЕ работи колко време го писа талантино? Според статистиката във форума си го писал повече от 30 мин и уж не си забелязал че аз съм дал същия отговор, но без да допусна грешките които ти си направил!

Форка виж ся, като не можеш да следиш разговора, защо се включваш в него? Като не искаш да говориш с мен давай реални и правилни примери и съвети, а не грешни неща направена на база мои постове половин час преди това! Форка излагаш се, имах по - високо мнение за теб, мислих че си наясно че не разбираш нищо и си пълен хал хабер! Сега и да променяш фидъла срама ще си остане!

Последно да те питам? Ти като пишеш стилове през редактора на Джумла, щото вече каза че от други CMS-и не разбираш, та докато пишеш стилове за даден частен случай винаги ли слагаш класове с измислени тъпи имена и добавяш стила в отделен цсс? Какъв е смисъла да правиш нещо което не работи във всички случай примерно, защото ще има параграфи в него и т.н. по доста сложен начин при положение че може да се реши с един ред код както написах аз?
« Последна редакция: 19 Септември, 2017, 09:52:38 от MOn dsoffn »

Неактивен Fori

  • Задържал се
  • *
  • Публикации: 135
  • Репутация: 0
Мишо не те разбрах, аз за стилиризиране на параграф не съм говорил!

Форка ти тоя грешен код, които НЕ работи колко време го писа талантино? Според статистиката във форума си го писал повече от 30 мин и уж не си забелязал че аз съм дал същия отговор, но без да допусна грешките които ти си направил!

Форка виж ся, като не можеш да следиш разговора, защо се включваш в него? Като не искаш да говориш с мен давай реални и правилни примери и съвети, а не грешни неща направена на база мои постове половин час преди това! Форка излагаш се, имах по - високо мнение за теб, мислих че си наясно че не разбираш нищо и си пълен хал хабер! Сега и да променяш фидъла срама ще си остане!

Последно да те питам? Ти като пишеш стилове през редактора на Джумла, щото вече каза че от други CMS-и не разбираш, та докато пишеш стилове за даден частен случай винаги ли слагаш класове с измислени тъпи имена и добавяш стила в отделен цсс? Какъв е смисъла да правиш нещо което не работи във всички случай примерно, защото ще има параграфи в него и т.н. по доста сложен начин при положение че може да се реши с един ред код както написах аз?

Виж, човече, на който не знам името дори, писах го на етапи,т.е., тая разлика от 30 мин. между постовете ни не значи нищо. Може да съм отишъл междувременно да акам, теб какво те интересува. Само това, че си проверил времето ми говори колко дребна душица си. Дадох му решение на Сашо и то работи. Можеш да провериш в jsfiddle. А това, че не искам да комуникирам с теб, е ясно, така, че не продължавай разговора. Ако беше много умен, щеше да оцениш това, че съм изнесъл css-а отделно от html-а, защото това е правилния начин - да отделяш съдържанието от графичното му представяне - дори аз го знам това, при все, че не съм дивелъпър, а графичен дизайнер.

Неактивен sashomasho

  • Мега Гуру
  • *
  • Публикации: 2814
  • искам въртолет
  • Репутация: +5
Не се карайте бре хора... Българска му работа...

Див-а за скрит ред го слагам само след къс абзац за да прати снимката от следващия ред на правилното място т.е. на нов ред.
Правилно ли съм разбрал или този див трябва да го сложа в края на текста не виждам смисъл да е в края на текста...

За двете картинки в абзац ще пиша допълнително и ще дам пример. Да остане малко повече време да си огледам кои статии са проблемни.
Онлайн магазин за фототапети

Неактивен MOn dsoffn

  • Разбирач
  • *
  • Публикации: 1037
  • Репутация: +22
Не се карайте бре хора... Българска му работа...

Див-а за скрит ред го слагам само след къс абзац за да прати снимката от следващия ред на правилното място т.е. на нов ред.
Правилно ли съм разбрал или този див трябва да го сложа в края на текста не виждам смисъл да е в края на текста...

За двете картинки в абзац ще пиша допълнително и ще дам пример. Да остане малко повече време да си огледам кои статии са проблемни.

Абе човек ти четеш ли кво ти пиша. Този див се слага там където искаш след него да започва всичко на нов ред, или след последния абзац или преди втората летяща снимка.

Неактивен sashomasho

  • Мега Гуру
  • *
  • Публикации: 2814
  • искам въртолет
  • Репутация: +5
Абе човек ти четеш ли кво ти пиша. Този див се слага там където искаш след него да започва всичко на нов ред, или след последния абзац или преди втората летяща снимка.

Четох разбира се и го ползвам даже :)
Онлайн магазин за фототапети

Joomla! България