Positioning by CSS for module in article Topic is solved

General questions relating to Joomla! 4.x.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10
Post Reply
Studi-Jo
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Sat Jan 21, 2023 4:05 pm

Positioning by CSS for module in article

Post by Studi-Jo » Sat Jan 21, 2023 4:13 pm

I embedd a module (for an image slide show) into an article by {loadmoduleid 129}.
The slide show works in the article but the position/allignment is not want I want.
As the HTML code only has {loadmoduleid 129}, I think I have to use CSS.

In the module with id 129, my image slide show, under the advanced tap -> Module Class -> I have 'startslider'

My user.css contains:

Code: Select all

.startslider {
  margin-right: 20px; 
  margin-bottom: 10px; 
  border: 2px solid #474747; 
  float: left;
}
All other user.css content works.

I would suspect that the image slide show is now on the left of the article but it's not.

What is missing or wrong?

Thanks in advance!
Last edited by imanickam on Sun Jan 22, 2023 5:30 am, edited 1 time in total.
Reason: Corrected the spelling of CSS from CCS

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 42364
Joined: Sat Apr 05, 2008 9:58 pm

Re: Positioning by CCS for module in article

Post by Webdongle » Sat Jan 21, 2023 4:29 pm

Welcome
url please
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".

Studi-Jo
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Sat Jan 21, 2023 4:05 pm

Re: Positioning by CCS for module in article

Post by Studi-Jo » Sat Jan 21, 2023 5:34 pm

http://www.studi-jo.be/joomla/
In the meantime I found that the CSS for the div is .djslider-loader-default.
I changed my user.css to:

Code: Select all

.djslider-loader-default {
  margin-right: 20px; 
  margin-bottom: 10px; 
  border: 2px solid #474747; 
  float: left;
}
The 'image slide show' is now on the left side as I want it, but there is no text next to the image.
I want the text next to the 'image slide show' as on top of my page.
Any idea how to achieve that?

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 42364
Joined: Sat Apr 05, 2008 9:58 pm

Re: Positioning by CCS for module in article

Post by Webdongle » Sat Jan 21, 2023 6:56 pm

You would need to nest the div the text is in with a div that has the {loadmoduleid 129} in.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".

Studi-Jo
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Sat Jan 21, 2023 4:05 pm

Re: Positioning by CCS for module in article

Post by Studi-Jo » Sat Jan 21, 2023 7:17 pm

Hi Webdongle, thanks for your reply!
I'm a newbie, so as far as I understood I had to do the below:

My html was like this:
<div>{loadmoduleid 129}</div>
<div>Text text text</div>

I changed it to:
<div>{loadmoduleid 129} Text text text</div>

but on the frontpage I don't see any change.

Studi-Jo
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Sat Jan 21, 2023 4:05 pm

Re: Positioning by CCS for module in article

Post by Studi-Jo » Sat Jan 21, 2023 8:50 pm

I read about nested div elements so I changed my html to:

<div><div>{loadmoduleid 129}</div>Text text text</div>
But unfortunately without result.

Can someone tells me how to change?

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 42364
Joined: Sat Apr 05, 2008 9:58 pm

Re: Positioning by CCS for module in article

Post by Webdongle » Sat Jan 21, 2023 9:18 pm

Try something like
<div class="env">
<div class="modimb">{loadmoduleid 129}</div>
<div class="modtxt">Text text text</div>
</div>

In your user.css define those classes as float left.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".

Studi-Jo
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Sat Jan 21, 2023 4:05 pm

Re: Positioning by CCS for module in article

Post by Studi-Jo » Sat Jan 21, 2023 10:09 pm

Thanks again Webdongle, I tried but it doesn't work. Space on the right of the image remains empty.

html:
<div class="env">
<div class="modslider">{loadmoduleid 129}</div>
<div class="modtekst">Ik zorg keer op keer voor een geslaagd feest waar je genodigden nog lang zullen over napraten.<br /> Hoe ik dit doe lees je onder de&nbsp;<a href="index.php?option=com_content&amp;view=article&amp;id=18:do-and-dont&amp;catid=2:uncategorised">do's and don'ts</a>. Bereid je voor op een dynamische mix van herkenbare danshits met classics van vroeger tot hedendaagse songs.<br /> Mashups en grappige samples zorgen voor dat tikkeltje extra. Uiteraard wordt <a href="index.php?option=com_content&amp;view=article&amp;id=10:hoe-ga-ik-te-werk&amp;catid=9:help&amp;Itemid=118">je persoonlijke voorkeur</a> op voorhand besproken.</div>
</div>

