Working with DIVs

You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours

Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#116870 Working with DIVs

Posted in ‘Editor’

This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by Dom54 on Monday, 14 October 2024 10:44 BST

Friday, 20 September 2024 11:48 BST

Dom54

Dear,

Working with latest pro version (guess you know, as I can post here ;o)) am looking for a way to set some "blocks". Attaching text and image together, and doing so, for next paragraph/image pairs.
Seems the only way is getting a DIV, which works from the editor code, but would like to get it from the Wysiwyg editor (not the code tab).
As from help pages, I wanna see the "Layer" button, but it seems to be missing from my interface, and so, am missing it to set in my tool bar :/
How should I set it ?

I seems to be possible using keyboard shortcuts ALT+ENTER

Is there a way to wrap content (multiple P) in a DIV or should I move each P in a previously created DIV ?

Further more, is there a way to edit a DIV ?
I mean creating attributes like display block or other (just as what we have for example with images setting border, align and more ?)

Thanks for clues

Friday, 20 September 2024 12:09 BST

Ryan

Working with latest pro version (guess you know, as I can post here ;o)) am looking for a way to set some "blocks". Attaching text and image together, and doing so, for next paragraph/image pairs.
Seems the only way is getting a DIV, which works from the editor code, but would like to get it from the Wysiwyg editor (not the code tab).

This is basically what the Columns tool is for - https://www.joomlacontenteditor.net/support/documentation/columns/creating-and-editing-columns

Is there a way to wrap content (multiple P) in a DIV or should I move each P in a previously created DIV ?

You can use the DIV Container option in the Format list to wrap a paragraph in a div.

Further more, is there a way to edit a DIV ?
I mean creating attributes like display block or other (just as what we have for example with images setting border, align and more ?)

You can set various attributes using the Attributes dialog (the Cog button in the editor toolbar) or add classes using the Styles list.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Wednesday, 09 October 2024 10:54 BST

Dom54

Thanks Ryan for the tips... (and sorry for delay, was off a while :()

As for the columns tool, can't figure out how to do with images...
Please see what I have / want (see attached)

So, I moved to Divs (should be more complex !) where I "wrap" some text and image... adding some style
style="background-color: #f2f1ef; padding: 5px; display: grid; margin: 0 0 0 0;"
to make the div a container... and prevent following text to mix-up..
Should you have a better (simply) way to fix it ?

As for the Cog button... am puzzled... I would like to create my own style from JCE... setting my style="background-color: #f2f1ef; padding: 5px; display: grid; margin: 0 0 0 0;" but in a style and not in the HTML? to be able to use from anywhere...
Is that possible from JCE or should I create a custom style and add it ?

Best

Attachments

Wednesday, 09 October 2024 12:29 BST

Ryan

I would like to create my own style from JCE... setting my style="background-color: #f2f1ef; padding: 5px; display: grid; margin: 0 0 0 0;" but in a style and not in the HTML? to be able to use from anywhere...
Is that possible from JCE or should I create a custom style and add it ?

You would need to do this either with Custom Styles - https://www.joomlacontenteditor.net/support/tutorials/editor/creating-custom-styles

or by adding a css rule to your template stylesheet, eg:

.my_style {
    background-color: #f2f1ef; 
    padding: 5px; 
    display: grid; 
    margin: 0 0 0 0
}

which you could then select and apply from the Styles list.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Edited by Ryan on 2024-10-09 12:29 BST

Monday, 14 October 2024 10:44 BST

Dom54

All done.

Working like a charm with the CSS merge you've done...

Thanks for all