How do I make a vertical slice? Can't make 2-column stack work for that


(Gary Davis) #1

I know this has to be a really basic question. Apparently, not for me, though. I am trying to set up a page, or part of a page, so I can display a thin, vertical image running up the upper part of the left side. It is a .png transparent image of “TelevisionAdvertising.com”, turned vertically. So, the image is tall and thin. 500 pixels high.

So far, my best results have been using a JW stack, Floaty. The image looks good on the left at 10% of the Floaty width but I still have work to do to get the content on the right in there, aligned and then mesh it with, I guess, a 1 column stack below for the rest of the content.

So, for some purposes, I may have answered my own question. But, in this case, the vertical image on the left is tall and I can only put one thing, such as a header or a paragraph, in the slices of the Floaty on the right of it. It would be best if I had the tall image in a column and then headers and paragraphs or whatever going down the page on the right, until I got to the bottom of the image.

So, I am wondering if someone would tell me another way to do this. I worked with the Foundation two-column stack for a while but could not get one column thin, for the image, and the other thick, for the text. It did not seem to support the image being a transparent .png, either. Thanks!


#2

Could you set it as a page background image and then set the other columns with a margin on the left so it does not obscure the graphic ?


(Gary Davis) #3

That seems like a really good idea. I will check into that. “Page background image” was not even in my consciousness until now. Thanks!

That Joe Workman Floaty Stack, (which I love and use a lot) is fine for this as long as I am OK with just a top slice where I can put a header (or an image or paragraph) and a bottom slice where I can only put text. What would be cool would be if it had more multiple-use slices, running down the page, if you wanted them. But it does not work that way.