Help! Why can't I put Exhibeo slideshows inline

Freeway
1

I love Exhibeo but I cannot find a way to put them into my pages inline/inflow. Click on the link to one of my pages and you will see I put in a gif called “x1620ClearGif” inside the “BodyRightBox” which is inside “BodyContainer” which is inside “OverallContainer” to block out the area where I want the “FrSlideShow” to be. It works mostly but not as clean as I would like it.

I would appreciate any help from the helpful people here.

Paul

http://www.azitwes.com/reenactments_05/05geky/frontpage.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:

2

Your containers are absolutely positioned, which suggests these are not inflow items.

Inflow layouts are constructed with HTML items which are inserted into other HTML items, at the cursor level. This makes their placement relative to their containers. To insert the Exhibeo Import action into an inflow layout would also mean inserting it into an HTML item at the cursor level… as if you were going to type into that container.

The FrSlideShow container and the BodyRightBox container appear to overlap-- because FrSlideShow is not a child item of Overall Container.

The best advice I can give just now I think would be to re-examine your understanding of what inflow means (and how you achieve it) and try and simplify your layout first before adding everything to it. You are going to need some clarifying applied to the parents of floated items or else you will still have a mess.

Best of luck, it looks like you’ve been working hard at this.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

3

Ernie,
I value your guidance on these forums, I have learned much from your explanations but …
I apologize if I used incorrect terms to articulate my issue. I will attempt it once more.

I am referring to the same linked page.

I have a html container called “OverallContainer” that covers 100% of the page. (code line 53) #OverallContainer.f-ms { position:absolute; left:0px; top:0px; width:100%; z-index:3; overflow:visible }

I inserted (at the cursor) 3 html child containers. The first is called “TopContainer” which is set to 100% width. The second is called “BodyContainer”.
(code line 66) #BodyContainer.f-ms { width:98.75%; z-index:0; padding:10px; border-top:solid #000 1px; overflow:visible }

I have text in “BodyContainer” and I inserted (at the cursor) 2 html child containers. One is floated left and the other, called “BodyRightBox”, is floated right.
(code line 68) #BodyRightBox.f-ms { width:50%; z-index:0; float:right; margin:3px; overflow:visible }

I want to place 2 html child containers inline inside “BodyRightBox”. One will hold an Exhibeo slideshow and the other will hold an item I call “MovieBox”.
(code line 70) #MovieBox.f-ms { position:relative; width:99.62%; z-index:0; box-shadow:4px 4px 4px rgba(100,100,100,0.75); border:solid #000 1px; overflow:visible }

I want to but I can’t because the Exhibeo slideshow ends up displaying at 100% of the page width covering everything else in its path.

So my work-around is what you see at the link I gave, which is … placing a gif where the Exhibeo slideshow should be AND covering that up with the Exhibeo slideshow “absolute positioned” .
(code line 69) #x1620ClearGif.f-ms { width:100%; vertical-align:top; overflow:hidden }
(code line 52) #FrSlideShow.f-ms { position:absolute; left:49.81%; top:119px; width:49.38%; min-height:634px; z-index:2; overflow:visible }

I used the word “inflow” perhaps incorrectly but what I have written above is the issue. I tried to frame the question a while back in the Exhibeo forum Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk but got 0 replies.

Thank you for the compliment. You will be my hero if you could help me.

Paul

freewaytalk mailing list
email@hidden
Update your subscriptions at:

4

Okay… I think that I understand what you’re trying to do… you are using the clear .gif to create a space for the Exhibeo slider. Here’s what’s wrong with that, why, and how you might fix it. Sort of.

IMPORTANT: I am making assumptions based on the code output and working backwards to what you did in Freeway… I may not always be spot on, but will likely be close.

###Problem #1 – absolute positioning for this type of layout is not the best way.

Some of your layout uses absolute positioning, which screws with the document flow. Even an inflow item with the position:absolute property applied to it will be removed from the normal document flow and thus be unable to affect the position and behavior of other inflow items. I think this is what is happening to the Exhibeo import item FrSlideShow:

<div id="FrSlideShow" class="f-ms"> (the Exhibeo Import action)
<div id="OverallContainer" class="f-x2 f-ms">
   <div id="TopContainer" class="f-ms">
   <div id="BodyContainer" class="f-x2 f-ms">
       <div id="LeftNavig" class="f-x2 f-x3 f-ms">
       <div id="BodyRightBox" class="f-x2 f-x3 f-ms">
            <p class="f-fp"> (the Clear gif)
            <div id="MovieBox" class="paraCenter f-x2 f-ms">

