[TYPO3] Wrapping Column Fields

Mon Jun 12 23:29:15 CEST 2006

Christopher wrote:
> Hi,
> 
> On 6/12/06, Gilles Deacur <tronno22556 at gmail.com> wrote:
> 
> <snip>
> 
>> What I REALLY want is not have TV strip my div tags of id and class.
> 
> 
> This appears to be the root of the entire problem; go back to the
> Templavoila interface (i.e. go to the list module and find the
> appropriate template object and left-click on it and select
> 'Templavoila'). This time when you do it, pay extra attention to the
> mapping 'mode' for the two div elements in question.
> 
> It's doubtful that you mapped those two columns as TS objects--or it's
> at least doubtful that you needed to--so all the TS you're doing is
> unlikely to be helpful. If you *did* map the two divs as TS objects,
> it'd probably be better if you mapped them as containers for content
> instead.
> 
> 
> -Christopher

I can't get this.

What I did (And I'm sorry it's a very long post. I'm just finding it 
tough to explain what I did without showing.):

I have a template set up much like this (with some parts removed):

<head>
</head>
<body>
   <div id="header">
     <div id="title">
       <h1>TITLE 1</h1>
       <h2>TITLE 2</h2>
     </div>
    <div id="menu">
     <ul id="nav" class="floatRight">
      <li id="home" class="activelink"><a href="#">Home</a></li>
      <li id="who"><a href="#">About Us</a></li>
      <li id="prod"><a href="#">Products</a></li>
      <li id="serv"><a href="#">Services</a></li>
      <li id="cont"><a href="#">Contact us</a></li>
     </ul>
    </div>
   </div>
   <div id="page">

<!-- REFERENCE 1 -->

    <div class="width75 floatRight">
     <div id="contactInfo" class="floatRight width100">
      <h2>TITLE 3</h2>
      <h3>TITLE 4</h3>
    </div>
    <div class="clear"> </div>

<!-- REFERENCE 3 -->

    <div id="block1" class="maincontent">
     <h1>TITLE 1</h1>
     <h2>TITLE 2</h2>
     <P>TEXT</P>
    </div>
    <div id="wrap3cols" class="width100">
     <div id="mult3" class="width33 floatLeft maincontent bumpright">
      <H4>TITLE 5</H4>
      <H5>TITLE 6</H5>
       <UL>
        <LI>item</LI>
        <LI>item</LI>
        <LI>item</LI>
       </UL>
     </div>
     <div id="mult4" class="width33 floatLeft maincontent">
      <H4>TITLE 5</H4>
      <H5>TITLE 6</H5>
       <UL>
        <LI>item</LI>
        <LI>item</LI>
        <LI>item</LI>
       </UL>
     </div>
     <div id="mult5" class="width33 floatRight maincontent">
      <H4>TITLE 5</H4>
      <H5>TITLE 6</H5>
       <UL>
        <LI>item</LI>
        <LI>item</LI>
        <LI>item</LI>
       </UL>
     </div>
    </div>
    <div class="clear"> </div>
    <div id="wrap4cols" class="width100">
     <div id="mult6" class="width25incol floatLeft maincontent bumpright">
      <H6>TITLE 7</H6>
      <P>Text.</P>
     </div>
     <div id="mult7" class="width25incol floatLeft maincontent bumpright">
      <H6>TITLE 7</H6>
      <P>Text.</P>
     </div>
     <div id="mult8" class="width25incol floatLeft maincontent">
      <H6>TITLE 7</H6>
      <P>Text.</P>
     </div>
     <div id="mult9" class="width25incol floatRight maincontent">
      <H6>TITLE 7</H6>
      <P>Text.</P>
     </div>
    </div>
    <div class="clear"> </div>
    <div id="block2" class="maincontent">
     <a name="section_anchor"></a>
      <h1>TITLE 1</h1>
      <h2>TITLE 2</h2>
       <blockquote class="question">
       <p>TEXT</p>
       </blockquote>
       <blockquote class="answer">
       <p>TEXT</p>
       </blockquote>
       <P>More Text</P>
    </div>
    <div id="mult1" class="width50 floatLeft maincontent">
     <H6>TITLE 6</H6>
      <UL>
       <LI>item</LI>
       <LI>item</LI>
      </UL>
    </div>
    <div id="mult2" class="width50 floatRight maincontent">
<h6>Some of the lock brands we sell and service</H6>
     <H6>TITLE 6</H6>
      <UL>
       <LI>item</LI>
       <LI>item</LI>
      </UL>
    </div>
    <div class="clear"> </div>
    <div id="manufacturers" class="maincontent center">
     <a href="http://www.example.com/"><IMG SRC="images/yadda" 
width="52" height="15" alt="yadda"></a><WBR> <a 
href="http://www.example.com/"><IMG SRC="images/yadda" width="52" 
height="15" alt="yadda"></a>
    </div>
   </div>

<!-- REFERENCE 2 -->

   <div class="width25 floatLeft leftColumn">
    <div id="findLocation">
      <b class="bold darkBlue">Heading:</b> <input id="findBox" 
size="10"/> <p class="small center">text</p>
    </div>
    <div id="leftMenu">
     <h2>Menu</h2>
      <ul class="sideMenu">
       <li class="here">Home Page
        <ul>
         <li><a href="xyz" title="Jump to section 1">Section 1</a></li>
         <li><a href="xyz" title="Jump to section 2">Section 2</a></li>
        </ul>
       </li>
       <li><a href="http://www.example.com" title="Go to Page">About 
Us</a></li>
       <li><a href="http://www.example.com" title="Go to Page">Why Call 
Us?</a></li>
      </ul>
      <p>Text</p>
    </div>
    <div id="leftMore">
     <H2>Title 2</H2>
     <P>Text:</P>
      <UL id="servicearea">
       <LI><b class="bold">City</b> <i class="italic">zip</i></LI>
       <LI><b class="bold">City</b> <i class="italic">zip</i></LI>
      </UL>
    </div>
   </div>
  </div>
</div>
<div id="footer">
  <div id="width">
   <span class="floatLeft">
       Text <a href="http://www.example.com" title="text">Link</a> <span 
class="grey">
   </span>
  </div>
</div>
</body>
</html>

I saved the above as "template.html".

I took TV and mapped the BODY as the CO ROOT the <div class="width75 
floatRight"> under  as ELEMENT - CONTENT ELEMENTS 
and called it "field_main_column".

I mapped the <div class="width25 floatLeft leftColumn"> under  as ELEMENT - CONTENT ELEMENTS and called it 
"field_side_column".

Then saved this as "Main Template Layout".

Then I opened TV again and mapped the <div id="block1" 
class="maincontent"> under  as CONTAINER FOR 
ELEMENTS (without the "section box" checked.

Then mapped the <H1> within that <DIV> as ELEMENT - HEADER FIELD and 
called it field_header_1.

Then mapped the <H2> within that <DIV> as ELEMENT - HEADER FIELD and 
called it field_header_2.

Then mapped the <P> within that <DIV> as ELEMENT - TEXT AREA FOR 
BODYTEXT and called it field_bodytext.

I did the same for a few other <DIV> areas so I'd have 2 column, 3 
column, and 4 column views.

Now, when I view my site, none of my <DIV> tags have the class or id 
with them, and they don't display the way the css was meant to.

Again, sorry for the long post.  I hope this clarifies my objective.

Please point me to the correct answer.

(And by the way... I've searched many a reference, and click links that 
point to Typo3.org, but all of the links are broken and just pull up the 
  main documentation page and never link to the helpful article.)