two column text layout

hi there again!

for better understanding here are my first two posts on my journey:

http://modxcms.com/forums/index.php/topic,22242.0.html
http://modxcms.com/forums/index.php/topic,22272.0.html

i learned a lot so far and i get more and more familiar with modx (thanks to susan), but i still can’t figure out how to solve my problem and unfortunately i got misunderstood in what i try to achieve .

so made a quick sketch for a better understanding.

two column text layout


one column text layout


i want to be able to edit my content with those two text layouts. i guess just choosing a css through a TV is not enought. right? please point me into the right direction! appreciate anything!

thanks a lot
firewireflow

Use the css tv to specify which layout you want; in the one-column simply use display:none for the extra div, and re-size the one that you want to be used. You might want to include two css files, one with styling common to both, and the one using the tv tag will link to the specific styling for the respecting pages.

Use the main [*content*] tags for the div that will be common to both. Use a second TV [*column2*] for the content of the second column. These tags will be in the template, but in all single-column pages it will be left empty and the CSS will hide the extra container div even if it isn’t. You can make the second TV a RichText editor to make things easier.

Of course, there’s no law saying you can’t use two templates. This way is more fun, is all.

thanks again susan for your great help. i just want to recap your advise for my understanding.

so within the content div i got two more divs. lets call them left and right. so if i want i to have a one col layout i just hide the right one and resize the left via css (and the css is loaded by a TV). if i want a two col layout i just fill both divs with content. right?

here are a couple of questions:

1. if i understood you right the left and right divs must be in the template. right?

2. how do i fill those with content? that i just don’t get. i’m really confused now?

i will play around a little bit and hopefully i will be able to understand what you meant!

thanks a lot!
firewireflow

Hi this may not be the best and elegant solution, but it’s how I got it working with mine, with two templates;D - I later figure out I can use one template, and using appropriate snippet (Ditto I think) to pull the ’div’ in pages that need 2 or 3 columns.

first a simple wireframe and the html markup illustrate the possible layout for two columns in content div

<div id="wrapper">
<div id="header"> ......</div>

<div id="left">left div</div>

<div id="content">

<div id="content_left" class="col">
<p>text xchkxncxmk sks fxchkxncxmk sks f</p>
<p>text xchkxncxmk sks fxchkxncxmk sks f</p>
</div><!--end content_left-->

<div id="content_right" class="col">
<p>text xchkxncxsks f</p>
<p>text xchkxncxmk sks fxchkxncxmk sks f</p>
</div><!--end content_right-->
</div>
</div><!--end wrapper-->


why use id and class together?
<div id="content_left" class="col">
<div id="content_right" class="col">

This is *totally’ up to you with your CSS coding habit. In my case, if I have a site that has 1 column, 2 column and 3 column, I like to use a class ’.col’ for floated element, then use ID or another Class to declare width, so that the ’.col’ class can be used throughout the entire site with one single template

so If it’s three columns layout, I can add another markup like so:

<div id="content_middle" class="col">

Here comes the template and TV in modx.

<body>

<div id="wrapper">

<div id="header"> ......</div>

<div id="left">left div</div>

<div id="content">

<div id="content_left" class="col">
      [*left_col*] <!--THIS IS TV-->
</div><!--end content_left-->
   
    <div id="content_right" class="col">
[*content*] 
</div><!--end content_left-->
   
    </div>

</div><!--end wrapper-->
</body>


TV screen shot attached  (just an example taken from my Modx site)

and in the document page where I insert the left content.

I made a  Modx template last December that works something like this. , where, the left column (white background) is the ’left_col’ for  tv

You can download the template to take a better look

thanks a lot! works perfectly! slightly i’m getting modx ... what a great cms tool!