Deleting Unwated Table Cells

Modern and unique personal portfolio Joomla template ideal for work presentation - support forum.
GK User
Wed Sep 19, 2012 4:48 pm
Hi there fellas! It's me again.
I now have a lot simple question ready to be answered.

Below is the link of the pre-design I created using gktable2
As you can see left top and left bottom cells are empty, is there a way I can delete them? Thanks in advance.
User avatar
Senior Boarder

GK User
Wed Sep 19, 2012 4:55 pm
One more question, some pages width changes according to what?
See blow
http://www.ipomdizayn.com/ipekela/index.php/kampanyalar content area and menu space is like 40 pxl

While http://www.ipomdizayn.com/ipekela/index ... eniz-olsun has content and menu by like 5 pixel

I would like my all pages to be like the second link I gave, is there a way to set it straight?
User avatar
Senior Boarder

GK User
Wed Sep 19, 2012 6:48 pm
For width add following css code in to css/override.css file and enable css override setting in template settings > advanced settings > css override "on".

Code: Select all
#gkMain { width: 70%!important;}


Regarding empty cells you can hide them with css as we cannot delete them.

I ll post a solution tomorrow as I need to go out at the moment.

See you around...
User avatar
Platinum Boarder

GK User
Wed Sep 19, 2012 8:21 pm
Hi there Norman! Thanks for the quick and awesome answer. I got it working. I am looking forward for your css codes too. :) See you tomorrow.
User avatar
Senior Boarder

GK User
Wed Sep 19, 2012 11:07 pm
Hi there again, I am experiencing another problem I would like to share, since it's about table aswell.
Problem 1 is http://www.ipomdizayn.com/ipekela/index.php/kampanyalar as you can see table rows somehow has invisible empty spaces.

Code: Select all
<h2 style="text-align: center;"><span style="color: #dba209;"><span style="color: #000000;">E-TICARET</span> KAMPANYALARIMIZ</span></h2>
<table class="gkTable2" style="margin-left: auto; margin-right: auto;" align="center">
<tbody>
<tr class="odd">
<td> </td>
<td><img src="../ikonlar/eko2.png" border="0" width="150" height="110" /></td>
<td><img src="../ikonlar/webticari.png" border="0" width="150" height="110" /></td>
<td><img src="../ikonlar/tamticari.png" border="0" width="150" height="110" /></td>
</tr>
<tr class="odd">
<td align="left" valign="middle"><span style="font-family: verdana, geneva; font-size: small;"><strong>E-Ticaret Kurulumu</strong></span></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
</tr>
<tr class="odd">
<td align="left" valign="middle"><span style="font-size: small;"><strong><span style="font-family: verdana, geneva;">16 Farklı Ödeme Seçeneği</span></strong></span></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
</tr>
<tr>
<td><span style="font-size: small; font-family: verdana, geneva;"><strong>Yönetim Paneli</strong></span></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
</tr>
<tr class="odd">
<td><span style="font-family: verdana, geneva; font-size: small;"><strong>Ek Sayfalar</strong></span></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
</tr>
<tr class="odd">
<td><span style="font-size: small; font-family: verdana, geneva;"><strong>7/24 Destek İmkanı</strong></span></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
</tr>
<tr class="odd">
<td><span style="font-size: small; font-family: verdana, geneva;"><strong>İnteraktif Tasarım</strong></span></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
</tr>
<tr class="odd">
<td><span style="font-family: verdana, geneva; font-size: small;"><strong>Google Optimizasyonu</strong></span></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
</tr>
<tr class="odd">
<td><span style="font-family: verdana, geneva; font-size: small;"><strong>Aylık Bakım</strong></span></td>
<td align="center"><img src="../ikonlar/yok.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
</tr>
<tr class="odd">
<td><span style="font-family: verdana, geneva; font-size: small;"><strong>Güncelleme Desteği</strong></span></td>
<td align="center"><img src="../ikonlar/yok.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
</tr>
<tr class="odd">
<td><span style="font-family: verdana, geneva; font-size: small;"><strong>Domain (1 Yıl)</strong></span></td>
<td align="center"><img src="../ikonlar/yok.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
</tr>
<tr class="odd">
<td><span style="font-family: verdana, geneva; font-size: small;"><strong>Hosting (1 Yıl)</strong></span></td>
<td align="center"><img src="../ikonlar/yok.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
</tr>
<tr class="odd">
<td><span style="font-size: small; font-family: verdana, geneva;"><strong>Google AdWords (2 Ay)</strong></span></td>
<td align="center"><img src="../ikonlar/yok.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/yok.png" border="0" width="30" height="30" /></td>
<td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
</tr>
<tr class="odd">
<td> </td>
<td align="center" valign="middle">
<p><strong>800 TL (%20 İndirimde!)</strong></p>
<p><strong><img src="../ikonlar/detay.png" border="0" width="100" height="29" /></strong></p>
</td>
<td align="center" valign="middle">
<p><strong>1000 TL (%20 İndirimde!)</strong></p>
<p><strong><img src="../ikonlar/detay.png" border="0" width="100" height="29" /></strong></p>
</td>
<td align="center" valign="middle">
<p><strong>1300 TL (%30 İndirimde!)</strong></p>
<p><strong><img src="../ikonlar/detay.png" border="0" width="100" height="29" /></strong></p>
</td>
</tr>
</tbody>
</table>


