Positioning by CSS for module in article Topic is solved

[Studi-Jo]

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!

[Webdongle]

Welcome
url please

[Studi-Jo]

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?

[Webdongle]

You would need to nest the div the text is in with a div that has the {loadmoduleid 129} in.

[Studi-Jo]

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]

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?

[Webdongle]

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.

[Studi-Jo]

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;

[Webdongle]

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

[Pavel-ww]

.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

[Studi-Jo]

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]

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 !

[Webdongle]

It takes practice and @Pavel-ww is far better at it than I am.

[Pavel-ww]

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]

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

[Pavel-ww]

You are wellcome