Why can I not split up a page?

[EdlineTS]

Hello,
I am a newbie, so please forgive me if the answer to this is obvious. I am including a diagram because I know of no other way to explain this. I am trying to put a table (not just extend the table on the left with more columns) to the right of the current table that says "Internet Explorer for PC". I cannot figure out what I am doing wrong. Every time I place a table in my page, it goes BELOW the current table, and not to the right side (see the red text in my image).

Any ideas?
Thanks,
Rob

[LTinker68]

In order to be able to do what you want to do currently in Flare, you'd need to create a table with one row and two cells. In cell 1 you'd create a new table with as many rows/columns as you want, and in cell 2 you'd create yet another table with as many rows/columns as you want. So you're nesting tables inside other tables. Alternatively, you could create two DIVs and put tables inside each, but if you're outputting to Word then it won't work because Word doesn't recognize the DIV tag, so I recommend the container table method.

I haven't played with the Blaze beta trial yet, but from what I understand, there are better layout tools so that you can insert columns and then you'd insert a table in each column. Not sure how that'll work online -- I'm guessing it'll automatically create DIVs.

Anyway, in the meantime you'll have to use the tables-within-a-table method I described above. (BTW, make sure you don't set width or height values on the containing table or its cells -- let the innermost tables control the size of the container table.)

[EdlineTS]

In order to be able to do what you want to do currently in Flare, you'd need to create a table with one row and two cells. In cell 1 you'd create a new table with as many rows/columns as you want, and in cell 2 you'd create yet another table with as many rows/columns as you want. So you're nesting tables inside other tables. Alternatively, you could create two DIVs and put tables inside each, but if you're outputting to Word then it won't work because Word doesn't recognize the DIV tag, so I recommend the container table method.

I haven't played with the Blaze beta trial yet, but from what I understand, there are better layout tools so that you can insert columns and then you'd insert a table in each column. Not sure how that'll work online -- I'm guessing it'll automatically create DIVs.

Anyway, in the meantime you'll have to use the tables-within-a-table method I described above. (BTW, make sure you don't set width or height values on the containing table or its cells -- let the innermost tables control the size of the container table.)

Thanks, Lisa. I thought about that idea, but I am just concerned that the "border" (the thin line I placed at the top) will stretch all the way across the entire top of the table?
Thanks
Rob

[doc_guy]

create a special class of <table> with border settings set to 0.

So you might have <table class="noborder">

and in your style sheet you'd have

table.noborder {
border: 0;
}

Then you'd apply the noborder class to the container table, and let the inner tables have the regular table settings with the standard borders.

[NorthEast]

First off, are you wanting to do this for online output, print output, or both?

If it is just for online output, then I'd say the easiest way is to use the float property.

