peterp Posted December 12, 2017 Share Posted December 12, 2017 Hi All, I have a client that has clothing as their products and as all clothing comes in sizes they want to create a table with the various sizes eg. S,XL,L,M etc with the dimensions for each size. This they have been able to do using the description part of the product definition however sometimes the table is so wide that it over displays the column in the side bar. So is there a way that I can make the side bar move sideways if the table over displays or even make the shin wider. The skin I'm using is Mican Please see below Quote Link to comment Share on other sites More sharing options...
bsmither Posted December 12, 2017 Share Posted December 12, 2017 We would like a web address so we can play with it. Quote Link to comment Share on other sites More sharing options...
bsmither Posted December 12, 2017 Share Posted December 12, 2017 We can move the Product Description under the Gallery. In content.product.php, find: <h2>{$LANG.catalogue.product_description}</h2> <div class="product_description"> {$PRODUCT.description} <p><strong>{$LANG.catalogue.product_code}:</strong> {$PRODUCT.product_code}</p> {if $PRODUCT.manufacturer} Change to: {* <h2>{$LANG.catalogue.product_description}</h2> *} <div class="product_description"> {* {$PRODUCT.description} *} <p><strong>{$LANG.catalogue.product_code}:</strong> {$PRODUCT.product_code}</p> {if $PRODUCT.manufacturer} Find: {if isset($PRODUCT.discounts)} <div id="quantity_discounts"> <h2>{$LANG.catalogue.quantity_discounts}</h2> Change to: <h2>{$LANG.catalogue.product_description}</h2> {$PRODUCT.description} {if isset($PRODUCT.discounts)} <div id="quantity_discounts"> <h2>{$LANG.catalogue.quantity_discounts}</h2> Quote Link to comment Share on other sites More sharing options...
Noodleman Posted December 12, 2017 Share Posted December 12, 2017 assign your table a class and build a CSS class to control it's max-width Quote Link to comment Share on other sites More sharing options...
peterp Posted December 12, 2017 Author Share Posted December 12, 2017 Thankyou everybody for your fast responses, I will try them and see how we get on I will let you know the results Regards Peterp Quote Link to comment Share on other sites More sharing options...
peterp Posted December 13, 2017 Author Share Posted December 13, 2017 Hi All, Brian I have tried the suggested code but unfortunately it didn't work, I can't give you a URL as the site is in development and at this stage is only on a localhost. What I have noticed though is when I watch the programs by using firefox firebug I can see where the table is displayed and I noticed it had a 'float left' so while I was still in trace mode so to speak I change the float to be 'float right' this achieved the desired result of making the table display further to the left and outside of the sidebars. That is all so well and good but when I go looking for the CSS that is using I'm unable to find it in either layout.css or common.css. Firebug says the element that I'm looking at is in inline which is now beyond my limited knowledge. Where do I change this inline css? See below as to what I'm trying to explain, the highlighted code is what I was able to change to be 'Align=Right' which achieved measurements table to be justified to the left Hope you can help Regards, Peterp Quote Link to comment Share on other sites More sharing options...
bsmither Posted December 13, 2017 Share Posted December 13, 2017 (edited) First, editing a template may require that you have CubeCart clear its skin cache. Smarty will use it's previously compiled, cached version. (Admin, Maintenance, Rebuild tab, Clear Cache.) I urge you to try editing the template again. Second, please know that this code: <table align="left" ... > is not a float. It is an alignment. It is not CSS. It is a prehistoric means of telling the browser where to place the object. "Shove this object up against the left side of its container." (Or right side, accordingly.) Third, the table cannot shrink any narrower - regardless of having applied a CSS rule for a max-width. A table (generally) will not allow the columns to be narrower than the widest word in it. I think what has happened, like overflowing into the right sidebar, the table, being align=right, now overflows into the empty space below the gallery. Fourth, know that an "in-line" CSS rule looks like this: <table style="position: absolute; right: 0px;" ...> This tells the browser to position the table absolutely against the right edge of its (also positioned) container, but maintain a gap of 0 (or however many) pixels. This CSS rule will appear in the Inspector's Rules tab for the selected element. Again, try editing the template. It is a huge waste to let all that white space stay white - giving you room for a nicely styled, uncrowded table. Edited December 13, 2017 by bsmither Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.