Where is this white space coming from?

[Zarahemna]

Ok,

This is really a two part question.

1 - How can I get rid of this white space. I tried changing the relevant CSS bits but got so screwed up I had to paste in the original css stylesheet and start over again.



Now what I am aiming for is a solid grey region at the top off the page with the orange of the content header and then the white of the content below. I just haven't even got close so far so any help would be appreciated.

2 - How can I get rid of the category text so that I am left only with the image belonging to each category and sub category?

Details:

Ok my site is at bunker5 followed by a dot and then a com/shop

You will need the /shop bit as the main page at dot com is just a holding page.

[Zarahemna]

Anyone?

I thought it may be a margin issue but I don't know which margin I need to change. I have copied the source code into Dreamweaver but that doesn't show anything with an attribute I can change to make the white space go away.

PS - if this is a silly question and is already dealt with somewhere else, please either link or let me know with a short reply.


My questions are:

1 - How do I hide or remove the category header which above is the word Hobby in Black on a white background.
2 - How do I put a background color behind the sub-category icons?
3 - How can I add extra space between the main category icon and the sub-categories below it?

Any help with any one or more of these concerns would be invaluable.

[s_t_e_v_e]

Get yourself Firefox with the firebug extension... The best tools for design troubleshooting.

edit your stylesheet.css

add this line to get rid of category header;
#indexCategoriesHeading {display:none;}


next add this line for a little spacing.
#categoryDescription {padding:10px 0 20px 0;}



and change the part as below;
.categoryListBoxContents {
background-color:#767676;
padding:10px 0;
}

the above background color is behind the sub cat images - I tried a few different colours, but to me, its best left as the grey..
but this should point you in the right direction.

[Zarahemna]

Thanks Steve,

I have implemented the changes you have suggested and things look a lot better. I am going to go away and have a stab at working out the rest with the FF developer tools. Once that's done I will either come back and post what I have learned for everyone else to see or I will ask a more educated question.

[Zarahemna]

Ok,

Things are better and worse.

I like the way that the buttons are spaced now, but I can't seem to get rid of the annoying white space. This is particularly ugly when you have three or more subcategories.

I took a look at the Firefox tool but I am not sure how to use it to identify what I need to change to get that whole category selection area in #767676. Suggestions are really welcome!

[Zarahemna]

Sorry about the double post, couldn't edit to add the image.



I put this together to help explain what I mean.

I am perfectly happy to be told to go and read documentation or guides if this is covered elsewhere, but I don't think it is in sufficient detail that I have seen.

[stevesh]

I'm not seeing those spaces in IE8 or FF3. Have you cleared your browser cache?

[s_t_e_v_e]

This would get rid of the gaps that I see...

stylesheet.css (line 527)

.categoryListBoxContents {
background-color:#767676;
margin:0;
}

but... that will not cure all the white space as you have the light background for the whole of the centercolum (inherited from #contentMainWrapper)

If you want to have a grey background just for the top part of the page, with the catagory images, you will need to edit your template to allow this...
\includes\templates\custom folder \templates\tpl_index_categories.php;

find;

<!-- BOF: Display grid of available sub-categories, if any -->
<?php
  if (PRODUCT_LIST_CATEGORY_ROW_STATUS == 0) {
    // do nothing
  } else {
    // display subcategories
/**
 * require the code to display the sub-categories-grid, if any exist
 */
   require($template->get_template_dir('tpl_modules_category_row.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_category_row.php');
  }
?>
<!-- EOF: Display grid of available sub-categories -->

and replace with;

<!-- BOF: Display grid of available sub-categories, if any -->
<div class="categoryImg">
<?php
  if (PRODUCT_LIST_CATEGORY_ROW_STATUS == 0) {
    // do nothing
  } else {
    // display subcategories
/**
 * require the code to display the sub-categories-grid, if any exist
 */
   require($template->get_template_dir('tpl_modules_category_row.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_category_row.php');
  }
?>
</div>
<!-- EOF: Display grid of available sub-categories -->

this will surround the category images with a DIV that is styled to have a grey background... no more white gaps...

[Zarahemna]

Thanks Steve,

I think I am learning. I took what you said about this tpl file and I am now working my way through the other templates trying to work out what I need to do in each instance.

It's quite enjoyable really. Hopefully one day soon the site will look less amateur and more professional...

I take it that I can change the alignment of elements in the tpl files too, or should I try to do that in the CSS sheet? For instance I want to centre and add some padding to the categoryImage at the top of the page. Am I right in thinking that if I want this to be a universal thing I am best off looking to the CSS or should I modify all of the involved tpl files.

[s_t_e_v_e]

Use your CSS for style changes. Inline styles within the templates are best avoided.