Working in table mode

Crizz · 2014-08-28 03:03:00

Hi,

I am struggling to create a page that has a layout like this:

Image on the left, text on the right and text on the right, image on the left
How is heavens name could I create a layout like this in TTG? Tables? Or is there another and better solution?

Thanks!

Last edited by Crizz (2014-08-28 03:04:18)

rod barbee · 2014-08-28 03:19:03

use html and float the image either left or right. Be sure to clear each subsequent section.

to make it responsive, you may wish to use the Responsive Grid Framework. The documentation is in the CE3 section of the wiki but all the classes are present in CE4.

each section would be wrapped in a div with the "container_12" class

so for the first and third section, on the inner divs you would use "grid_8" class for the text and "grid_4" class for the image.
for the second section, on the inner divs just reverse the order and use "grid_4" class for the timage and "grid_8" class for the text.

Last edited by rod barbee (2014-08-28 03:20:17)

Crizz · 2014-08-28 03:34:23

Thanks Rod! I will give it a try..and see what I can come up with in my design.

rod barbee · 2014-08-28 03:43:38

I really like using the Responsive Grid for all sorts of layouts. And it looks good on smaller devices too

Matthew · 2014-08-28 12:30:14

I'd use CSS pseudo selectors (:even, :odd) to float the image left or right.

Then use media queries to undo your code for small displays, which would probably just require setting float:none on the same elements.

Crizz · 2014-10-22 00:02:59

Ok, I got it sorted out in same way using the codes.
Although now I want the images to drop a shadow the way I have that in my gallery.

How can I implant that?

My table looks like this:

<div class="grid_8 gutter_12px collapse clearfix">
<p>'QUOTE'</p>
</div>

Here is the page I am talking about: http://www.aimhigh.nl/testimonials/

rod barbee · 2014-10-22 00:20:54

you can either add the box shadow css to the existing styles you have for each image, or add a class to each image and then create that class with the box-shadow parameters in custom css.

<p><img src="/photos/testimonial1.jpg" alt="" style="width:300px;height:200px; box-shadow: 10px 10px 5px #000000;"></p>

and set the size, blur, and color parameters to match your other images.

or

<p><img src="/photos/testimonial1.jpg" alt="" style="width:300px;height:200px;" class="your-image-shadow"></p>

then in your custom.css file:

.your-image-shadow {
  box-shadow: 10px 10px 5px #000000;
}

Crizz · 2014-10-22 00:37:29

Thanks Rod! Do you know the standard values and color for the default drop shadow in TTG pages?
I mean the values what I get when checking the "Drop shadow" box in TTG pages and gallery.

I do not get the same shadows as in my gallery, and those are set default bij checking the box.

Last edited by Crizz (2014-10-22 00:39:38)

rod barbee · 2014-10-22 00:51:18

you can use the inspector to find out what those are.

looks like it's:
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);

Crizz · 2014-10-22 02:58:46

Yeah! That worked out just the way I wanted. THANKS! Rod!

Community @ The Turning Gate

#1 2014-08-28 03:03:00

Working in table mode

#2 2014-08-28 03:19:03

Re: Working in table mode

#3 2014-08-28 03:34:23

Re: Working in table mode

#4 2014-08-28 03:43:38

Re: Working in table mode

#5 2014-08-28 12:30:14

Re: Working in table mode

#6 2014-10-22 00:02:59

Re: Working in table mode

#7 2014-10-22 00:20:54

Re: Working in table mode

#8 2014-10-22 00:37:29

Re: Working in table mode

#9 2014-10-22 00:51:18

Re: Working in table mode

#10 2014-10-22 02:58:46

Re: Working in table mode

Board footer