sub-boards going funny

[Former Member]

Forum URL: rats-that-strike.proboards.com

When more than one sub-board is there, they get a bit glitched:

I know it's something to do with my code, just not sure what.

{if $[board.sub_board]}
<p class="sub-boards" style="padding: 2px;">
{if $[board.sub_board] != 1}{/if}
                               
{foreach $[board.sub_board]}
                               <div class="subboardname" style="font: caption;">
                                   <a href="$[board.sub_board.href]">
                                           | $[board.sub_board.name] |
                                   </a>
                               {/foreach}
  </div>
</p>
{/if}

[Scott]

@majority, what is the goal of this:

{if $[board.sub_board] != 1}{/if}



Also, how do you want them to look? Like "Introductions" or "Forum Games" ?

[Former Member]

I wasn't sure what that was for either. I deleted it, but nothing seemed to change so I just left it there. Might've been something I was trying awhile back and forgot about

I would like them to be side-by-side, like:

GENERAL CHAT
Guests welcomed here!
Sub-board #1 Sub-board #2

[Former Member]

still looking for help.

[elli]

You are closing your sub-board </div> after the foreach loop closes, which means that the loop ends without each sub-board having a closing </div> tag. This is causing each subsequent sub-board to be nested within the previous sub-board, creating that extra white line. Try this:

{if $[board.sub_board]}
  <p class="sub-boards" style="padding: 2px;">
    {foreach $[board.sub_board]}
      <div class="subboardname" style="font: caption;">
        <a href="$[board.sub_board.href]">
          | $[board.sub_board.name] |
        </a>
      </div>
    {/foreach}
  </p>
{/if}

It's good practice to indent nested HTML elements and keep indentation tidy. Easier to find errors.

[Former Member]

Thank you so much!! Now, is there a way to make them NOT go to next line, and stay in a row?

[elli]

Yes. <div> is a block-level element in HTML, which means that it will always take up 100% of its container's width unless specified otherwise with CSS. Other block-level elements include <p>, <h1> through <h6>, <ol>, <ul>, and <table>. The opposite of a block-level element is an inline element; these are elements that only take the space they need, and will be rendered on the same baseline. Like text. Examples include <strong>, <em>, <a>, and <span>.

If you want your sub-boards to sit next to each other, you have two options: you can change the formatting of <div> with CSS, or you can use an inline element.

Since you're nesting your sub-boards within a <p>, I would recommend using an inline element because it's not semantically correct to nest a <div> within a <p>. Try this:

{if $[board.sub_board]}
  <p class="sub-boards" style="padding: 2px;">
    {foreach $[board.sub_board]}
      <span class="subboardname" style="font: caption;">
        <a href="$[board.sub_board.href]">
          | $[board.sub_board.name] |
        </a>
      </span>
    {/foreach}
  </p>
{/if}

This will probably need a little bit of CSS to add spacing between sub-boards, but not much.

[Former Member]

Hmm, I tried that but it didn't work. Didn't change anything I think.

(Oh also, I really appreciate this help!! )

[elli]

Hmm, I don't see that change on your live site, and it looks like a tag isn't closed somewhere because there are empty paragraphs before and after your sub-boards.

[Former Member]

Oh sorry! I reset it back after it didn't work.
I'll change it back, and look into the tag and see if I find something.

[Former Member]

Wait that worked!! I don't know what happened before but now the subboards are awesome!! Thank you!!