(If you use print output, then you'll have to use the method outlined by LTinker. Float positioning isn't carried through to the Word output, so they'll appear one above the other.)

Try this:

1. Open your stylesheet in text editor, and copy and paste this:

Code: Select all

div.left
{
	float: left;
	width: 45%;
	clear: left;
}

div.right
{
	clear: right;
	float: right;
	width: 45%;
	margin-left: 20px;
}

2. Next you need to put each table inside these DIV tags:
- On a paragraph tag, create a group by pressing Tab (or selecting Insert > Group) and select div.left. This DIV tag is the container for the table.
- Inside that div tag, insert a new table or copy and paste your existing table.
- Do the same for the right table (selecting div.right).

3. Preview or build or preview the topic to see the results (you won't see it in the editor), and the tables should be positioned on the left and right.

What those settings do:
- The float property sets the element position on the left/right.
- The clear property stops other elements (e.g. your paragraph text) wrapping round the table on the left/right side.
- The width sets the width of the table as a proportion of the screen width (delete this if you don't want even table widths, and want the width to be determined by the relative table sizes).
- The left margin setting (on the right table) is just make sure there's a gap between the tables.

[EdlineTS]

First off, are you wanting to do this for online output, print output, or both?

If it is just for online output, then I'd say the easiest way is to use the float property.

(If you use print output, then you'll have to use the method outlined by LTinker. Float positioning isn't carried through to the Word output, so they'll appear one above the other.)

Try this:

1. Open your stylesheet in text editor, and copy and paste this:

Code: Select all

div.left
{
	float: left;
	width: 45%;
	clear: left;
}

div.right
{
	clear: right;
	float: right;
	width: 45%;
	margin-left: 20px;
}

2. Next you need to put each table inside these DIV tags:
- On a paragraph tag, create a group by pressing Tab (or selecting Insert > Group) and select div.left. This DIV tag is the container for the table.
- Inside that div tag, insert a new table or copy and paste your existing table.
- Do the same for the right table (selecting div.right).

3. Preview or build or preview the topic to see the results (you won't see it in the editor), and the tables should be positioned on the left and right.

What those settings do:
- The float property sets the element position on the left/right.
- The clear property stops other elements (e.g. your paragraph text) wrapping round the table on the left/right side.
- The width sets the width of the table as a proportion of the screen width (delete this if you don't want even table widths, and want the width to be determined by the relative table sizes).
- The left margin setting (on the right table) is just make sure there's a gap between the tables.

Thanks for the info...but I am completely lost. Not to sound like a total newbie, but how do you open the stylesheet in the text editor? Oh, and I am creating help that will be all online; no print copies.
Rob

[lacastle]

To open the stylesheet in a text editor:

1. In Flare, in the Content Explorer (press ctrl+J if it's not visible), open the Resources folder, then Stylesheets. Your stylesheet should be there (i think the default is Styles.css if you didn't make a new one).
2. Right-click on your stylesheet and select Open With > Internal Text Editor. The stylesheet will open in the content pane of Flare (it should look like Notepad or just text in a "courier" font).

[doc_guy]

You know, Ctrl+J conflicts with my Jing tool, dagummit.

[LTinker68]

... my Jing tool...

Is that a euphemism?

[doc_guy]

Oh dear no.

Jing is a free screen capture / video capture tool that allows you to easily capture and upload images and videos to a website with the URL copied to your clipboard. So when people ask a question about Flare, I can take a quick pic of part of my screen, upload it to my webserver and paste the image in the Flare forums. It's a piece of cake.

I also use the video capture feature when I'm writing up bugs in my application at work so the developers can see exactly what I did and what the result was.

The hot key for beginning a new capture or video is Ctrl + J.

[EdlineTS]

First off, are you wanting to do this for online output, print output, or both?

If it is just for online output, then I'd say the easiest way is to use the float property.

(If you use print output, then you'll have to use the method outlined by LTinker. Float positioning isn't carried through to the Word output, so they'll appear one above the other.)

Try this:

1. Open your stylesheet in text editor, and copy and paste this:

Code: Select all

div.left
{
	float: left;
	width: 45%;
	clear: left;
}

div.right
{
	clear: right;
	float: right;
	width: 45%;
	margin-left: 20px;
}

2. Next you need to put each table inside these DIV tags: (is this done in the text editor, or within my layout view/xml editor?)- On a paragraph tag, create a group by pressing Tab (or selecting Insert > Group) and select div.left. This DIV tag is the container for the table.
- Inside that div tag, insert a new table or copy and paste your existing table.
- Do the same for the right table (selecting div.right).

3. Preview or build or preview the topic to see the results (you won't see it in the editor), and the tables should be positioned on the left and right. What will this appear as when I do it in my editor?

What those settings do:
- The float property sets the element position on the left/right.
- The clear property stops other elements (e.g. your paragraph text) wrapping round the table on the left/right side.
- The width sets the width of the table as a proportion of the screen width (delete this if you don't want even table widths, and want the width to be determined by the relative table sizes).
- The left margin setting (on the right table) is just make sure there's a gap between the tables.

Hi,
I am still working on this idea. Questions are marked within the quote....any help is appreciated.
R

[NorthEast]

2. Next you need to put each table inside these DIV tags: (is this done in the text editor, or within my layout view/xml editor?)- On a paragraph tag, create a group by pressing Tab (or selecting Insert > Group) and select div.left. This DIV tag is the container for the table.
- Inside that div tag, insert a new table or copy and paste your existing table.
- Do the same for the right table (selecting div.right).

The XML editor.

3. Preview or build or preview the topic to see the results (you won't see it in the editor), and the tables should be positioned on the left and right. What will this appear as when I do it in my editor?

Displaying floated elements isn't supported by the editor, they'll all appear left aligned.

[EdlineTS]

2. Next you need to put each table inside these DIV tags: (is this done in the text editor, or within my layout view/xml editor?)- On a paragraph tag, create a group by pressing Tab (or selecting Insert > Group) and select div.left. This DIV tag is the container for the table. **OK - I have done this (added the div code to my stylesheet, and then gone to the XML editor) but I get no choices in the "Create Group" box that appears as you describe?**

- Inside that div tag, insert a new table or copy and paste your existing table.
- Do the same for the right table (selecting div.right).

The XML editor.

3. Preview or build or preview the topic to see the results (you won't see it in the editor), and the tables should be positioned on the left and right. What will this appear as when I do it in my editor?

Displaying floated elements isn't supported by the editor, they'll all appear left aligned.

[NorthEast]

**OK - I have done this (added the div code to my stylesheet, and then gone to the XML editor) but I get no choices in the "Create Group" box that appears as you describe?**

I'm not sure what's wrong then. Even with a completely blank stylesheet you should see the tags blockquote, div, fieldset and form listed.

[EdlineTS]

**OK - I have done this (added the div code to my stylesheet, and then gone to the XML editor) but I get no choices in the "Create Group" box that appears as you describe?**

I'm not sure what's wrong then. Even with a completely blank stylesheet you should see the tags blockquote, div, fieldset and form listed.

OK...I am getting somewhere. Thanks for all your help, Dave! I think I am close, but the table on the right seems to be moving down a row, rather then staying inline with the table on the left.

Here is the screen shot, along with my div tags (I changed them a bit) and the xml source snippets for each table:


Here is the source code for the left side table:<div class="left">
<table style="border-spacing: 0px 0px;border-right-style: none;border-right-width: 1px;border-right-color: #d3d3d3;border-top-style: solid;border-top-width: 1px;border-top-color: #d3d3d3;border-bottom-style: solid;border-bottom-width: 0.25in;border-bottom-color: #ffffff;caption-side: top;">
<col style="width: 175px;" />
<caption>Internet Explorer for PC </caption>
<tbody>
<tr>
<td>Version 5.x for the PC</td>
</tr>
<tr>
<td>Version 6.x for the PC</td>
</tr>
<tr>
<td>Version 7.x for the PC</td>
</tr>
</tbody>
</table>
Here is the right table source code:

<div class="right">
<table style="border-spacing: 0px 0px;border-left-style: none;border-left-width: 0px;border-right-style: none;border-right-width: 1px;border-right-color: #d3d3d3;border-top-style: solid;border-top-width: 1px;border-top-color: #d3d3d3;border-bottom-style: solid;border-bottom-width: 0.25in;border-bottom-color: #ffffff;caption-side: top;">
<col style="width: 175px;" />
<caption>Internet Explorer for PC </caption>
<tbody>
<tr>
<td>Version 5.x for the PC</td>
</tr>
<tr>
<td>Version 6.x for the PC</td>
</tr>
<tr>
<td>Version 7.x for the PC</td>
</tr>
</tbody>
</table>
<p> </p>
</div>

And here are my div tags I added to the stylesheet:
div.left
{
float: left;
clear: left;
}

div.right
{
clear: right;
float: right;
margin-left: 10px;
}
Any insight is greatly appreciated!
Rob

[NorthEast]

Ah, ok, you're seeing that because the surrounding text can wrap around the div, i.e. it can wrap to the right of your left div and to the left of your right div.

You could include a width property in both div styles of 50%, then there aren't any gaps between the tables for the paragraph text to seep into.

Code: Select all

div.left
{
float: left;
clear: left;
width: 50%;
}

div.right
{
clear: right;
float: right;
margin-left: 10px;
width: 50%;
}

I don't quite understand why one is lower than the other though, unless it's actually lower down the page - the divs should follow each other with no paragraph tags or anything else in between.

[LTinker68]

I don't quite understand why one is lower than the other though, unless it's actually lower down the page - the divs should follow each other with no paragraph tags or anything else in between.

I believe the default behavior is that DIVs are relative to each other, so the starting position of one depends on the other. If you add a position: absolute property to the DIVs then it might work better.

[NorthEast]

I don't quite understand why one is lower than the other though, unless it's actually lower down the page - the divs should follow each other with no paragraph tags or anything else in between.

I believe the default behavior is that DIVs are relative to each other, so the starting position of one depends on the other. If you add a position: absolute property to the DIVs then it might work better.

If you have one div directly after the other in the code, then they'll appear side-by-side and vertically aligned.
Just make sure there's no other tags in between them (like paragraphs). You don't need to add the position:absolute property.