Making tables on pages

Keryth987
Keryth987
edited January 2021 in Campaign Portal Building

OK, so...I'm working on my next campaign for my group, and trying to utilize a spreadhseet like table with the accordion to make it more organized than I've had session synopsis in the past.

Here's what i got so far: https://xcomresistance.obsidianportal.com/wikis/mission-reports

And for a single it works fine. However, if i duplicate the box, the code gets all crazy and such as can be seen here: https://xcomresistance.obsidianportal.com/wikis/mission-reports-test

Code follows in seperate posts,

I've never used this Table code beyond some tests and always have to put it as the last thing on the page, otherwise it does this

Am I doing something wrong with the code, the CSS, the accordion, or all of the above.

In other words...HELP!!!!

 

 

Post edited by Keryth987 on

Comments

  • Keryth987
    Keryth987
    Posts: 1,047

    Code from good page:


    <div class="BORDERBOX" style="position:relative;top:-50px;left:-50px;width:760px;background-color:black;background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/252823/assets/1119607/Black_colour.jpg?1602136326);border-color:black;border-style:solid;border-width:1px;padding:10px 5px 10px 5px;;border-radius:6px;color: slategray;color:black;text-align:left;">

    <div style="float:center; background-color: rgba(240,248,255,0.5); box-shadow: inset 0em 0em 1em aliceblue, 0em 0em 1em lightskyblue;padding: 0px;"> 

    <div class="HomeWiki" style=";background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/252823/assets/1120707/animated-sound-waves.gif?1602556991);width:730px;height:80px;font-size:xx-large;font-family:'Audiowide';color:lightblue;font-weight:bold;text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black, 0px 0px 4px black;text-align:center;"></br>Mission Reports</div>


    [accordion]
    [accordion-item] [title]<div class="EpisodeSynopsis" style="margin:2px;left:-2px;position:relative;width:635px;height:200px;background-color:white;background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/252823/assets/1120699/advent_propaganda_center.jpg?1602553511);border-radius:6px;padding:2px;border-color:lightblue;border-style:solid;border-width:2px;"><a href="https://xcomresistance.obsidianportal.com/wikis/mission-reports"style="color:White">
    <div style="float:center; background-color: rgba(240,248,255,0.5); box-shadow: inset 0em 0em 1em aliceblue, 0em 0em 1em lightskyblue; padding: 10px;"> 
    <div class="EpisodeName" style="position:relative;left:175px;top:-10px;font-size:large;font-family:'Audiowide';color:black;padding:2px;font-weight:bold;">Episode 1: Operation Gatecrasher</div>
    <div class="leftThumbnail" style="position:absolute;left:0px;top:0px;border-color:lightblue;border-style:solid;border-width:2px;"><img style="width:184px;height:192px" src="https://db4sgowjqfwig.cloudfront.net/campaigns/252823/assets/1120684/20170831231901-1.jpg?1602552884"></div>
    <div class="summaryText" style="position:relative;left:120px;top:0px;font-family:‘Audiowide’;font-weight:bold;color:black;padding:2px;width:528px; margin-left: 60px; margin-right: 30px;">Rumors of The Commander's Survival have proven true. 
    Central dispatches a team to confirm the rumors and recover 
    The Commander if possible.</div>
    </div>
    </Div>
     [end-title] [content] <div class="CSSTableGenerator" style="position:relative;left:0px;top:10px;>
                    <table >
                        <tr>
                            <td>
                                Session
                            </td>
                            <td >
                                Date
                            </td>
                            <td>
                                Team Members
                            </td>
                        </tr>
                        <tr>
                            <td >
                                [[Episode 1 Session 1 | Episode 1 Session 1]]
                            </td>
                            <td>
                                3/12/14
                            </td>
                            <td>
                               [[:test-testing | Test Testing]]
                            </td>
                        </tr>
                        <tr>
                            <td >
                                Session 1
                            </td>
                            <td>
                                TBA
                            </td>
                            <td>
                                None
                            </td>
                        </tr>
                        <tr>
                            <td >
                                Session 2
                            </td>
                            <td>
                               TBA
                            </td>
                            <td>
                               None
                            </td>
                        </tr>
                        <tr>
                            <td >
                                Session 3
                            </td>
                            <td>
                                TBA
                            </td>
                            <td>
                                None
                            </td>
                        </tr>
                    </table>
                </div>
    </br>
    [end-content] [end-accordion-item]
    [end-accordion]

    </div>
    </div>





     

  • Keryth987
    Keryth987
    Posts: 1,047

    Other Code

     

  • Keryth987
    Keryth987
    Posts: 1,047

    ​


    [accordion]
    [accordion-item] [title]<div class="EpisodeSynopsis" style="margin:2px;left:-2px;position:relative;width:635px;height:200px;background-color:white;background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/252823/assets/1120699/advent_propaganda_center.jpg?1602553511);border-radius:6px;padding:2px;border-color:lightblue;border-style:solid;border-width:2px;"><a href="https://xcomresistance.obsidianportal.com/wikis/mission-reports"style="color:White">
    <div style="float:center; background-color: rgba(240,248,255,0.5); box-shadow: inset 0em 0em 1em aliceblue, 0em 0em 1em lightskyblue; padding: 10px;"> 
    <div class="EpisodeName" style="position:relative;left:175px;top:-10px;font-size:large;font-family:'Audiowide';color:black;padding:2px;font-weight:bold;">Episode 1: Operation Gatecrasher</div>
    <div class="leftThumbnail" style="position:absolute;left:0px;top:0px;border-color:lightblue;border-style:solid;border-width:2px;"><img style="width:184px;height:192px" src="https://db4sgowjqfwig.cloudfront.net/campaigns/252823/assets/1120684/20170831231901-1.jpg?1602552884"></div>
    <div class="summaryText" style="position:relative;left:120px;top:0px;font-family:‘Audiowide’;font-weight:bold;color:black;padding:2px;width:528px; margin-left: 60px; margin-right: 30px;">Rumors of The Commander's Survival have proven true. 
    Central dispatches a team to confirm the rumors and recover 
    The Commander if possible.</div>
    </div>
    </Div>
     [end-title] [content] <div class="CSSTableGenerator" style="position:relative;left:0px;top:10px;>
                    <table >
                        <tr>
                            <td>
                                Session
                            </td>
                            <td >
                                Date
                            </td>
                            <td>
                                Team Members
                            </td>
                        </tr>
                        <tr>
                            <td >
                                [[Episode 1 Session 1 | Episode 1 Session 1]]
                            </td>
                            <td>
                                3/12/14
                            </td>
                            <td>
                               [[:test-testing | Test Testing]]
                            </td>
                        </tr>
                        <tr>
                            <td >
                                Session 1
                            </td>
                            <td>
                                TBA
                            </td>
                            <td>
                                None
                            </td>
                        </tr>
                        <tr>
                            <td >
                                Session 2
                            </td>
                            <td>
                               TBA
                            </td>
                            <td>
                               None
                            </td>
                        </tr>
                        <tr>
                            <td >
                                Session 3
                            </td>
                            <td>
                                TBA
                            </td>
                            <td>
                                None
                            </td>
                        </tr>
                    </table>
                </div>
    </br>
    [end-content] [end-accordion-item]
    [accordion-item] [title]<div class="EpisodeSynopsis" style="margin:2px;left:-2px;position:relative;width:635px;height:200px;background-color:white;background-image:url(https://db4sgowjqfwig.cloudfront.net/campaigns/252823/assets/1120699/advent_propaganda_center.jpg?1602553511);border-radius:6px;padding:2px;border-color:lightblue;border-style:solid;border-width:2px;"><a href="https://xcomresistance.obsidianportal.com/wikis/mission-reports"style="color:White">
    <div style="float:center; background-color: rgba(240,248,255,0.5); box-shadow: inset 0em 0em 1em aliceblue, 0em 0em 1em lightskyblue; padding: 10px;"> 
    <div class="EpisodeName" style="position:relative;left:175px;top:-10px;font-size:large;font-family:'Audiowide';color:black;padding:2px;font-weight:bold;">Episode 1: Operation Gatecrasher</div>
    <div class="leftThumbnail" style="position:absolute;left:0px;top:0px;border-color:lightblue;border-style:solid;border-width:2px;"><img style="width:184px;height:192px" src="https://db4sgowjqfwig.cloudfront.net/campaigns/252823/assets/1120684/20170831231901-1.jpg?1602552884"></div>
    <div class="summaryText" style="position:relative;left:120px;top:0px;font-family:‘Audiowide’;font-weight:bold;color:black;padding:2px;width:528px; margin-left: 60px; margin-right: 30px;">Rumors of The Commander's Survival have proven true. 
    Central dispatches a team to confirm the rumors and recover 
    The Commander if possible.</div>
    </div>
    </Div>
     [end-title] [content] <div class="CSSTableGenerator" style="position:relative;left:0px;top:10px;>
                    <table >
                        <tr>
                            <td>
                                Session
                            </td>
                            <td >
                                Date
                            </td>
                            <td>
                                Team Members
                            </td>
                        </tr>
                        <tr>
                            <td >
                                [[Episode 1 Session 1 | Episode 1 Session 1]]
                            </td>
                            <td>
                                3/12/14
                            </td>
                            <td>
                               [[:test-testing | Test Testing]]
                            </td>
                        </tr>
                        <tr>
                            <td >
                                Session 1
                            </td>
                            <td>
                                TBA
                            </td>
                            <td>
                                None
                            </td>
                        </tr>
                        <tr>
                            <td >
                                Session 2
                            </td>
                            <td>
                               TBA
                            </td>
                            <td>
                               None
                            </td>
                        </tr>
                        <tr>
                            <td >
                                Session 3
                            </td>
                            <td>
                                TBA
                            </td>
                            <td>
                                None
                            </td>
                        </tr>
                    </table>
                </div>
    </br>
    [end-content] [end-accordion-item]
    [end-accordion]
    </div>
    </div>

    ​

  • Keryth987
    Keryth987
    Posts: 1,047 

    /*Tables For Episode Synopsis*/
    .CSSTableGenerator {
    	margin:0px;padding:0px;
    	width:100%;
    	box-shadow: 10px 10px 5px #888888;
    	border:1px solid #000000;
    	-moz-border-radius-bottomleft:14px;
    	-webkit-border-bottom-left-radius:14px;
    	border-bottom-left-radius:14px;
    	-moz-border-radius-bottomright:14px;
    	-webkit-border-bottom-right-radius:14px;
    	border-bottom-right-radius:14px;
    	-moz-border-radius-topright:14px;
    	-webkit-border-top-right-radius:14px;
    	border-top-right-radius:14px;
    	-moz-border-radius-topleft:14px;
    	-webkit-border-top-left-radius:14px;
    	border-top-left-radius:14px;
    }.CSSTableGenerator table{
        border-collapse: collapse;
            border-spacing: 0;
    	width:100%;
    	height:100%;
    	margin:0px;padding:0px;
    }.CSSTableGenerator tr:last-child td:last-child {
    	-moz-border-radius-bottomright:14px;
    	-webkit-border-bottom-right-radius:14px;
    	border-bottom-right-radius:14px;
    }
    .CSSTableGenerator table tr:first-child td:first-child {
    	-moz-border-radius-topleft:14px;
    	-webkit-border-top-left-radius:14px;
    	border-top-left-radius:14px;
    }
    .CSSTableGenerator table tr:first-child td:last-child {
    	-moz-border-radius-topright:14px;
    	-webkit-border-top-right-radius:14px;
    	border-top-right-radius:14px;
    }.CSSTableGenerator tr:last-child td:first-child{
    	-moz-border-radius-bottomleft:14px;
    	-webkit-border-bottom-left-radius:14px;
    	border-bottom-left-radius:14px;
    }.CSSTableGenerator tr:hover td{
    	background-color:#ffffff;
    		}
    .CSSTableGenerator td{
    	vertical-align:middle;
    	background-color:#aad4ff;
    	border:1px solid #000000;
    	border-width:0px 1px 1px 0px;
    	text-align:left;
    	padding:7px;
    	font-size:15px;
    	font-family:Times New Roman;
    	font-weight:normal;
    	color:#000000;
    }.CSSTableGenerator tr:last-child td{
    	border-width:0px 1px 0px 0px;
    }.CSSTableGenerator tr td:last-child{
    	border-width:0px 0px 1px 0px;
    }.CSSTableGenerator tr:last-child td:last-child{
    	border-width:0px 0px 0px 0px;
    }
    .CSSTableGenerator tr:first-child td{
    		background:-o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f) );
    	background:-moz-linear-gradient( center top, #005fbf 5%, #003f7f 100% );
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f");	background: -o-linear-gradient(top,#005fbf,003f7f);
    	background-color:#005fbf;
    	border:0px solid #000000;
    	text-align:center;
    	border-width:0px 0px 1px 1px;
    	font-size:14px;
    	font-family:Times New Roman;
    	font-weight:bold;
    	color:#ffffff;
    }
    .CSSTableGenerator tr:first-child:hover td{
    	background:-o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f) );
    	background:-moz-linear-gradient( center top, #005fbf 5%, #003f7f 100% );
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f");	background: -o-linear-gradient(top,#005fbf,003f7f);

    	background-color:#005fbf;
    }
    .CSSTableGenerator tr:first-child td:first-child{
    	border-width:0px 0px 1px 0px;
    }
    .CSSTableGenerator tr:first-child td:last-child{
    	border-width:0px 0px 1px 1px;
    }

    /*MOVE EDIT BUTTON*/
    .icon-edit {   position: relative; left: -45px; }

    /* DATE FORMATTING, LISTING*/
    .adventure-log-post-container .post-date {
    background: -moz-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 25%, rgba(255,0,0,1) 73%, rgba(255,0,0,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,255,1)), color-stop(25%,rgba(0,0,255,1)), color-stop(73%,rgba(0,0,255,0.36)), color-stop(100%,rgba(0,0,255,0)));
    background: -webkit-linear-gradient(top, rgba(0,0,255,1) 0%,rgba(0,0,255,1) 25%,rgba(0,0,255,0.36) 73%,rgba(0,0,255,0) 100%);
    background: -o-linear-gradient(top, rgba(0,0,255,1) 0%,rgba(0,0,255,1) 25%,rgba(0,0,255,0.36) 73%,rgba(0,0,255,0) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,255,1) 0%,rgba(0,0,255,1) 25%,rgba(0,0,255,0.36) 73%,rgba(0,0,255,0) 100%);
    background: linear-gradient(to bottom, rgba(0,0,255,1) 0%,rgba(0,0,255,1) 25%,rgba(0,0,255,0.36) 73%,rgba(0,0,255,0) 100%);
    	-moz-border-radius:10px;
    	-webkit-border-radius:10px;
    	border-radius:10px;
    	-khtml-border-radius:10px;

    CSS for Tables

  • thaen
    thaen
    Posts: 1,076

    Looks like both pages actually have the same problem, but the browser only gets confused when the second one is added in.

    Just inside the [content] tag, you have a div with a style attribute.  The style attribute has an opening double quote, but it doesn't have an ending double quote right after "top:10px;".  Add that double quote on and it should start working correctly.

    style="position:relative;left:0px;top:10px;

     

    Obsidian Portal Developer

  • Keryth987
    Keryth987
    Posts: 1,047

    That did it. Thanks. Stupid single error

    Sometimes it takes a second set of eyes to spot these things. I must have combed that code a dozen times or more and didnt see that

  • thaen
    thaen
    Posts: 1,076

    Oh yeah, happens all the time to me.

    The way I found this one was to pull the pieces apart, the contained chunks of HTML like just the table, and then put each contained chunk into an HTML Validator.  The Validator will give warnings about things missing like headers and what not because it's expecting an entire html page, but if it says anything about the syntax of specific lines or errors on specific lines, I try to pay attention there and see if I've missed something.

    Obsidian Portal Developer

  • gastoff
    gastoff
    Posts: 136

    After many CSS code breaks, I've discovered that any time the browser begins displaying the CSS code in the screen, it usually means a bracket wasn't closed off at some point. I did not realize until now that the same issue would arise if an extra bracket was added at the beginning of a block of code! If...nay...WHEN, my code breaks in the future, I'll be sure to look at both the beginning and ending brackets to make sure they are all accounted for. Thanks @thaen and @Keryth987 for giving me a chance to learn the solution to this issue before it inevitably happens to me!

    image

Sign In or Register to comment.

April 2024
Season of Strife

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions

Categories