Cansomeone help me with my botched board list attempt?

aliaskappaccino
pronounsthey
283written posts
kappaccinoearned bits
offlinecurrently
kappaccino
Senior Member
kappaccino Avatar
welcome and well met, my brave little spark
(Sorry this post is very messy, I am running late, but wanted to post it up before I had to leave until tonight.)

Hello all! I’ve been recently trying to learn skinning and feel like I’ve got a hold of the basics of css and stuff. But when I got to the boards list part it’s like I’ve hit a wall. I’m probably just a big dumb dumb, but I can’t seem to understand how it works. Can someone help me understand wtf I’ve messed up and help me fix it?



Okay, here is the board concept image I made:



i.ibb.co/zsj6vG8/biardlistmockup1.png



I was easily able to create the top banner section. But when it came to the board list…

I went wildy off mock up because I was bumbling through it. I actually like the way this looks more anyway, so yay!



i.ibb.co/8YqSsD4/biardlistmockup2.png



...The not so yay part? Well, firstly when I go to the thread list it’s broken into a billion pieces!



i.ibb.co/KL96mmk/biardlistmockup3.png



BUT EVEN WORSE, if I add more than one board per section, it all breaks.



i.ibb.co/Jc4nNhc/biardlistmockup4.png



All this failure can probably be attributed to me not really understanding tables, and the fact I don’t know what the heck the if/else and the proboard attributes are really.



Here is my horrible attempt at the coding.



My board list:

<table class="list" role="grid">

<thead>

       <table class ="animaltable">{foreach $[board]}

{if !$[board.is_redirect]}

<tr id="$[board.content_id]" class="$[board.content_class]">

<tr> <th class="animalcategory"></th> </tr>

<tr> <td class="animaltitleboard"><div class="animaltitle">$[board]</div></td>

<td class="animaldescriptionbox"><div class="animaldescription">$[board.description] </div></td> </tr>

<tr><td class="animalsubboardsbox"><div class="animalsubboards">{if $[board.sub_board]  > 0} {if $[board.sub_board] != 1}{/if}

{foreach $[board.sub_board]}<a href="$[board.sub_board.href]">$[board.sub_board.name]</a>$[board.sub_board.comma] {/foreach} </div>

{/if}</td>

<td class="animalrecent">{if $[board.posts] > 0}

{if $[board.last_thread]}

$[board.last_thread.recent_link] by $[board.last_thread.last_post.created_by]

{/if}

{else}

{/if}</td> </tr> </table>











And my css:





.animaltable {width: 1060px;background-color:#ececec;background-image:url(https://i.ibb.co/gdcXtQ9/subtle-freckles.png);padding: 5px;

}



.animalcategory { }



.animaltitleboard { }

