COMMUNITY FORUM

Float item image left

Start
Prev
1
Next
End

Fred Doherty
Topic Author
Offline
New Member

12 years 9 months ago - 12 years 9 months ago #60533 by Fred Doherty

Float item image left was created by Fred Doherty

Ive searched the web and tried the various solutions to this, but none seem to work.

Heres what Ive done:

Created a template overide

Gone into the overides item.php file and removed the line

<div class="clr"></div>

at the end of the itemimageblock section.

Gone into k2.css in my overides css and changed my spanimage to

span.itemImage {text-align: right;}

All it seems to do is move my image to where I want but the only text that gets wrapped around the image is the image caption text, my full text still appears below the image.

Can anyone tell me where Im going wrong. Im using K2 2.4.5

Cheers in advance

Please Log in or Create an account to join the conversation.

Kannan Naidu Venugopal
Offline
Platinum Member
Aham Brahmasmi

12 years 9 months ago #60534 by Kannan Naidu Venugopal

Replied by Kannan Naidu Venugopal on topic Re: Float item image left

Hi Fred,

Is there a link to your site? Of hand, i think the itemimageblock should have a float: left:

K2 Rocks \m/

Please Log in or Create an account to join the conversation.

Fred Doherty
Topic Author
Offline
New Member

12 years 9 months ago - 12 years 9 months ago #60535 by Fred Doherty

Replied by Fred Doherty on topic Re: Float item image left

Yeah the smaller of my sites I'm using to try K2 out on is Tattoo Pain Scale this is a link to an article page where you can see the image problem Im having

Heres the code for the css for imageblock

div.itemImageBlock {padding:8px;margin:0 0 16px 0;float:left;}
        span.itemImage {text-align: right;}
        span.itemImage img {border:1px solid #ccc;padding:8px;}
        span.itemImageCaption {color:#666;float:left;display:block;font-size:11px;}
        span.itemImageCredits {color:#999;float:right;display:block;font-style:italic;font-size:11px;}

When you view the page you get this

<!-- Item Image -->
	  <div class="itemImageBlock">
		  <span class="itemImage">
		  	<a class="modal" rel="{handler: 'image'}" href="/media/k2/items/cache/e0a70f72bdae9885bfc32d7cd19a26a1_XL.jpg" title="Click to preview image">
		  		<img src="/media/k2/items/cache/e0a70f72bdae9885bfc32d7cd19a26a1_S.jpg" alt="Tattoo Pain Scale" style="width:200px; height:auto;" />
		  	</a>
		  </span>
 
		  		  <!-- Image caption -->
		  <span class="itemImageCaption">Tattoo Pain Scale</span>
		  
		  
		  
	  </div>
	  
	  	  	  	  <!-- Item fulltext -->
	  <div class="itemFullText">
	  ****article text goes here***	  </div>
	  	  
		<div class="clr"></div>

Please Log in or Create an account to join the conversation.

Start
Prev
1
Next
End