Hi,

 

I am using Joomla 1.5.22, K2 v2.4.1 and K2Tabber 1.8.

 

My items have an Image that I use to store a small logo (I only present that in Category views) and a larger picture in the Description. In Item View I have disabled the Image and only present the Description.

The resulting page (link) looks as shown below . The "Additional Info" should really be below the picture as it belongs to the next part of the page, the tabs generated by K2tabber.

Using Firebug I have figured out that this is caused by <div> class="itemFullText" not scaling with the picture in the Desciption but only with the text. Because the picture is set to float the "Additional Info" is pulled up next to the picture.

 

How can I change that behavior? Thanks.

You actually want the whole Additional Info Block to be moved under the Image, right?

All you need to do is to insert a clear block right after the Fulltext div block in the item.php file of your K2 template override*.

 

* If you do not use one, do so. Do not edit the core files.

Yes, I want the Additional Info block to move down.

 

Could you help me getting the clear block in? I am still new to css and php, can make some changes but it is still hard to get it right.

 

And could you tell me how to do the overrides properly? Until now I have been editing core files because I did not know there was a better way to go....

Thanks a lot!

Read here to learn about the overrides. 

After you have done so, correctly, you will need to edit the item.php file. Locate the block:

if($this->item->params->get('itemExtraFields') && count($this->item->extra_fields)):

above this if statement just put a <div class="clr"></div> block.

Thanks! Instructions on the template overrides are clear so I'll try that in a couple of days.

I get the instruction on the clear block too, I have seen that a couple of times on a page but did not know what it was for.

Now, this is a workaround to get the "Additional Info" displayed below the image (which will solve my problem). But the original question remains: why does the block containing the Item Description (I am pretty sure it is <div> class="itemFullText") not scale to hold the picture but only scale to hold the text? If the <div>, which is the entire width of the page would scale in height to hold the picture there would be no need for a clear block.... I would like to understand the way the <div> works here, will help me in future work.

 

 

The image block has a float:left statement, so the text that follows (introtext, fulltext) wraps around the image. The clear statement's use is to clear the float and put the rest of the elements under the image-text block and not wrapped.

Hope you're still following this discussion.... Had a look at the item.php file, looks like the <div class="clr"></div> block is already in there but it does not show on my page??? This is what the php file looks like:

 

    <?php else: ?>      <!-- Item text -->      <div class="itemFullText">          <?php echo $this->item->introtext; ?>      </div>     <?php endif; ?>        <div class="clr"></div>       <?php if($this->item->params->get('itemExtraFields') && count($this->item->extra_fields)): ?>      <!-- Item extra fields -->      <div class="itemExtraFields">          <h3><?php echo JText::_('Additional Info'); ?></h3>


 

Even adding <div class="clr"></div> after the <!-- Item extra fields --> does not put it on my page. Why?

This class is not suppose to show anywhere. I hope you mean that you are not seeing it in the source code of your page for some reason, right?

Yes, I'm looking at the page with Firebug and don't see the class in the source code.

Would you like to sent me the item.php file to modify it for you and sent it back so you can see the difference between your file and the modified one and therefore understand what you are doing wrong?