.animaltitle{display: inline-block; height: 100px; width: 450px;background-image:url(https://i.ibb.co/gdcXtQ9/subtle-freckles.png);font-size: 50px;font-family:'Charm', cursive; text-align:center;background-color: #c8a9b3; padding:5px; color: #ececec; margin-top: -40px;border: 3px solid transparent;

-webkit-border-image: url(https://i.ibb.co/12p2f5X/tumblr-luvtrl-ZDs-C1qiav1uo1-400.png) 50 round; /* Safari 3.1-5 */

-o-border-image: url(https://i.ibb.co/12p2f5X/tumblr-luvtrl-ZDs-C1qiav1uo1-400.png) 50 round; /* Opera 11-12.1 */

border-image: url(https://i.ibb.co/12p2f5X/tumblr-luvtrl-ZDs-C1qiav1uo1-400.png) 50 round;

                   box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19); }

.animaldescriptionbox{}

.animaldescription {height: 100px; overflow: auto; padding: 15px;font-size: 11px; margin-left: -55px; }

.animalsubboardsbox {}

.animalsubboards {}



.animaltitle a:link, a:active {text-shadow: 0px 1px rgba(63,107,169, 0.5);font-family:'Charm', cursive; color: #ffffff; }

.animaltitle a:hover {color: white;}





.animalsubboards a:link {                  

  background-image:url(https://i.ibb.co/gdcXtQ9/subtle-freckles.png); background-color: #6a9a8c;

 color: white;

   font-family: arial;

   font-size: 10px;

 padding: 8px 15px;

 text-align: center;

 text-decoration: none;

 display: inline-block;

position: relative;

   text-transform: lowercase;

   top:-15px;

text-shadow: 0 1px 2px #283322;

border: 3px solid transparent;

-webkit-border-image: url(https://i.ibb.co/12p2f5X/tumblr-luvtrl-ZDs-C1qiav1uo1-400.png) 50 round; /* Safari 3.1-5 */

-o-border-image: url(https://i.ibb.co/12p2f5X/tumblr-luvtrl-ZDs-C1qiav1uo1-400.png) 50 round; /* Opera 11-12.1 */

border-image: url(https://i.ibb.co/12p2f5X/tumblr-luvtrl-ZDs-C1qiav1uo1-400.png) 50 round;

                   box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);}







.animalrecent {  background-image:url(https://i.ibb.co/gdcXtQ9/subtle-freckles.png); background-color: #6a9a8c;

 color: white;

   font-family: arial;

   font-size: 10px;

   width: 100%;

 padding: 3px;

 text-align: center;

 text-decoration: none;

 display: inline-block;

margin-top: 7px;

   text-transform: uppercase;

}



.animalrecent a:link {font-size: 11px; color: #ffffff;}





pronounsno preference /o/
298written posts
offlinecurrently
k̾u̾r̾a̾ 💩
Senior Member
k̾u̾r̾a̾ 💩 Avatar
perhaps i am faint glimmer —
I'm 90% sure it's because you didn't close your table tags properly but without seeing your site, it's hard to tell. It looks like you're missing a </tr> tag, a </thead> tag, and a </table> tag. Also, you're not supposed to put <tr> tags inside <tr> tags.

<table class="list" role="grid">



   <thead>



       <table class ="animaltable">{foreach $[board]}



           {if !$[board.is_redirect]}



           <tr id="$[board.content_id]" class="$[board.content_class]"><td>

               <table>

                   <tr> <th class="animalcategory"></th> </tr>

                   <tr> <td class="animaltitleboard"><div class="animaltitle">$[board]</div></td><td class="animaldescriptionbox"><div class="animaldescription">$[board.description] </div></td> </tr>

                   <tr><td class="animalsubboardsbox"><div class="animalsubboards">{if $[board.sub_board]  > 0} {if $[board.sub_board] != 1}{/if}{foreach $[board.sub_board]}<a href="$[board.sub_board.href]">$[board.sub_board.name]</a>$[board.sub_board.comma] {/foreach} </div>{/if}</td></tr></table>

               </td>

               <td class="animalrecent">{if $[board.posts] > 0}



                   {if $[board.last_thread]}



                   $[board.last_thread.recent_link] by $[board.last_thread.last_post.created_by]



                   {/if}



                   {else}



                   {/if}</td> </tr> </table></thead>

       </table>


try using this and see if you have any better luck with it. it doesn't make my thread list weird, but it also doesn't style the subboards so this might need some further looking in to. edit: i'm dumb and didn't realize i was just looking at a thread list with no subboards. it works for me as far as i can tell o/
last edit on Jan 3, 2019 21:26:21 GMT by k̾u̾r̾a̾ 💩
aliaskappaccino
pronounsthey
283written posts
kappaccinoearned bits
offlinecurrently
kappaccino
Senior Member
kappaccino Avatar
welcome and well met, my brave little spark
Thanks for the assist! Trying the code gave me a different kind of breaking, so I wonder if I messed up the coding somewhere else too. When my brain is working a bit better tomorrow I'll try to see if I can figure it out better. 

Here is an image of what the new break looks like. Also, here is a link to the site. I only didn't share it because I'm working on a lot of different skins and bouncing between them. I'll be sure to keep this one on it today and tomorrow.

Thanks again for helping me.
last edit on Jan 4, 2019 0:00:06 GMT by kappaccino
pronounsno preference /o/
298written posts
offlinecurrently
k̾u̾r̾a̾ 💩
Senior Member
k̾u̾r̾a̾ 💩 Avatar
perhaps i am faint glimmer —
the weird stuff happening with your description boxes is because of the way your css is written. from .animaldescription, remove margin-left: -55px; and add width: 527px;

the gray background isn't showing up in every board on your list because the class .animaltable wasn't being added to them, so to fix that u just move the table tag containing that class within {foreach $[board]}.

i took the liberty to reorder some of your table stuff so hopefully it makes a little bit more sense now. you might have to mess around with the heights and widths a bit to get them aligned right. also, the cells for the subboards and the recent posts are right next to each other and will increase in height if you add more to one side or the other so you might want to contain them by giving their div containers fixed heights and widths.

i hope this helps!

<table class="list" role="grid">



   <thead>



       {foreach $[board]}

<table class ="animaltable">

           {if !$[board.is_redirect]}



           <tr id="$[board.content_id]" class="$[board.content_class]"><td>

               <table>

                   <tr> <th class="animalcategory"></th> </tr>

                   <tr> <td class="animaltitleboard"><div class="animaltitle">$[board]</div></td><td class="animaldescriptionbox"><div class="animaldescription">$[board.description] </div></td> </tr>
<tr><td class="animalsubboardsbox"><div class="animalsubboards">{if $[board.sub_board]  > 0} {if $[board.sub_board] != 1}{/if}{foreach $[board.sub_board]}<a href="$[board.sub_board.href]">$[board.sub_board.name]</a>$[board.sub_board.comma] {/foreach} </div>{/if}</td><td class="animalrecent">{if $[board.posts] > 0}



                   {if $[board.last_thread]}



                   $[board.last_thread.recent_link] by $[board.last_thread.last_post.created_by]



                   {/if}



                   {else}



   {/if}</td></tr>
                   </table>

               </td>

                </tr> </table></thead>

       </table>
3,083written posts
Kitten4uearned bits
offlinecurrently
Kitten4u
Part of the Furniture
Kitten4u Avatar
[nospaces]

[attr="class","infoBG"]
[attr="class","infoBG2"]
[attr="class","infoBack"]
[attr="class","infoTitle"][attr="class","fa fa-star-o"] threadarchived
[attr="class","infoDiv"]

[attr="class","infoBody"]

To keep the forum clean and so people know that all threads in certain areas are current and that the OP is likely to still have interest, we archive threads that haven't gotten posts for 2 weeks. This thread is being archived for that reason. If you would like this thread reopened, contact a staff member.