Vertical placement of container content

ericspicts

I am not sure I am using the official smugmug terms - so forgive me:

It seems as if (using the smugmug customization tools) side by side container elements must always be aligned vertically. But if one element is longer than the other, this can create a lot of dead space in the page design.

See for example

http://ericspicts.smugmug.com/Unlisted-Site-Assets/Site-Pages/Sports-Portaiture/n-zj43x

Is it possible to place another element below the textbox on the left in the existing deadspace? It seems as if a new design element must get pushed down below the extent of the "multiple photos" element on the right of the page. I'd like to add a slide show right below the text box with no deadspace.

Is this possible with the smugmug tools? Do I have to add css code to do this? If so, what is that code?

Thanks

- Eric

Allen

Have you tried setting the height of the text box under its wrench? Then dragging a slideshow box below it?

ericspicts

Allen wrote: »

Have you tried setting the height of the text box under its wrench? Then dragging a slideshow box below it?

I don;t see that the wrench allows control of the height of the textbox or any other container element. The height of the text box seems ot be controlled by the height of the content for the container it is next to -- causing all of the dead space.

If there is a way I am not seeing to control height using the wrench, please let me know.

Thanks

mhcooperphotography

Allen,

The wrench does not seem to give the option to set the height - at least I did not see it. The only thing you seem to be able to set andy sort of size is in the Dimension (right angle). It does allow you to set the Container Width and each of the Margins but not the height. Unless I am missing something, it looks like the layout tool allows you to place containers above and below blocks - but placement is dictated by the largest container. If you have multiple containers in a row you do not seem to be able to stack two short containers (lets say at a width of 15%) next to a taller container (lets say a width of 85%).

I am running into this same issue as I am trying to put a small menu (15%) to the left of my slide show which I want to take up the rest of the page. I am also trying to add my social networking buttons under my menu.

I am going to look around as I thought I saw one of the options achieve this or maybe it was someone who cusomized their own page.

mhcooperphotography

OK ... Figured out a way to do it ... sort of.

If you go to the Customize screen you can select Entire Site, Homepage, etc. Once there click on LAYOUT. You will see an entry towards the bottom for SIDEBARS. You can add a SIDEBAR to the LEFT or to the RIGHT. This basically divides the screen into addditional sections where you can put items above and to the side. This is a bit limiting as it only allows you to define three regions - but at least it does allow the flexibility to stack multiple itmes next to a larger container.

Also you have the "sort of" flexibiltiy to define these sidebars for the entire site and then for the Home Page, All Folders, and All Galeries. If you define it for the entire site you also can add sidebars to the pages .. thereby giving you a little more flexibility.

Anyway it would be nice if they gave you the flexibility to define both verticle and horizontal placement of the containers. If you look at most of the placement dimentions they all seem to relate to Width and not Height (except for Margins). One possible explanation ... in order to fit the screen ratio of multiple screens and form factors (PCs, Pads, Smartphones) they made the decision to work only with Width and then have the Height be determined by the device and the screen size. I sort of see this when I preview my new design on my PC andmy iPAD. Galery pages are displayed differently as one screen has a wider view area (PC) than does the other (iPad).

Good luck.

ericspicts

mhcooperphotography wrote: »

OK ... Figured out a way to do it ... sort of.

If you go to the Customize screen you can select Entire Site, Homepage, etc. Once there click on LAYOUT. You will see an entry towards the bottom for SIDEBARS. You can add a SIDEBAR to the LEFT or to the RIGHT. This basically divides the screen into addditional sections where you can put items above and to the side. This is a bit limiting as it only allows you to define three regions - but at least it does allow the flexibility to stack multiple itmes next to a larger container.

Also you have the "sort of" flexibiltiy to define these sidebars for the entire site and then for the Home Page, All Folders, and All Galeries. If you define it for the entire site you also can add sidebars to the pages .. thereby giving you a little more flexibility.

Anyway it would be nice if they gave you the flexibility to define both verticle and horizontal placement of the containers. If you look at most of the placement dimentions they all seem to relate to Width and not Height (except for Margins). One possible explanation ... in order to fit the screen ratio of multiple screens and form factors (PCs, Pads, Smartphones) they made the decision to work only with Width and then have the Height be determined by the device and the screen size. I sort of see this when I preview my new design on my PC andmy iPAD. Galery pages are displayed differently as one screen has a wider view area (PC) than does the other (iPad).

Good luck.

Thanks for the tip. I ended up using the sidebars as well. One problematic issue as you alluded to is that on the ipad, smugmug seems to favor the width of the sidebar over that of the central container, causing the sidebars to appear several times wider than pictures in the central container.

einat

Here's another option: use negative top margins.
In this test page I created, I placed the text ant the vertical photo side by side, without changing their margins.
For the other photo - the smaller horizontal one at the bottom I set the top margin at -200, and it is placed underneath the text block + the vertical photo

Darter02

I posted about this same problem. From a design aspect not being able to adjust the container height is total BS. When I have one long element, and two short ones, that when stacked are the same height as the longer, it fills the space better. To me it was a very short sited design flaw. They say they've placed this problem on a "list" of things to look at.

Darter02

einat wrote: »

For the other photo - the smaller horizontal one at the bottom I set the top margin at -200, and it is placed underneath the text block + the vertical photo

Nice use of the negative number for a margin. I'll have to experiment with that.

Allen

Darter02 wrote: »

