image keep floating left

The image keep floating to the left when view articles.

I have overwrite css with the code:

.img
{
float:none;
}

is that the right way of fixing it ?

Hi
Try add !important rule. And show us your website

Hi
Try add !important rule. And show us your website

I have added .
pls see : http://www.viethome.co.uk/news/en/tin-t ... h-scotland

The content is duplicated, too
Pls see my post at: https://www.gavick.com/support/forums/131/13106.html

I chcecked in ff and your override.css is empty. So you didn't add rule or you do it wrong. Can you show me your overide.css ?

I added in Template setting --> advance setting --> Turn on CSS override with:

#gkMainMenu
{
border-bottom-color: #0146f7;
}
#gkTopMenu { background: #ff7800; border-bottom: 1px solid #4b87c5; }

.img
{
float:none; !important
}

remove this

Code: Select all

.img
{
float:none; !important
}
[code]
and add
[code]
.articleContent img {
float:none !important;
}


How about the content has been duplicated?

Can you view the post i submitted ( there are pictures) and help me to solve this problem?

HI, thanks for this code.
However, I just remember that if we apply this css, any image which I would like to float left will be affected.
Is there any chance to disable image's float and just let it float right or left as the authors wish?

remove this

Code: Select all

.img
{
float:none; !important
}
[code]
and add
[code]
.articleContent img {
float:none !important;
}


You can try add style to the image in html view.

Hi,

My image is aligned manually, please see the html code


<img src="images/stories/grabnews/201201_suc-khoe-doi-song-ng-gia/nhutcorp_1108418931_loetdaonguoicaotuoi1356111492011135_thumb.jpg" alt="Loét da ở người già" width="71" height="85" align="left" border="0" hspace="0" vspace="0" />

However, the float:none will overwrite them automatically! see the picture!

I can disable this template's built-in features using css or hard code?

I'm confused so you want to text next to image or no ? beacue I tgought that the effect you want to achieve is same as image you attached.

OK Let's start again.

If I place the image between paragraphs ( no align ), this template css will make the text Wrapping about the image. Basically, the image will be align Left and Text around them on the right automaticly. Pls see the picture Gavick Content as demonstration.

I don't want that feature. I want to align the image as I wish so!

So come back to our conversation, he said put float:none to css will force the image not to be align left and the text won't be around the image.

However, There are some images in our articles which I have set align LEFT(text wrap around them), those images will lose its align attribute and became as I have shown you in the last post

I hope you get it ^_^

thank you very much

Hi,

My image is aligned manually, please see the html code


<img src="images/stories/grabnews/201201_suc-khoe-doi-song-ng-gia/nhutcorp_1108418931_loetdaonguoicaotuoi1356111492011135_thumb.jpg" alt="Loét da ở người già" width="71" height="85" align="left" border="0" hspace="0" vspace="0" />

However, the float:none will overwrite them automatically! see the picture!

I can disable this template's built-in features using css or hard code?

Replace that code by:

Code: Select all

<img src="images/stories/grabnews/201201_suc-khoe-doi-song-ng-gia/nhutcorp_1108418931_loetdaonguoicaotuoi1356111492011135_thumb.jpg" alt="Loét da ở người già" width="71" height="85" align="left" border="0" hspace="0" vspace="0" style="float:none;"/>


Then you don't need to use the override css anymore.

Hi Don
thanks for ur help
Can I turn off the Float left feature of this template? where can I edit the php code?

Because if I do as you suggested, I will have to add float:none to every single images. My articles format usually will be 1 image align left at the beginning of articles then 2-3 images ( no align) in the middle paragraphs.

Hi again,

- Open file:/templates/gk_twn2/css/joomla.css

- Find:

Code: Select all

.articleContent img,
.feed-item-description img { float: left; margin: 0 10px 10px 0; display: block; padding: 0; background: #fff }


- Just remove "float: left;" out of the code.

That's it, DON

It's Solved !!!

thanks a lot

You are welcome Cong.

Have a nice day!