Read More button <div> closing

Question

I have a problem with closing a <div>-tag after a "Read more" button.

Within the article editor, Joomla uses a <hr id="system-readmore" /> statement for creating the read more button in an intro-text.

The problem is, that i need to add a <div> tag which surrounds this "readmore"-tag.

Example:

<div style="overflow: hidden;">
    <h3><img class="img_staff" src="images/staff1.jpg" alt="" width="120" height="150" />Test Person</h3>
    <h4><em>Assistant</em></h4>
    <p><strong>Tel:</strong> 0000 0000 0000</p>
    <p><strong>Email:</strong> test@test.com</p>
    <hr id="system-readmore" />
</div>
<div style="clear: left;">
    <h4>Education</h4>
    ...

This example should display an image on the left side and text on the right (image float:left). The "overflow: hidden;" i use to avoid an image, that is bigger than the surronding <div>-Tag (an thus falls out of the <div>-tag).

The problem is, that this first div-tag doesn't get closed in the intro article (as the "readmore" button cuts the code). Is there a solution for this problem in Joomla, or do you know any CSS-solution, to get this desired looking?

Answer 1

There is no pure CSS-solution to it, that's for sure.

In general, there is more than one solution actually:

• the lightest way, especially if not every article is concerned, would be to write down your intro, close the div, put the read-more button and copy your introduction again after the read more-button, configuring the article to not show the introduction text when displaying the whole article.
• you also could, if every article of your site or of a specific menue-item is concerned, override the com_content templates and hard-code the closing tag in it. It's not very beautiful, though
• you could create your own plugin, in order to be able to write something like {myReadMore} in your article instead of using the built-in readmore.

In your case, I don't really understand why it's so important to have the read-more within the first div. Maybe you should see if putting it after the closing tag isn't exactly what you look like.

Answer 2

pagebreak plugin manages this logic, for instance removing hr id="system-readmore" when Presentation Style=Pages.

You can create your own pagebreak plugin to create your custom logic.