I checked and couldn't find what causes to be a invisible space.

Problem 2 is
At http://demo.gavick.com/index.php?month=Apr&year=2011 table style for white table has website-backgroundish background, however my tables using the gk code doesn't show such backgrounds. Is it intended or I do something wrong?

Thanks in advance.
User avatar
Senior Boarder

GK User
Wed Sep 19, 2012 11:58 pm
Firstly empty cell is caused by cell markup "td" which is below but removing it will cause other 3 cells to move to left that is why we can't remove it.
Code: Select all
<td> </td>


Secondly regarding colors you have to have each line different color by using one default line which is already specified in css and next line using .odd class which is slightly different color to distinguish table rows. if thats what you mean following is what you should be doing.

So example table rows usage would be below. I've deleted other content and html inside "tr" tags for this example.
Code: Select all
<tr>Row1</tr>
<tr class="odd">Row2</tr>
<tr>Row3</tr>
<tr class="odd">Row4</tr>
<tr>Row5</tr>
<tr class="odd">Row6</tr>

If you need different colours, this can be achieved by adding them in css.

See you around...
User avatar
Platinum Boarder

GK User
Thu Sep 20, 2012 11:24 am
Hi Norman! Thanks for answer, I would also like to recieve how to make a cell invisible as you mentioned above.

Thanks.
User avatar
Senior Boarder

GK User
Thu Sep 20, 2012 12:36 pm
I ve tested hiding empty cell although it does get hidden but it doesn't look good for hosting style you are trying to get. So I ll post a div alternative to table layout for you. I ll use your page for example.

See you around...
User avatar
Platinum Boarder

GK User
Thu Sep 20, 2012 5:27 pm
Thanks a lot for taking care of me again. Looking forward to your answer. :)
User avatar
Senior Boarder

GK User
Fri Sep 21, 2012 8:00 am
Using following url from your website as an example.
http://www.ipomdizayn.com/ipekela/index ... ampanyalar

This is how it will look.
http://i49.tinypic.com/2j0eg5z.jpg

