Highlighted

Creating a simple two column layout

New Here ,
Mar 24, 2020

Copy link to clipboard

Copied

Another basic question!

I have a topic containing a few paragraphs of text. A way down the page, I want an image on the left, with some relevant text on the right... then more paragraphs beyond that.


Sometimes the text to the right of the image will be deeper than the image itself, but I don't want the text to wrap back under the image, so the only way I can see of doing this in the UI is inserting a table. I'm still getting into the basics of figuring out how to apply styles for all the various elements in play; the table, rows, columns, the style applied to the image itself, and the text to the right. Selecting those elements and adjusting them in the UI is fiddly.

I could get into the source and am comfortable with the code and with CSS, but I'd really like to do this in the UI.

How do experienced users approach something so simple?


Thanks 🙂

 

EDIT: This is in RH 2019.0.11

Views

506

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Creating a simple two column layout

New Here ,
Mar 24, 2020

Copy link to clipboard

Copied

Another basic question!

I have a topic containing a few paragraphs of text. A way down the page, I want an image on the left, with some relevant text on the right... then more paragraphs beyond that.


Sometimes the text to the right of the image will be deeper than the image itself, but I don't want the text to wrap back under the image, so the only way I can see of doing this in the UI is inserting a table. I'm still getting into the basics of figuring out how to apply styles for all the various elements in play; the table, rows, columns, the style applied to the image itself, and the text to the right. Selecting those elements and adjusting them in the UI is fiddly.

I could get into the source and am comfortable with the code and with CSS, but I'd really like to do this in the UI.

How do experienced users approach something so simple?


Thanks 🙂

 

EDIT: This is in RH 2019.0.11

Views

507

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 24, 2020 0
Adobe Community Professional ,
Mar 24, 2020

Copy link to clipboard

Copied

Which version of Robohelp are you using? While you may have posted the information previously, it can help people later decide if the information is (still) relevant to them.  Also, I have the memory of a fish and need all the help I can get. 😛

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 24, 2020 0
New Here ,
Mar 24, 2020

Copy link to clipboard

Copied

Doh, you're right, I should have said! RH 2019.0.11

I'll update my first post too.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 24, 2020 0
Adobe Community Professional ,
Mar 24, 2020

Copy link to clipboard

Copied

In Classic, with a table.

 

In New, I just investigated, and with a table. 😛

 

There are css methods, but they're complicated in css and there's no UI for it in New UI that I could see.

 

You can create a table style which will save you a lot of time manually configuring each table (borders, heading row formatting, etc), and will also mean you can change all tables just by changing the style.

 

If you can describe specific issues that are fiddly we can probably offer suggestions.

 

[Please use the Reply button AT THE TOP OF THE PAGE to ensure replies are in time order]

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 24, 2020 0
Adobe Employee ,
Mar 24, 2020

Copy link to clipboard

Copied

Multi column authoring is well supported in New UI. If you want to generate PDF or Word from it then it is not but for HTML based output it will work properly.

See the following screenshot of the CSS editor where you will find it.

 

image.png

 

This is how it will be in the editor.

image.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 24, 2020 1
New Here ,
Mar 24, 2020

Copy link to clipboard

Copied

The only reply button at the top of the page is the one below my original post, is this what you mean?

@VivekKumar thank you; this is for PDF primarily, but I'll also generate CHM files in other projects so the HTML approach will be helpful there!

@Amebr, thank you for testing!
If I create a table with one row and two columns, and drag my image in the left and add text to the right, the image is padded within the cell, so I can't align the image top with the text in the other column.


I created a style with no margins or padding, and tried applying that to the image, the table, the row and the cells one at a time - I guess the table is inheriting from somewhere so my theory was that I'd find a working override somewhere, but that didn't work.

I realise as I type that I used a paragraph style which was probably my mistake; not sure which type would be correct.