This is not the browser’s Inspect Source view of the page code, but the Inspect Element view which displays the code as interpreted by the browser. As you can see the FrSlideShow item is not where it should be (directly above MovieBox as a sibling) but isn’t even in the OverallContainer item. This is specifically because the FrSlideShow item has been positioned absolutely:

FrSlideShow.f-m {
  position: absolute; (all this is unnecessary)
  left: 49.81%;
  top: 119px;
  width: 49.38%;
  min-height: 634px;
  z-index: 2;
  overflow: visible;
}

###Problem #2 – the exhibeo import action is improperly sized and positioned.

So, if the FrSlideShow item IS the Exhibeo Import action item AND it is positioned inflow/inline above/before the MovieBox item, THEN remove ALL the unnecessary position, top, left properties from it’s style information. It is absolutely not needed.

Then also remove its height (and min-height) information so the height is undefined. There is also no need to set a specific z-index property for it. Instead, set the width to 100% (remember, 100% of its parent container width). Then give it a bottom margin of 20px.

###Problem #3 – the .gif is unnecessary.

Finally, delete the blank gif. It was never needed and is the worst way to make space for items which can make room for themselves.

What you have left doesn’t look the most ideal in the Freeway workspace, but should work as expected in the browser-- which is all that really counts. There’s a lot more you can do to improve your layout, but this should get you started. Don’t forget you may need to go through your breakpoint styles as well.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

5

I am curious to know how you added the background image to the page?

Did you use the Inspector and set it in the Page or Window background section?

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:

6

Thank you Ernie for the time you took to outline your answer. I found the solution and it is … The Exhibeo action box you draw within a Freeway document to contain the Exhibeo slideshow is not an html box and cannot (by itself) be successfully positioned inflow. That Exhibeo action box must be drawn within an html container if you want it to be inflow. Then that html container holding the Exhibeo container can be successfully positioned inflow. I do feel stupid for not realizing this and it dawned on me as I read and re-read your reply.

Paul

freewaytalk mailing list
email@hidden
Update your subscriptions at:

7

DeltaDave,

The background on my page is a html box I set to 100% width and height. Then I imported the graphic so it is a pass-thru graphic. The opacity is set to 40%. In the inspector/general pane it is set to “Fixed in Window”. That layer is behind everything else.

Paul

freewaytalk mailing list
email@hidden
Update your subscriptions at:

8

The background on my page is a html box I set to 100% width and height. Then I imported the graphic so it is a pass-thru graphic.

OK - not an approach I would take but if you are happy with it.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

9

I am quite willing to learn new and better ways of doing things so if there is a better way please share it with me.

Paul

freewaytalk mailing list
email@hidden
Update your subscriptions at:

10

I am quite willing to learn new and better ways of doing things so if there is a better way please share it with me.

I think you’ve done a fairly good job of learning some of the ins and outs of using Freeway to build websites… the problem is mainly that Freeway doesn’t help you understand this process as a web designer. And this is fairly limiting.

So, your background solution would make perfect sense to someone who is used to seeing a web page as a collection of things instead of also a matter of properties or styles.

CSS-- which is the property or style component of HTML-- can tell the browser how to render any element… from color to size to position to even background image.

So, instead of placing an image behind everything else, you can simply use CSS to tell the browser which image to use and how use it. The benefit of this is less unnecessary HTML and presentation of your page content.

Before going over how to do this in Freeway, I just want to be clear that images are okay-- especially when they are presented as content. For example, a photo that shows a topic being discussed or illustrates a point is rightfully inserted as an image. Images that decorate pages or objects are better off as a style.

To make a background for the whole “page” or actually, the browser viewport, simply select the page by deselecting anything else. The Inspector should then say “Page”. Now select the little paintbrush tab and the top section will be Window Background. Select an image, choose a position, choose a tiling option, choose a sizing option. More or less that’s it.

You can set backgrounds for other HTML items too. There are also additional setting you can make using CSS and Freeway’s custom Extended options. For now, this should be enough.

Below the Window Background pane is the Page Background pane… so why not use that one instead? Well, let me just say that there really is no such thing as a “page” and this is more of Freeway’s confusing “I’m a page layout app” babble. In this case “page” means “PageDiv” which Freeway creates as the Mother of All HTML Items. It’s useful to understand the difference.

You may need to adjust your background images in an image editor first, if you are using Freeway to make effects like ghosting. That’s how I do it.

Good luck and have fun!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

11

I am quite willing to learn new and better ways of doing things…

Hi Paul… you contacted me off-list – which is fine – but there seems to be a problem with your email account receiving new emails. I’ve tried both your me and mindspring accounts but they both result in failures.

If you have a different account, please try me at thebigerns at gmail dot com – I’d like to discuss your idea further.

Best regards.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options