Below is your edited html layout. Simply copy and paste it to where your current code is.
Code: Select all
    <h2 style="text-align: center;"><span style="color: #dba209;"><span style="color: #000000;">E-TICARET</span> KAMPANYALARIMIZ</span></h2>
    <table class="gkTable2" style="margin-left: auto; margin-right: auto;" align="center">
    <tbody>
    <tr class="odd">
    <td class="first"></td>
    <td><img src="../ikonlar/eko2.png" border="0" width="150" height="110" /></td>
    <td><img src="../ikonlar/webticari.png" border="0" width="150" height="110" /></td>
    <td><img src="../ikonlar/tamticari.png" border="0" width="150" height="110" /></td>
    </tr>
    <tr class="even">
    <td align="left" valign="middle"><span style="font-family: verdana, geneva; font-size: small;"><strong>E-Ticaret Kurulumu</strong></span></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    </tr>
    <tr class="odd">
    <td align="left" valign="middle"><span style="font-size: small;"><strong><span style="font-family: verdana, geneva;">16 Farkli Ödeme Seçenegi</span></strong></span></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    </tr>
    <tr class="even">
    <td><span style="font-size: small; font-family: verdana, geneva;"><strong>Yönetim Paneli</strong></span></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    </tr>
    <tr class="odd">
    <td><span style="font-family: verdana, geneva; font-size: small;"><strong>Ek Sayfalar</strong></span></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    </tr>
    <tr class="even">
    <td><span style="font-size: small; font-family: verdana, geneva;"><strong>7/24 Destek Imkani</strong></span></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    </tr>
    <tr class="odd">
    <td><span style="font-size: small; font-family: verdana, geneva;"><strong>Interaktif Tasarim</strong></span></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    </tr>
    <tr class="even">
    <td><span style="font-family: verdana, geneva; font-size: small;"><strong>Google Optimizasyonu</strong></span></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    </tr>
    <tr class="odd">
    <td><span style="font-family: verdana, geneva; font-size: small;"><strong>Aylik Bakim</strong></span></td>
    <td align="center"><img src="../ikonlar/yok.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    </tr>
    <tr class="even">
    <td><span style="font-family: verdana, geneva; font-size: small;"><strong>Güncelleme Destegi</strong></span></td>
    <td align="center"><img src="../ikonlar/yok.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    </tr>
    <tr class="odd">
    <td><span style="font-family: verdana, geneva; font-size: small;"><strong>Domain (1 Yil)</strong></span></td>
    <td align="center"><img src="../ikonlar/yok.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    </tr>
    <tr class="even">
    <td><span style="font-family: verdana, geneva; font-size: small;"><strong>Hosting (1 Yil)</strong></span></td>
    <td align="center"><img src="../ikonlar/yok.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    </tr>
    <tr class="odd">
    <td><span style="font-size: small; font-family: verdana, geneva;"><strong>Google AdWords (2 Ay)</strong></span></td>
    <td align="center"><img src="../ikonlar/yok.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/yok.png" border="0" width="30" height="30" /></td>
    <td align="center"><img src="../ikonlar/var.png" border="0" width="30" height="30" /></td>
    </tr>
    <tr class="even">
    <td class="last"></td>
    <td align="center" valign="middle">
    <p><strong>800 TL (%20 Indirimde!)</strong></p>
    <p><strong><img src="../ikonlar/detay.png" border="0" width="100" height="29" /></strong></p>
    </td>
    <td align="center" valign="middle">
    <p><strong>1000 TL (%20 Indirimde!)</strong></p>
    <p><strong><img src="../ikonlar/detay.png" border="0" width="100" height="29" /></strong></p>
    </td>
    <td align="center" valign="middle">
    <p><strong>1300 TL (%30 Indirimde!)</strong></p>
    <p><strong><img src="../ikonlar/detay.png" border="0" width="100" height="29" /></strong></p>
    </td>
    </tr>
    </tbody>
    </table>


Add following css in to css/override.css and make sure css override is enabled in template settings > advanced settings>css override "on".
Code: Select all
.first {
    background: transparent!important;
    border-left: none!important;
    border-top: none!important;
}
.last {
    background: transparent!important;
    border-left: none!important;
    border-bottom: none!important;
}
.gkTable2 strong {
    vertical-align: super;
}



See you around...
User avatar
Platinum Boarder

GK User
Fri Sep 21, 2012 11:15 pm
Thanks a lot Norman!
User avatar
Senior Boarder

GK User
Fri Sep 21, 2012 11:45 pm
No problem at all, see you around...
User avatar
Platinum Boarder


cron