Setting the image position to absolute that seemed to fix it, but then I had a border around the image I couldn't find a way to remove. I know it'll be somewhere, just haven't been able to find it yet. I now can't reproduce that, and absolute position no longer fixes it so I've obviously changed something else in my explorations!


Thanks very much for your time helping figure this out.


In terms of the fiddly UI, I did eventually figure out that the down and right facing arrow mouse cursors that show when hovered over a table cell indicate selection of the column or cell, and that Properties > General does tell you where you're working. Selecting the whole table, or a cell, or an image within a cell seems tricky. I expect the selection is layered but I haven't found out how to easily move through them yet - I've ended up with tables, rows, column and/or cells having borders while just trying to remove all.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 24, 2020 0
Adobe Community Professional ,
Mar 25, 2020

Copy link to clipboard

Copied

@VivekKumar Could you provide detailed instructions on how to get an image in the left column and the text in the left column? I couldn't see a way to achieve that.

 

@wascy, yes, please use the Reply button under your original post. The nested replies make the conversation really hard to follow, especially when multiple people jump in at different points.

 

Regarding your padding, the most likely reason is because the tables, I believe, default to having a vertical alignment of 'middle'. I can't see any way to adjust this in the General section of the Properties panel. So I would recommend you create a table style in your stylesheet and apply the style to your table. It will also mean if you need to change how the table is formatted, you make the changes in one place, and all tables with the style update automatically. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 25, 2020 0
Adobe Employee ,
Mar 25, 2020

Copy link to clipboard

Copied

In multi column style content flows from one to the other, there is no straightforward way to fix content in a particular column. Using table will be much easier to achieve the same.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 25, 2020 0
Community Beginner ,
Mar 25, 2020

Copy link to clipboard

Copied

Hi Vivek,

as of HTML5 and year 2020, using a table for that is considered bad web design, since it's not responsive in any way. SEO tools will mark those tables as "deprecated".

So to say this, but tables are for table data, not for layout purposes.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 25, 2020 0
Adobe Employee ,
Mar 25, 2020

Copy link to clipboard

Copied

While I completely agree with you that it's not good information architecture to use tables for layout purposes, I doubt that SEO tools with mark it as deprecated if it's a table in a text flow.

For a solution see my other reply.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 25, 2020 0
Community Beginner ,
Mar 25, 2020

Copy link to clipboard

Copied

Hi Amebr

that could be a task for a single column section, with a "float: right" parameter at the <img> tag, and a "clear: right" parameter at the tag following er the image.

This way, the image would move to the right and the text flows along at the left. An image as wide as a "column" would show the content as if set up as two columns.

If you want a series of text blocks and images alongside, consider to do it with <div> boxes set up woth the float and clear attributes. That's the way web designers do it of not using a grid framework such as bootstrap.

Let me know if you need some example, we're already managing a case like that in our RoboHelp project.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 25, 2020 0
Adobe Employee ,
Mar 25, 2020

Copy link to clipboard

Copied

If you want to achieve something like this:

multi-column-layout.png

with "Paragraph 1" always starting at the top of the column, you can do it like this:

 

<section>
<figure><img alt="RoboHelp Icon" height="128" src="../../assets/images/robhelp-logo.svg" width="131" /></figure>
<p class="top-of-column">Paragraph 1 (Style top-of-colum)</p>
<p>Next paragraph.</p>
<p>Next paragraph.</p>
</section> 

 

and design the CSS like this:

 

section {
  column-count: 2;
  column-gap: 10px;
}
p.top-of-column {
  margin-top: 0px;
  break-before: column;
}

 

The trick is to give the paragraph that should start "top of column" it's own style with the CSS definition "break-before:column".

 

Note that with the current capabilities of CSS3 it is *not* possible, to define different column-widths. That is, the browse will always balance based on the number of columns.

If this is a mandatory requirement, Columns are not the way to go, but CSS Grid. Or bite the bullet and work with tables (I completely agree with @g_br's information architecture point of view, but HMTL5/CSS3 is just not there yet).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 25, 2020 1