Store Sections and Sub Sections - Expert Required

[Charlotte]

Hi,

I'm so close to getting my store sections and sub sections to work but I just can't quite get the spacing fixed and it's driving me seven shades of bezerko!

I've attached a jpg of how it's previewing. If somebody could take a look at my code and let me know if I'm missing something obvious I'd be really grateful. I don't know if I'm asking too much of it by putting the main section heading inside a different table but I can't think of another way to get the silver bar image to appear behind the text. I can't suss out why it's putting an extra line break in before the sub sections. If all else fails, I'd settle for putting an extra line break in after the last sub section but I can't seem to do that either!!

Thanks in advance,
Charlotte

<td valign="top"><actinic:block type="EntireSectionList"> <actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3d%3d%201" >
          <br>
          <table width="183" height="20" border="0" cellpadding="0" cellspacing="0" class="DeptHead">
            <tr>
              <td><a href="<actinic:variable name="SectionPageName"/>" target="_self" class="DeptHeadText"><actinic:variable name='SectionName'/></a></td>
              </tr>
          </table>
          <a href="<actinic:variable name="SectionPageName"/>" target="_self" class="subSectionListHead">
            </a> </actinic:block> <actinic:block if="%28%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3d%3d%202%29%20AND%20%28%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%201%29">
                  <ul>
                    </actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3d%3d%202"><br>
                    <a href="<actinic:variable name="SectionPageName"/>" target="_self" class="subSectionList"><actinic:variable name='SectionName'/></a></actinic:block><actinic:block if="%28%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3d%3d%202%29%20AND%20%28%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%20%3cactinic%3avariable%20name%3d%22ListCount%22%20%2f%3e%29" >
                    <p>&nbsp;</p>
                  </ul>
          </actinic:block> </actinic:block>
          <actinic:variable value="Sidebar Coupon Field" name="CouponEntryField" if="%3cactinic%3avariable%20name%3d%22CaptureCoupon%22%20%2f%3e" /> </td>

[Jarvis]

Have you looked at using stylesheet for controling the look and function.
Have a look at http://www.nostalgia-building-supplies.co.uk/
If that's what you want, I'll try and explain.

[NormanRouxel]

Ideally, you'd be doing this with just two UL lists, One for the top-level Sections and an inner one for the second level. CSS would do all the work of creating the look and feel. See http://www.casupply.co.uk/ for one that was mentioned on these forums only an hour or so ago - clean HTML and 9 lines of CSS.

There are many tutorials and free examples of such CSS UL menus on the web.

[Chunkford]

Just replace the code you pasted with this, hopefully that should do the trick.

<td valign="top"><actinic:block type="EntireSectionList"> <actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3d%3d%201" >
          <br>
          <table width="183" height="20" border="0" cellpadding="0" cellspacing="0" class="DeptHead">
            <tr>
              <td><a href="<actinic:variable name="SectionPageName"/>" target="_self" class="DeptHeadText"><actinic:variable name='SectionName'/></a></td>
              </tr>
          </table>
          <a href="<actinic:variable name="SectionPageName"/>" target="_self" class="subSectionListHead">
            </a> </actinic:block> <actinic:block if="%28%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3d%3d%202%29%20AND%20%28%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%201%29">
                  <ul>
                    </actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3d%3d%202">
                    <a href="<actinic:variable name="SectionPageName"/>" target="_self" class="subSectionList"><actinic:variable name='SectionName'/></a><br></actinic:block><actinic:block if="%28%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3d%3d%202%29%20AND%20%28%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%20%3cactinic%3avariable%20name%3d%22ListCount%22%20%2f%3e%29" >
                    <p>&nbsp;</p>
                  </ul>
          </actinic:block> </actinic:block>
          <actinic:variable value="Sidebar Coupon Field" name="CouponEntryField" if="%3cactinic%3avariable%20name%3d%22CaptureCoupon%22%20%2f%3e" /> </td>

But like others said, get to know CSS. Once mastered you can pretty much do what you want for the appearance of your site.
Only your imagination is your limit.
For example CSS Homer (This is crazy)

[Charlotte]

Thanks everyone for your help. sir.chunk, u da man! Norman and Jarvis, thanks as well. I've looked at the stylesheets for both of those websites and I think I'm going to need a couple more cups of coffee to take it all in. I've been using css to style text for a while but I guess it's time to take it to the next level and use it for layout. Look out!

Thanks again for your help and nudges in the right direction x