user.css:

.env {
float: left;
}

.modslider {
float: left;
}

.modtekst {
float: left;

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 42364
Joined: Sat Apr 05, 2008 9:58 pm

Re: Positioning by CCS for module in article

Post by Webdongle » Sat Jan 21, 2023 10:47 pm

try

.env {
clear: both;
}

.modtekst {
float: right;

I don't know the correct combination/syntax but that sort of method is what you need. Unless someone, who knows exactly, jumps in on this thread it will be just a matter of trial and error.

https://www.w3docs.com/snippets/css/how ... image.html (for image tag read {loadmoduleid 129}).

https://stackoverflow.com/questions/172 ... er-in-html
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".

User avatar
Pavel-ww
Joomla! Guru
Joomla! Guru
Posts: 894
Joined: Tue Jun 30, 2020 12:17 pm

Re: Positioning by CCS for module in article

Post by Pavel-ww » Sun Jan 22, 2023 8:48 am

Studi-Jo wrote:
Sat Jan 21, 2023 10:09 pm

.env {
float: left;
}

.modslider {
float: left;
}

.modtekst {
float: left;
Hi. Remove all this and try it instead

Code: Select all

.env {
	display: flex;
	align-items: center;
	margin-top: 20px;
}
Will look like this
1.jpg
You do not have the required permissions to view the files attached to this post.

Studi-Jo
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Sat Jan 21, 2023 4:05 pm

Re: Positioning by CSS for module in article

Post by Studi-Jo » Sun Jan 22, 2023 10:12 am

Hi, thanks for your reply.
The result of your '4-line' CSS has the same result of Webdongles approach.

Anyway, I see strange things:

My html is like this:

<p>introductiontext</p>

<div class="env">
<div class="modslider">{loadmoduleid 129}</div>
<div class="modtekst">text B</div>
</div>

<p>text C</p>

I suspect to have text B next to the image / image slider, but instead text C is next to the image and text B appears where text C should be...

Studi-Jo
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Sat Jan 21, 2023 4:05 pm

Re: Positioning by CSS for module in article

Post by Studi-Jo » Sun Jan 22, 2023 10:37 am

Understand the nesting of div's and my html code is exaclty as explained on w3schools but the result is different.
Don't understand the logic behind (unfortunately) but I played around with the order of text and I'm happy with the final result.
Thank you @Webdongle and @Pavel-ww !

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 42364
Joined: Sat Apr 05, 2008 9:58 pm

Re: Positioning by CSS for module in article

Post by Webdongle » Sun Jan 22, 2023 11:01 am

It takes practice and @Pavel-ww is far better at it than I am.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".

User avatar
Pavel-ww
Joomla! Guru
Joomla! Guru
Posts: 894
Joined: Tue Jun 30, 2020 12:17 pm

Re: Positioning by CSS for module in article

Post by Pavel-ww » Sun Jan 22, 2023 12:35 pm

Studi-Jo wrote:
Sun Jan 22, 2023 10:37 am
Understand the nesting of div's and my html code is exaclty as explained on w3schools but the result is different.
Don't understand the logic behind (unfortunately) but I played around with the order of text and I'm happy with the final result.
Thank you @Webdongle and @Pavel-ww !
Your HTML marking was changed compared to what I saw when I gave an example of code. Now you have unnecessary elements. In fact, all that you need for layout with the current marking is only -

html

Code: Select all

<div class="modslider">{loadmoduleid 129}</div>
css

Code: Select all

.modslider {
	float: left;
}
And nothing more

Studi-Jo
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Sat Jan 21, 2023 4:05 pm

Re: Positioning by CSS for module in article

Post by Studi-Jo » Mon Jan 23, 2023 9:29 pm

Thanks, I removed the other 'code'. Less space now on top of the image, so much better. THANKS!

User avatar
Pavel-ww
Joomla! Guru
Joomla! Guru
Posts: 894
Joined: Tue Jun 30, 2020 12:17 pm

Re: Positioning by CSS for module in article

Post by Pavel-ww » Tue Jan 24, 2023 7:35 am

You are wellcome


Post Reply

Return to “General Questions/New to Joomla! 4.x”