I posted about this same problem. From a design aspect not being able to adjust the container height is total BS. When I have one long element, and two short ones, that when stacked are the same height as the longer, it fills the space better. To me it was a very short sited design flaw. They say they've placed this problem on a "list" of things to look at.

You can add CSS to set the height.

Darter02

Allen wrote: »

You can add CSS to set the height.

Just so we're clear. Say I have three container objects. One is say, 300 pixels high. If I have two smaller, 150 pixel containers I want to place beside them, the one I place at the to the top/side of the longer container automatically adjusts itself to be 300 pixels. I can now not place the third container beside the original one, under the other smaller (it was 150px originally) container.

Right?

Here's an example.

A portrait oriented photo. I wanted a small slide show, and some text beside it. The topmost text container automatically extends to the bottom of the longer photo container on the right. You can't place the slideshow container in the open space.



You say I can use a CSS code to force a third container to overlap another? How will that affect editing? How do I ID the container, and what code would do that?

Allen

I used this on my keyword page to size the html box. "Just this page" CSS.

[COLOR=Red].sm-page-widget-1640366 {
  height: 200px;[/COLOR]
  overflow: scroll;
  overflow-x: hidden;
  border: 6px double #222;
  background: rgba(22, 22, 22, .40);
  padding: 0 10px;
  text-align: justify;
  margin: 0 auto;
  width: 90%;
}

If you can inspect the element. maybe page source, you can find the widget number. This is where I found the class.

<div id="sm-page-widget-z9qrxBFj" class="sm-page-widget sm-page-widget-html sm-page-widget-1640366" data-typeid="1640366">

If you can set the heights of both left boxes I would think they could be placed close together.

Darter02

@ Einat, that negative number trick in the margins did the trick! Thanks! It never occurred to me that you could use NEGATIVE numbers! Now I have two containers stacked to the left of one big one.

Darter02

Allen wrote: »

I used this on my keyword page to size the html box. "Just this page" CSS.

[COLOR=Red].sm-page-widget-1640366 {
  height: 200px;[/COLOR]
  overflow: scroll;
  overflow-x: hidden;
  border: 6px double #222;
  background: rgba(22, 22, 22, .40);
  padding: 0 10px;
  text-align: justify;
  margin: 0 auto;
  width: 90%;
}

If you can inspect the element you can find the widget number. This is where I found the class.

<div id="sm-page-widget-z9qrxBFj" class="sm-page-widget sm-page-widget-html sm-page-widget-1640366" data-typeid="1640366">

If you can set the heights of both left boxes I would think they could be placed close together.

Thanks Allen. I'll look into that too. It's good to have options. Right now the negative number method seems the easiest.

Allen

Darter02 wrote: »

Thanks Allen. I'll look into that too. It's good to have options. Right now the negative number method seems the easiest.

I played with this this and could get the contents of the left bottom box up but not the box itself.
I used position:relative and top:-100px

I'm coming under the conclusion that this whole design method is a piece of #$%$ for designing html
type pages. You are forced to use "where they want boxes". The lower box should be able to fit up
under the top box and to the left of the right one. but I couldn't find a way to do it.

Darter02

Don't sweat it. They sent me a message saying it's on the "list" of things to take care of. Until then, we grind our teeth, and deal with a thousand papercuts...

charlesdaly

einat wrote: »

Here's another option: use negative top margins.
In this test page I created, I placed the text ant the vertical photo side by side, without changing their margins.
For the other photo - the smaller horizontal one at the bottom I set the top margin at -200, and it is placed underneath the text block + the vertical photo

You have an excellent eye and very compelling images.

ericspicts

charlesdaly wrote: »

You have an excellent eye and very compelling images.

just catching up on this thread. Thanks for the great tip on negative margins.


Why is it that we are all paying smugmug to be beta testers? Who would have thought that you could enter a negative number for a margin? This is like playing a puzzle video game!

Now if there was a way to copy a page design an redo it without using the sidebars, I would be fine. But no there seems to be no way to do that, so I will have to recreate them from scratch.

einat

ericspicts wrote: »

Who would have thought that you could enter a negative number for a margin? This is like playing a puzzle video game!

I never would have thought about it...
Someone wrote about it and I remembered it.
It's so goo to have this forum for sharing info and tips

And thanks, to both you and Charles for the compliment (-:

ericspicts

einat wrote: »

I never would have thought about it...
Someone wrote about it and I remembered it.
It's so goo to have this forum for sharing info and tips

And thanks, to both you and Charles for the compliment (-:

So I tried the negative margin fix. It was difficult to do two boxes one right under the next each with negative margins because you loose the ability to click on the page an select the correct widget, but after much work I was able to get it looking correct on my desktop.

All proud of myself, I went to see how it looked on the tablet . . .. no good.

There is some formula which is not clear to me as to how smugmug is goign to interpret things on going for a tablet. What were the correct negative margins on a desktop looked terrible on the tablet -- too much negative space.

Allen, does your css edit do ok on a tablet?

Allen

ericspicts wrote: »

...
Allen, does your css edit do ok on a tablet?

No idea, haven't unveiled and don't have a tablet.

charlesdaly

Allen wrote: »

Have you tried setting the height of the text box under its wrench? Then dragging a slideshow box below it?

Allen, your Northern Bobwhite looks like Alfred Hitchcock introducing a TV episode of his old show.
Could you please help me with the code to place Titles or Captions below my images when selected from a gallery into a single screen and then also within a slideshow. Yours are excellent.

Mine are off-set left of the image bottom.

Darter02

Did you try screenfly to test things?