Results 1 to 8 of 8
  1. #1
    Join Date
    Nov 2010
    Posts
    37
    Plugin Contributions
    0

    Default Suggestion on Parent Category list

    Firstly, here is the URL:

    http://printingsuppliesdirect.com/in...=index&cPath=1


    I wanted to see if anyone had any suggestions on how to make this tabled list look better. I didn't like the way Zencart naturally listed categories. It wasn't distinct enough and the text wasn't big enough. I made this table in Dreamweaver and inserted the code into the page via the admin. In Firefox and IE, the bullet points of the unordered list show outside of the table. Also, I got an SEO survey saying that nested tables are a no no. I like the general idea though. If I could get the bulletpoints inside the table for Firefox and IE, I think I would be fine. I'm open to any suggestions though on how to make this look better.

    Thank you in advance.

  2. #2
    Join Date
    Nov 2006
    Location
    Dartmouth, NS Canada
    Posts
    2,381
    Plugin Contributions
    0

    Default Re: Suggestion on Parent Category list

    There's nothing wrong with a table used to display tabular data, as you are doing. But there's absolutely no reason to put a list item into each table cell. That's just plain weird.

    So either use list items, which will do the job I think, or use the table and put the data into the table cells without the list item code. Given that tables are problematic to style when nested deeply inside other code, I'd strongly suggest the list item approach.

    And something interesting I just noticed... the code structure inside the different table cells is not consistent. If you keep the table stuff, you'll need to fix that up.

    As for the bullets being outside your table cells, that's because bullets are generally given a negative indent by default. In effect, they always display outside of the text block but we don't usually notice it because there are not usually close borders to make it obvious.

    Final point: don't use Dreamweaver. That page has 41 errors in it, as shown when I checked it in a validator. DW created most of those, including the li in td errors. (At least fix the <br> errors. ZC puts out XHTML code, so the correct form is <br />.)

    Rob

  3. #3
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Suggestion on Parent Category list

    The appearance of the stock subcategories list is easy to change. There is no reason to go making a static custom table for it when you can just edit your stylesheet. Add this to your stylesheet:
    Code:
    .categoryListBoxContents {
        text-align: left !important;
        border: 1px solid #aabbcc;
        width: 47% !important;
        height: 2.5em;
        margin:  0.2em !important;
        padding: 0.3em;
        font-size: 1.2em;
        }
    .categoryListBoxContents br, .categoryListBoxContents+br {display: none;}
    Adjust to taste.
    Some of these declarations will not be necessary if you change settings in admin, for instance setting the subcat listing to two per row.

  4. #4
    Join Date
    Nov 2010
    Posts
    37
    Plugin Contributions
    0

    Default Re: Suggestion on Parent Category list

    Great. Thanks to both rstevenson and gjh42.

    gjh42: I went ahead and applied your css code and it looks great (see below the picture: http://printingsuppliesdirect.com/in...=index&cPath=1 ).

    The problem now is having control over where I want the categoryListBoxContents on the page. I would want the ListBoxContents below
    "Please click on the Printing Plates you need:" , but above the picture of the printing plate.

    Thank you for the help so far and thanks in advance for any help you can give with this question.

  5. #5
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Suggestion on Parent Category list

    You could make the printing plate image a background image instead of part of the category description/image, and create space and positioning for it with a category-specific stylesheet.

    For a test, add to your stylesheet
    Code:
    #navColumnOne+td {background: url(http://printingsuppliesdirect.com/Thermal-Ctp-Plates4.jpg) no-repeat bottom center; padding-bottom: 290px;}
    To use it, make a new file, c_1.css, in /includes/templates/your_template/css/, with this rule as its only content. (You can add other category-specific rules to this stylesheet later if you want.)

    Note that it is common (good) practice to store template images like this in /includes/templates/your_template/images/, and refer to them in stylesheets like
    url(../images/your_image.jpg)

    It is not good practice to store images of any kind in your root folder, as the folder will quickly get cluttered with lots of detail items when it would be cleaner to have things organized under a relevant group folder.

  6. #6
    Join Date
    Nov 2010
    Posts
    37
    Plugin Contributions
    0

    Default Re: Suggestion on Parent Category list

    Hi again.

    I decided to go with the tabling method because it gives me more control over page itself. I styled it off of gfh42's styling which is really nice.

    The problem I'm having is getting the borders to be the #aabbcc color rather than the default black color.
    Again, the link is: http://printingsuppliesdirect.com/in...=index&cPath=1

    Here's the code below. You will see that I have the border color as "#aabbcc" but it's still showing as the default black color:

    <table width="100%" border="1" cellpadding="3" cellspacing="3" bordercolor="#aabbcc" style="font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
    border-top:none; border-bottom: none; border-right:none; border-left: none;">
    <tr>
    <td width="268"><a href="http://printingsuppliesdirect.com/index.php?main_page=index&cPath=1_46">Conventional 1-sided Negative</a><br /> </td>
    <td width="316"><a href="http://printingsuppliesdirect.com/index.php?main_page=index&cPath=1_50">Conventional 2-sided Negative<br />

    </a></td>
    </tr>
    <tr>
    <td><a href="http://printingsuppliesdirect.com/index.php?main_page=index&cPath=1_9">
    Mitsubishi Silver Polyester Plates<br />

    </a></td>
    <td><a href="http://printingsuppliesdirect.com/index.php?main_page=index&cPath=1_11">PSD Laser Plates<br />

    </a></td>
    </tr>
    <tr>
    <td><a href="http://printingsuppliesdirect.com/index.php?main_page=index&cPath=1_10">PSD Violet Photopolymer Plates<br />

    </a></td>
    <td><a href="http://printingsuppliesdirect.com/index.php?main_page=index&cPath=1_21">Newspaper Plates<br />

    </a></td>
    </tr>
    <tr>
    <td><a href="http://printingsuppliesdirect.com/index.php?main_page=index&cPath=1_20">Thermal Plates
    </a></td>
    <td><a href="http://printingsuppliesdirect.com/index.php?main_page=index&cPath=22_24_29">Epson&nbsp;Metal and Poly Plates</a></td>
    </tr>
    </table>


    Thanks you in advance again. Much appreciated.

  7. #7
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Suggestion on Parent Category list

    I've never used layout tables for styling, so don't know if bordercolor="#aabbcc" is correct or will apply to the right borders.
    However, since you want to use inline styling, I would suggest either using a CSS border-color: #aabbcc; in the main style="etc. of the <table>, or adding a CSS border style to the cells:
    <td width="268" style="border: 1px solid #aabbcc;">

  8. #8
    Join Date
    Nov 2010
    Posts
    37
    Plugin Contributions
    0

    Default Re: Suggestion on Parent Category list

    Quote Originally Posted by gjh42 View Post
    I've never used layout tables for styling, so don't know if bordercolor="#aabbcc" is correct or will apply to the right borders.
    However, since you want to use inline styling, I would suggest either using a CSS border-color: #aabbcc; in the main style="etc. of the <table>, or adding a CSS border style to the cells:
    <td width="268" style="border: 1px solid #aabbcc;">


    Perfect. Thank you so much for the help gjh42. I owe you!

 

 

Similar Threads

  1. v154 How do I list products in sub category with in the parent category?
    By JoeToys in forum Setting Up Categories, Products, Attributes
    Replies: 38
    Last Post: 2 Dec 2018, 08:54 PM
  2. Replies: 7
    Last Post: 24 Nov 2012, 06:33 AM
  3. v139h How do I bulk-move all products from Sub-Category into a parent Category?
    By shags38 in forum Setting Up Categories, Products, Attributes
    Replies: 2
    Last Post: 28 Jun 2012, 07:19 PM
  4. Replies: 2
    Last Post: 30 Jul 2008, 08:35 AM
  5. List subcategories products when clicking Parent
    By milksamsa in forum Setting Up Categories, Products, Attributes
    Replies: 11
    Last Post: 5 Mar 2008, 01:27 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR