How to get Image and text in the same line Virtuemart 2.0.8

[Slixis]

Hi Everybody,
Someone can tel me how to get image and text in the same line.
See my website here: http://www.afrikstore.com/index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=4&virtuemart_category_id=4&Itemid=439

Thank's for your help

[ivus]

Hi Slixis,

Most probably, but firstly we need to know what you're referring to? I took a look and am unsure what "TEXT" you're referring to?

Please clarify... more.

[Slixis]

Hi Ivus,
In the demo of virtuemart website, the image is in the same level that the détails of the product (Price etc. .. see here: http://demo.virtuemart.net/index.php?page=shop.product_details&category_id=11&flypage=flypage_default.tpl&product_id=28&option=com_virtuemart&Itemid=12&vmcchk=1&Itemid=12

In my website the details of the product (Note, Price, add to cart...) are under the image (see here http://www.afrikstore.com/index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=4&virtuemart_category_id=4&Itemid=439.

I want the image and text (Note : Pas noté, Prix unitaire HT, Prix : 50,00 €, Prix de vente HT : 50,00 €, Add to cart ...) to be like the Virtuemart demo.

Thank you

[ivus]

Hi Slixis,

OK.. I see you problem. Simple.

Your 2 container DIVs are too wide to sit side-by-side within the main layout container.

Make the div's width smaller and they should fit.

.width50 {
  width: 450px;
}

I hope this helps.

[attachment cleanup by admin]

[jenkinhill]

Slixis you should have a look at using Firebug to help resolve layout issues - it saves a lot of development time!

See http://forum.virtuemart.net/index.php?topic=102850.0
And look at http://getfirebug.com/layout

[Slixis]

Hi ivus, jenkinhill,
Thank you for your informations. This helped me a lot. I used firebug. I managed to find the files to fix the CSS. But I did not find the file where the DIV are. I can not correct the error. Sorry.
Need help again.

[Slixis]

Hi,
Anyone know where can we find the file with all div in virtuemart 2.0.8?
I try to locate the div container images products (div.main-image).
Thank's for assistance

[ivus]

Hi Slixis,

I suggest you read up on using Firebug some more. It will significantly reduce the amount of time you spend on this forum asking for simple layout help and sitting around waiting for it to come.

Anyway. I've attached an image showing you how to use Firebug.

The top panel obviously is your website. The reason the region is highlighted is because I've hovered over elements in the code inspector window (the bottom left hand panel).

When I click on a specific element, it's applied styles (inherited from the entire document) appears in the style inspector window (the bottom right hand panel). In this case, you're looking for .width50, and if you move your eyes to the right some more... it even tells your what file it's in and the line you can find it on. BUT before you open up that file, you can double click on the "50%" part next to the "width:" part within the .width50 style and change the value in real time. This way you can tweak it until you have the correct width value without having to open the file first.

.width50 {
  width: 450px;
}

I did that part for you too.

Now if you click on that style sheet link (vmsite-ltr.css (line 133)) what you'll see on the next panel is more information on the EXACT LOCATION of the file. I'm sure you'll be able to figure that part out.

Alternatively if all of that is beyond you, simply do a global Search (CTRL+F) for the term ".width50 {".

Good luck.

[attachment cleanup by admin]

[Slixis]

Hi Ivus,
Thank you very much.
In fact it was very easy to correct it.
I followed your advice exactly and the problem is resolved.
Great thank's
Have a nice day.

[ivus]

Hi Slixis,

Wonderful. Perhaps now you can mark this topic as [SOLVED].